Utility Types de TypeScript: Cheatsheet Práctico

Utility Types de TypeScript: Más Allá de lo Básico

Los utility types nativos de TypeScript permiten transformar tipos sin reescribirlos. En vez de crear UserUpdate manualmente con todos los campos opcionales, usa Partial<User>. Son componibles, poderosos, y cuando los aprendas, los usarás en todas partes.

Los Esenciales

interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user';
  createdAt: Date;
}

Partial<T> — hace todas las propiedades opcionales:

type UserUpdate = Partial<User>;
// { id?: number; name?: string; email?: string; ... }

function updateUser(id: number, data: Partial<User>) {
  // Puede pasar { name: 'Nuevo Nombre' } sin los otros campos
}

Required<T> — hace todas las propiedades requeridas (opuesto de Partial):

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

type StrictConfig = Required<Config>;
// { host: string; port: number; debug: boolean; }

Pick<T, K> — selecciona propiedades específicas:

type UserPreview = Pick<User, 'id' | 'name'>;
// { id: number; name: string; }

type LoginResponse = Pick<User, 'id' | 'email' | 'role'>;

Omit<T, K> — elimina propiedades específicas:

type CreateUserInput = Omit<User, 'id' | 'createdAt'>;
// { name: string; email: string; role: 'admin' | 'user'; }

Record<K, V> — crea un tipo objeto con clave y valor específicos:

type UserRoles = Record<string, 'admin' | 'user' | 'guest'>;

const permissions: Record<User['role'], string[]> = {
  admin: ['read', 'write', 'delete'],
  user: ['read'],
};

Tipos de Manipulación de String

type Upper = Uppercase<'hello'>;       // 'HELLO'
type Lower = Lowercase<'HELLO'>;       // 'hello'
type Cap = Capitalize<'hello'>;        // 'Hello'
type Uncap = Uncapitalize<'Hello'>;    // 'hello'

Combinaciones Avanzadas

// Hacer solo algunos campos opcionales
type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
type UserWithOptionalEmail = PartialBy<User, 'email'>;

// Versión readonly para estado inmutable
type ImmutableUser = Readonly<User>;

// Extraer tipo de retorno de función
function getUser() { return { id: 1, name: 'Alice' }; }
type UserResult = ReturnType<typeof getUser>;
// { id: number; name: string; }

// Extraer parámetros de función
type GetUserParams = Parameters<typeof getUser>;

Patrones del Mundo Real

// Tipos de endpoint de API
interface ApiEndpoints {
  '/users': { GET: User[]; POST: Omit<User, 'id'>; };
  '/users/:id': { GET: User; PUT: Partial<User>; DELETE: void; };
}

// Mapa de event handlers
type EventMap = Record<string, (...args: any[]) => void>;

Formatea tu TypeScript: Formateador JavaScript/TypeScript — pega código, obtén salida formateada instantáneamente.