TypeScript 5: Las Novedades que Todo Desarrollador Debe Conocer

TypeScript 5: Más Rápido, Más Potente, Más Simple

TypeScript 5 trae mejoras significativas en rendimiento, nuevas características del lenguaje y mejor experiencia de desarrollo. Veamos las novedades más importantes.

1. Decoradores Estándar (Stage 3)

Los decoradores ahora siguen el estándar de ECMAScript:

// Decorador de clase
function logged(value: any, context: ClassDecoratorContext) {
  return class extends value {
    constructor(...args: any[]) {
      super(...args);
      console.log(`Instancia de ${context.name} creada`);
    }
  };
}

@logged
class User {
  constructor(public name: string) {}
}

// Decorador de método
function measure(target: any, context: ClassMethodDecoratorContext) {
  return function(...args: any[]) {
    const start = performance.now();
    const result = target.apply(this, args);
    const end = performance.now();
    console.log(`${String(context.name)} tomó ${end - start}ms`);
    return result;
  };
}

class Calculator {
  @measure
  complexCalculation(n: number) {
    return Array.from({ length: n }, (_, i) => i).reduce((a, b) => a + b, 0);
  }
}

2. const Type Parameters

Preserva los tipos literales en genéricos:

// Antes
function createArray<T>(items: T[]) {
  return items;
}
const arr = createArray(['a', 'b', 'c']); // tipo: string[]

// Con const
function createArray<const T>(items: T[]) {
  return items;
}
const arr = createArray(['a', 'b', 'c']); // tipo: ['a', 'b', 'c']

3. Mejoras en Enums

Los enums ahora son más seguros y eficientes:

enum Status {
  Pending = 'PENDING',
  Active = 'ACTIVE',
  Completed = 'COMPLETED'
}

// Ahora puedes usar enums como tipos de unión
type StatusValue = `${Status}`; // 'PENDING' | 'ACTIVE' | 'COMPLETED'

4. Satisfies Operator

Valida tipos sin perder información:

type Colors = 'red' | 'green' | 'blue';

const palette = {
  primary: 'red',
  secondary: 'green',
  accent: 'blue'
} satisfies Record<string, Colors>;

// Mantiene los tipos literales
palette.primary; // tipo: 'red' (no Colors)

// Pero valida que los valores sean correctos
const invalid = {
  primary: 'yellow' // Error: 'yellow' no es asignable a Colors
} satisfies Record<string, Colors>;

5. Mejoras en el Sistema de Módulos

Resolución de Módulos Mejorada

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true
  }
}

// Ahora puedes importar con extensión .ts
import { User } from './user.ts';

6. Rendimiento Mejorado

TypeScript 5 es significativamente más rápido:

• 10-20% más rápido en compilación
• Menor uso de memoria en proyectos grandes
• Mejor caché de tipos

7. Nuevos Utility Types

// Awaited - Extrae el tipo de una Promise
type Result = Awaited<Promise<string>>; // string

// NoInfer - Previene inferencia en ciertos lugares
function createUser<T extends string>(
  name: T,
  defaultName: NoInfer<T>
) {
  return name || defaultName;
}

createUser('Osman', 'Default'); // OK
createUser('Osman', 'Other'); // Error si 'Other' no es compatible

8. Mejoras en Template Literal Types

// Manipulación avanzada de strings
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

// Combinaciones complejas
type HTTPMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type Endpoint = '/users' | '/posts';
type APIRoute = `${HTTPMethod} ${Endpoint}`;
// 'GET /users' | 'POST /users' | 'PUT /users' | ...

9. Mejor Inferencia de Control de Flujo

function processValue(value: string | number | null) {
  if (value === null) {
    return 'null';
  }
  
  // TypeScript ahora sabe que value es string | number
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  
  // Y aquí sabe que es number
  return value.toFixed(2);
}

10. Configuración Simplificada

// tsconfig.json más simple
{
  "extends": "@tsconfig/node20/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist",
    "strict": true
  },
  "include": ["src"]
}

Migrando a TypeScript 5

1. Actualiza las dependencias:

   npm install -D typescript@latest

2. Revisa los breaking changes: Principalmente relacionados con decoradores legacy
3. Actualiza tsconfig.json: Aprovecha las nuevas opciones
4. Prueba tu código: La mayoría de proyectos migran sin problemas

Conclusión

TypeScript 5 representa un gran paso adelante en términos de rendimiento, características del lenguaje y experiencia de desarrollo. Las mejoras en decoradores, tipos literales y el operador satisfies hacen que el código sea más expresivo y seguro. Si aún no has actualizado, este es el momento perfecto para hacerlo.

¿Qué característica de TypeScript 5 te parece más útil? ¿Ya has migrado tus proyectos?