TypeScript avanzado: patrones y utility types
Domina los tipos genéricos, mapped types y conditional types para código más seguro y expresivo.
TypeScript es mucho más que agregar : string a tus variables. Su sistema de tipos es Turing completo, lo que permite expresar restricciones complejas de forma elegante.
Generics: la base de todo
Los generics permiten crear funciones y tipos que trabajan con cualquier tipo de dato manteniendo la seguridad:
function firstElement<T>(arr: T[]): T | undefined {
return arr[0];
}
const num = firstElement([1, 2, 3]); // number
const str = firstElement(['a', 'b']); // string
Utility Types esenciales
TypeScript incluye tipos utilitarios que transforman tipos existentes:
interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user';
}
type CreateUser = Omit<User, 'id'>;
type UpdateUser = Partial<Pick<User, 'name' | 'email'>>;
type ReadonlyUser = Readonly<User>;
Mapped Types personalizados
Puedes crear tus propios tipos que transforman las propiedades de otro tipo:
type Nullable<T> = {
[K in keyof T]: T[K] | null;
};
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
Conditional Types
Los tipos condicionales permiten lógica a nivel de tipos:
type ApiResponse<T> = T extends Array<infer U>
? { data: U[]; total: number }
: { data: T };
Template Literal Types
Combinados con mapped types, permiten generar tipos de string de forma dinámica:
type EventName = 'click' | 'focus' | 'blur';
type Handler = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'
Dominar estos patrones no solo hace tu código más seguro, sino que convierte al compilador en tu mejor aliado para detectar bugs antes de que lleguen a producción.



