5 Tips de TypeScript que debes conocer

TypeScript se ha convertido en el estándar para desarrollo JavaScript moderno. Aquí te comparto algunos tips útiles.

1. Usa unknown en lugar de any

Cuando no conoces el tipo de una variable, es tentador usar any. Sin embargo, unknown es más seguro:

// No recomendado
function procesar(data: any) {
  return data.value; // No hay verificación de tipos
}

// Recomendado
function procesar(data: unknown) {
  if (typeof data === 'object' && data !== null && 'value' in data) {
    return (data as { value: string }).value;
  }
}

2. Utility Types son tus amigos

TypeScript incluye tipos de utilidad increíbles:

interface Usuario {
  id: string;
  nombre: string;
  email: string;
  edad: number;
}

// Partial: Hace todas las propiedades opcionales
type ActualizarUsuario = Partial<Usuario>;

// Pick: Selecciona propiedades específicas
type UsuarioPublico = Pick<Usuario, 'nombre' | 'edad'>;

// Omit: Excluye propiedades
type UsuarioSinId = Omit<Usuario, 'id'>;

3. Type Guards personalizados

Crea funciones que TypeScript entienda como verificadores de tipo:

interface Perro {
  ladrar: () => void;
}

interface Gato {
  maullar: () => void;
}

function esPerro(animal: Perro | Gato): animal is Perro {
  return 'ladrar' in animal;
}

function hacerSonido(animal: Perro | Gato) {
  if (esPerro(animal)) {
    animal.ladrar(); // TypeScript sabe que es un Perro
  } else {
    animal.maullar(); // TypeScript sabe que es un Gato
  }
}

4. Const Assertions

Usa as const para tipos más específicos:

// Sin const assertion
const colores = ['rojo', 'verde', 'azul']; // string[]

// Con const assertion
const colores = ['rojo', 'verde', 'azul'] as const; // readonly ['rojo', 'verde', 'azul']

5. Template Literal Types

Crea tipos dinámicos con template literals:

type Evento = 'click' | 'scroll' | 'mousemove';
type EventoHandler = `on${Capitalize<Evento>}`; // 'onClick' | 'onScroll' | 'onMousemove'

Conclusión

TypeScript es una herramienta poderosa. Estos tips te ayudarán a escribir código más seguro y mantenible.

¡Happy coding!