Tipos Literales y Aserciones

TypeScript ofrece herramientas avanzadas para limitar los posibles valores de las variables y para obligar al compilador a reconocer tipos más específicos cuando sea necesario.

Tipos Literales (Literal Types)

Un tipo literal representa un único valor preciso (por ejemplo, una cadena o un número específico). Por lo general, se combinan con las uniones:

type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;

light = 'red'; // OK
light = 'blue'; // Errore: "blue" non è assegnabile a TrafficLight

Aserciones de Tipo (as)

A veces dispones de información sobre un tipo que TypeScript no puede conocer en tiempo de compilación. En estos casos, puedes usar una aserción de tipo mediante la palabra clave as:

const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;

La aserción le dice al compilador: "Confía en mí, sé que este elemento es un HTMLCanvasElement". No realiza ninguna verificación ni conversión (cast) en tiempo de ejecución; solo sirve para ayudar al verificador de tipos (type checker).

Aserciones Const (as const)

Cuando declaramos un objeto o un array con const, TypeScript permite modificar sus propiedades internas. Al agregar as const al final, toda la estructura se congela y se vuelve de solo lectura, convirtiendo todas las propiedades en sus tipos de valores literales exactos:

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Errore: l'array è di sola lettura (readonly)

Tipos de Cadena de Plantilla (Template Literal Types)

Los tipos de cadena de plantilla se basan en las plantillas de cadena de JavaScript, pero se utilizan para definir tipos. Permiten combinar varios tipos literales en uno solo:

type Size = 'small' | 'large';
type Color = 'red' | 'blue';

// Crea l'unione: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

Utilidades de Cadenas en los Template Literal Types

TypeScript ofrece tipos de utilidad especiales para manipular caracteres dentro de los Template Literal Types:

• Capitalize<StringType>: Convierte en mayúscula la primera letra de la cadena.
• Uncapitalize<StringType>: Convierte en minúscula la primera letra de la cadena.
• Uppercase<StringType>: Convierte toda la cadena en mayúsculas.
• Lowercase<StringType>: Convierte toda la cadena en minúsculas.

type ActionType = 'click' | 'hover';

// Genera: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;

Pruébalo tú

Ejercicio 1: Unión de Literales Direction

Ejercicio 2: Aserción sobre JSON.parse

Ejercicio 3: Template Literal para Eventos

Ejercicio 4: Template Literal Type con Capitalize