Guía Avanzada de TypeScript: Tipado, Decoradores y Patrón Utility Types

Víctor Calderón Oyarce, vcalderondev, vcalderon.dev, web developer

Guía Avanzada de TypeScript: Tipado, Decoradores y Patrón Utility Types

TypeScript es un superconjunto de JavaScript que añade tipado estático y características avanzadas para mejorar la escalabilidad de las aplicaciones. En este artículo exploraremos conceptos avanzados de TypeScript que optimizarán tu código y reducirán errores.

Tipado Avanzado en TypeScript

TypeScript permite definir tipos altamente flexibles mediante intersecciones, uniones, tipos genéricos y mapeados.

Tipos Genéricos

Los genéricos permiten definir funciones y clases reutilizables con tipos dinámicos.

function identity(arg: T): T {
  return arg;
}

const result = identity("Hola TypeScript");

Tipos Condicionales

Podemos utilizar tipos condicionales para evaluar y transformar tipos en tiempo de compilación.

type IsString = T extends string ? "Es un string" : "No es un string";

type Test1 = IsString<"Hello">; // "Es un string"
type Test2 = IsString<42>; // "No es un string"

Tipos Mapeados

Permiten transformar tipos existentes en nuevos tipos.

type Readonly = {
  readonly [K in keyof T]: T[K];
};

type User = { name: string; age: number };
type ReadonlyUser = Readonly;

Decoradores en TypeScript

Los decoradores son una característica experimental de TypeScript que permiten modificar clases, métodos y propiedades en tiempo de ejecución.

Decorador de Clase

Un decorador de clase recibe el constructor y puede modificarlo.

function Logger(constructor: Function) {
  console.log(`Clase creada: ${constructor.name}`);
}

@Logger
class Person {
  constructor(public name: string) {}
}

Decorador de Método

Permite interceptar la ejecución de un método.

function Log(target: any, methodName: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Llamando a ${methodName} con argumentos:`, args);
    return originalMethod.apply(this, args);
  };
}

class Calculator {
  @Log
  sum(a: number, b: number): number {
    return a + b;
  }
}

Utility Types en TypeScript

Los utility types permiten transformar tipos de manera eficiente.

Partial

Convierte todas las propiedades de un objeto en opcionales.

type User = { name: string; age: number };
type PartialUser = Partial;

Pick

Permite seleccionar propiedades específicas de un tipo.

type User = { name: string; age: number; email: string };
type UserName = Pick;

Omit

Elimina propiedades específicas de un tipo.

type User = { name: string; age: number; email: string };
type UserWithoutEmail = Omit;

Mejores Prácticas con TypeScript

  • Evita el uso excesivo de "any": Usa tipos estrictos para maximizar la seguridad del código.
  • Usa interfaces para contratos: Son más flexibles que los types en muchos casos.
  • Prefiere readonly para propiedades inmutables: Reduce errores por mutaciones accidentales.
  • Usa strict mode en tsconfig.json: Habilita reglas más estrictas de tipado.

Conclusión

TypeScript ofrece herramientas poderosas para la programación escalable. Con genéricos, decoradores y utility types, puedes escribir código más seguro, reutilizable y fácil de mantener.