typescript

TypeScript

Generics

Types

Type Safety

Advanced

TypeScript Avanzado: Generics, Utility Types y Type Guards

Domina las características avanzadas de TypeScript: Generics, Utility Types (Pick, Omit, Partial), Type Guards y mapped types con ejemplos prácticos.

Laura Fernández

TypeScript advocate y arquitecta de software

9 de noviembre de 2025

18 min

TypeScript Avanzado: Dominando el Sistema de Tipos

TypeScript va mucho más allá de añadir tipos a JavaScript. Con Generics, Utility Types, y Type Guards, podemos crear sistemas de tipos robustos y reutilizables.

En este artículo profundizaremos en las características avanzadas que todo desarrollador TypeScript debe dominar.

Generics: Tipos Reutilizables

Los Generics permiten crear componentes que funcionan con múltiples tipos manteniendo type safety. Son como parámetros para tipos.

Generic Functions

typescript

utils.ts

1// Generic function: funciona con cualquier tipo
2function getFirst<T>(arr: T[]): T | undefined {
3  return arr[0];
4}
5
6const numbers = [1, 2, 3];
7const first = getFirst(numbers);  // Type: number | undefined
8
9const strings = ['a', 'b', 'c'];
10const firstStr = getFirst(strings);  // Type: string | undefined

Generic Constraints

Puedes restringir los tipos genéricos con extends para garantizar ciertas propiedades:

typescript

api.ts

1interface HasId {
2  id: string;
3}
4
5// Solo acepta tipos que tengan 'id'
6function findById<T extends HasId>(items: T[], id: string): T | undefined {
7  return items.find(item => item.id === id);
8}
9
10const users = [
11  { id: '1', name: 'Ana' },
12  { id: '2', name: 'Luis' }
13];
14
15const user = findById(users, '1');  // ✅ OK
16const invalid = findById([1, 2, 3], '1');  // ❌ Error: number no tiene 'id'

Buena práctica: Usa generic constraints para hacer tus funciones más específicas y seguras.

Utility Types: Transformaciones de Tipos

TypeScript incluye Utility Types built-in para transformar tipos existentes. Son increíblemente poderosos.

Pick y Omit

typescript

types.ts

1interface User {
2  id: string;
3  name: string;
4  email: string;
5  password: string;
6  role: 'admin' | 'user';
7}
8
9// Pick: seleccionar propiedades específicas
10type UserPublic = Pick<User, 'id' | 'name' | 'email'>;
11// { id: string; name: string; email: string; }
12
13// Omit: excluir propiedades específicas
14type UserSafe = Omit<User, 'password'>;
15// { id: string; name: string; email: string; role: 'admin' | 'user'; }

Partial y Required

typescript

update.ts

1interface User {
2  id: string;
3  name: string;
4  email: string;
5}
6
7// Partial: hace todas las propiedades opcionales
8type UserUpdate = Partial<User>;
9// { id?: string; name?: string; email?: string; }
10
11function updateUser(id: string, updates: UserUpdate) {
12  // Permite actualizar solo algunas propiedades
13}
14
15updateUser('1', { name: 'Nuevo Nombre' });  // ✅ OK
16
17// Required: hace todas las propiedades obligatorias
18type UserRequired = Required<UserUpdate>;
19// { id: string; name: string; email: string; }

Utility Types: Tabla Resumen

Utility Types más usados en TypeScript

Utility Type	Descripción	Ejemplo
Partial<T>	Hace todas las props opcionales	Partial<User>
Required<T>	Hace todas las props obligatorias	Required<User>
Pick<T, K>	Selecciona props específicas	Pick<User, 'id' \| 'name'>
Omit<T, K>	Excluye props específicas	Omit<User, 'password'>
Record<K, T>	Objeto con keys K y valores T	Record<string, number>
Readonly<T>	Hace todas las props readonly	Readonly<User>

Type Guards: Narrowing de Tipos

Los Type Guards permiten narrowing (refinar) tipos en tiempo de compilación usando checks en runtime.

typescript

guards.ts

1interface Cat {
2  type: 'cat';
3  meow: () => void;
4}
5
6interface Dog {
7  type: 'dog';
8  bark: () => void;
9}
10
11type Animal = Cat | Dog;
12
13// Type Guard con predicado
14function isCat(animal: Animal): animal is Cat {
15  return animal.type === 'cat';
16}
17
18function makeSound(animal: Animal) {
19  if (isCat(animal)) {
20    animal.meow();  // ✅ TypeScript sabe que es Cat
21  } else {
22    animal.bark();  // ✅ TypeScript sabe que es Dog
23  }
24}

Precaución: Los Type Guards deben implementarse correctamente. Una validación incorrecta puede causar bugs en runtime.

Mejores Prácticas

Aquí hay algunas recomendaciones para aprovechar TypeScript al máximo:

typescript

1// ❌ MAL: any pierde type safety
2function process(data: any) {
3  return data.something();
4}
5
6// ✅ BIEN: usa unknown y type guards
7function process(data: unknown) {
8  if (typeof data === 'object' && data !== null && 'something' in data) {
9    return (data as { something: () => void }).something();
10  }
11  throw new Error('Invalid data');
12}

Prohibido: Evita any siempre que sea posible. Usa unknown y Type Guards en su lugar.

Conclusión

Dominar Generics, Utility Types y Type Guards te convierte en un desarrollador TypeScript avanzado.

Estas herramientas permiten crear código type-safe, reutilizable y mantenible. ¡Practica y verás cómo tu código mejora dramáticamente! 🚀

¿Te gustó este artículo?

¡Compártelo con tu comunidad!

Más sobre typescript

typescript

typescript test

esto es un tema test de type script

#js#ts#strict

13 nov

20 min min

También te podría interesar

css

Tailwind CSS: Grid y Flexbox para Layouts Modernos

Aprende a crear layouts responsive y modernos con Tailwind CSS: Grid, Flexbox, y utilidades de spacing para diseños profesionales.

#Tailwind CSS#Grid#Flexbox

8 nov

14 min min

desarrollo-web

Optimización de Algoritmos: De O(n²) a O(n log n)

La eficiencia algorítmica no es solo teoría de la computación: es la diferencia entre una aplicación que escala a millones de usuarios y otra que colapsa con...

#eficiencia#desarrollo-web#optimización

21 nov

1 min min

nextjs