Featured image of post Técnicas de codificación con seguridad de tipos para practicar en la serie TypeScript 5Featured image of post Técnicas de codificación con seguridad de tipos para practicar en la serie TypeScript 5

Técnicas de codificación con seguridad de tipos para practicar en la serie TypeScript 5

Se requiere filosofía de diseño tipográfico en la era TypeScript 5.x

La serie TypeScript 5 introdujo una serie de características nuevas que maximizan la precisión de la inferencia de tipos sin comprometer la experiencia del desarrollador. El código que se basa en un exceso de afirmaciones de tipo (as) es un caldo de cultivo para errores de tiempo de ejecución. Con el sistema de kata de tu lado, te explicaremos técnicas prácticas que naturalmente limitarán tu kata.


1. Parámetro de tipo const: inferencia de tipo literal más inteligente

Anteriormente, si deseaba conservar los tipos literales en los argumentos de la función, tenía que agregar as const en el lado de la persona que llama. El parámetro de tipo const de TypeScript 5.0 le permite forzar la inferencia literal en el lado de la definición de la función.

// 呼び出し側の as const なしで厳密なリテラル配列として推論
function createRoutes<const T extends readonly string[]>(routes: T): T {
  return routes;
}
const routes = createRoutes(['/home', '/dashboard']);

Las matrices y los objetos pasados como argumentos no se amplían y se infieren de forma segura como tuplas o literales exactos.

2. Operador satisfaces: Compatibilidad de verificación e inferencia de compatibilidad de tipos

satisfaces resuelve el dilema de que agregar una anotación de tipo hace que se pierda la información de tipo concreta de la propiedad y eliminarla hace que la validación falle.

type Palette = Record<string, string | number[]>;
const theme = {
  primary: '#0066cc',
  rgb: [0, 102, 204],
} satisfies Palette;

// 型制約を満たしつつ、個別プロパティの型が完全保持される
theme.primary.toUpperCase(); // string型メソッドが安全に呼出可能

3. Centro de eventos con tipos literales de plantilla

type Event = 'click' | 'focus';
type HandlerMap = { [K in `on${Capitalize<Event>}`]?: () => void };

Aplique reglas de concatenación de cadenas a nivel de tipo y evite el 100% de errores tipográficos en los nombres de eventos en el momento de la compilación.


Antipatrón: “Cualquiera” que deba ser erradicado en el campo

Usar “como cualquier” como una forma rápida de resolver errores tipográficos es una mala manera de renunciar a los beneficios de TypeScript. Utilice funciones de protección de tipos (el operador is) y validadores de esquemas como Zod para limitar de forma segura los tipos en los límites del tiempo de ejecución.