TypeScript code
Volver al blog TypeScript ··7 min de lectura

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.

TypeScript Generics Utility Types Programación

Artículos relacionados

Vista panorámica de ciudad moderna representando proyectos digitales

¿Tienes un proyecto en mente?

Hablemos y hagámoslo realidad. Te ayudo a definir el alcance, la arquitectura y el diseño.

Logo de ArdilaDev
ardiladevMultidisciplinary Creative Studio

Chile · remoto / híbrido

contacto@ardiladev.com

Angular · TypeScript · Node · UX

© 2026 Ardiladev. Todos los derechos reservados.