Saltar al contenido
T
Volver al blog
TutorialTypeScriptBest Practices

TypeScript: Patrones avanzados que uso diariamente

Desde utility types hasta template literal types, estos son los patrones de TypeScript que han transformado mi código.

3 de enero de 20268 min de lectura451 visualizaciones

TypeScript: Patrones avanzados que uso diariamente

Después de años usando TypeScript, he desarrollado un arsenal de patrones que uso constantemente. Aquí están mis favoritos.

1. Discriminated Unions

Perfecto para estados de carga:

typescript 
type AsyncState<T> =   | { status: 'idle' }   | { status: 'loading' }   | { status: 'success'; data: T }   | { status: 'error'; error: Error };
function handleState<T>(state: AsyncState<T>) {   switch (state.status) {     case 'success':       return state.data; // TypeScript sabe que data existe     case 'error':       throw state.error; // TypeScript sabe que error existe   } }

2. Template Literal Types

typescript 
type EventName = 'click' 'focus' 'blur'; type HandlerName = on${Capitalize<EventName>}; // 'onClick' 'onFocus' 'onBlur'

3. Conditional Types

typescript 
type Flatten<T> = T extends Array<infer U> ? U : T;
type A = Flatten<string[]>; // string type B = Flatten<number>;   // number

4. Mapped Types con Modificadores

typescript 
type Mutable<T> = {   -readonly [P in keyof T]: T[P]; };
type Required<T> = {   [P in keyof T]-?: T[P]; };

5. El patrón Builder con tipos

typescript 
class QueryBuilder<T extends object = {}> {   select<K extends string>(field: K): QueryBuilder<T & Record<K, unknown>> {     // ...     return this as any;   } }
const query = new QueryBuilder()   .select('name')   .select('age'); // Tipo: QueryBuilder<{ name: unknown; age: unknown }>

Pro tip: Usa satisfies para validar tipos sin perder inferencia.

Conclusión

TypeScript es mucho más que "JavaScript con tipos". Dominar estos patrones te convertirá en un desarrollador más efectivo.

Compartir:

Comentarios (0)

Deja un comentario

No hay comentarios aún. ¡Sé el primero en opinar!