TypeScript Tips Avanzados

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