TypeScript Tips Avanzados que Todo Desarrollador Debería Conocer

TypeScript se ha convertido en el estándar de la industria para desarrollo de aplicaciones escalables. Sin embargo, muchos desarrolladores solo conocen sus características básicas y pierden el verdadero poder que ofrece.

---

1. Utility Types: Potencia Tu Tipado

TypeScript viene con tipos utilitarios poderosos que te permiten transformar y manipular tipos de forma elegante.

Los Más Útiles

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
}


// Partial: Todos los campos opcionales
// Útil para formularios y actualizaciones parciales
type PartialUser = Partial<User>;


// Pick: Solo campos específicos
// Útil cuando solo necesitas ciertas propiedades
type UserSummary = Pick<User, 'id' | 'name' | 'email'>;


// Omit: Excluye campos específicos
// Perfecto para exponer datos públicos sin sensibles
type PublicUser = Omit<User, 'password' | 'createdAt'>;

---

2. Generic Constraints: Tipado Flexible pero Controlado

Los genéricos son poderosos, pero a veces necesitas limitar qué tipos pueden aceptar. Aquí entran las constraints.

Ejemplo Práctico

// Requerimos que T tenga una propiedad 'id'
interface WithId {
  id: number | string;
}


// La función garantiza que cualquier T tendrá un 'id'
function getById<T extends WithId>(items: T[], id: T['id']): T | undefined {
  return items.find(item => item.id === id);
}


// Ahora podemos usar cualquier tipo que tenga 'id'
interface Product {
  id: string;
  name: string;
  price: number;
}

interface Order {
  id: number;
  total: number;
}

// Ambas funcionan gracias a la constraint
const product = getById<Product>(products, 'prod-001');
const order = getById<Order>(orders, 12345);

---

3. Template Literal Types: Tipado Dinámico

Crea tipos basados en combinaciones de strings. Perfecto para naming conventions y eventos.

Ejemplo: Sistema de Eventos

type EventName = `on${Capitalize<string>}`;

// TypeScript infiere automáticamente:
// onClick, onHover, onSubmit, onKeyDown, etc.

const handleClick: 'onClick' = 'onClick';  // ✓ Válido
const handleCustom: 'onCustom' = 'onCustom'; // ✗ Error de tipo

Uso Avanzado: Callbacks Consistentes

type ActionType = `${string}:${string}`;
type Handler<T extends string> = `handle${Capitalize<T>}`;

function registerHandler<T extends string>(
  action: T,
  handler: Handler<T>
) {
  // Implementación
}

registerHandler('click', 'handleClick');   // ✓
registerHandler('submit', 'handleSubmit'); // ✓
registerHandler('delete', 'handleDelete'); // ✓

---

4. Satisfies Operator: Lo Mejor de Dos Mundos

El operador satisfies valida que un valor coincida con un tipo sin perder la inferencia de tipos.

El Problema

// Si usamos `:`, perdemos la inferencia exacta
const theme: Record<string, string> = {
  primary: '#0ea5e9',
  secondary: '#7c3aed',
  // Si escribimos mal, no lo detectamos hasta runtime
  succcess: '#10b981', // Typo no detectado
};

La Solución: satisfies

const theme = {
  primary: '#0ea5e9',
  secondary: '#7c3aed',
  success: '#10b981',  // Si escribimos succcess... ✗ Error de tipo
} satisfies Record<string, string>;

Resultado: Tienes tipado estrictp Y TypeScript infiere el tipo exacto del objeto.

---

Bonus: Tip Profesional

Pipeline de Tipos

Combina utility types para transformaciones complejas:

interface APIPResponse {
  id: number;
  user_name: string;
  user_email: string;
  created_at: string; // ISO string
}

// Transformación completa
type UserFromAPI = {
  [K in keyof APIPResponse as `api_${K}`]: APIPResponse[K];
} & {
  createdDate: Date;
};


// Resultado:
// {
//   api_id: number;
//   api_user_name: string;
//   api_user_email: string;
//   api_created_at: string;
//   createdDate: Date;
// }

---

Conclusión

Dominar estos tips avanzados de TypeScript te convertirá en un desarrollador más eficiente. Tu código será:

• Más seguro: Menos errores en tiempo de ejecución
• Más mantenible: Types auto-documentados
• Más robusto: Refactoring sin miedo

Integra uno nuevo cada semana en tu flujo de trabajo.

---

Tags: #TypeScript #Programación #DesarrolloWeb #Tips