Tipi Letterali e Asserzioni

TypeScript offre strumenti avanzati per restringere i possibili valori delle variabili e per forzare il compilatore a riconoscere tipi più specifici quando necessario.

Tipi Letterali (Literal Types)

Un tipo letterale rappresenta un singolo valore preciso (ad esempio, una specifica stringa o un numero). Di solito vengono combinati con le unioni:

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

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

Asserzioni di Tipo (as)

A volte disponi di informazioni su un tipo che TypeScript non può conoscere a tempo di compilazione. In questi casi, puoi usare un'asserzione di tipo tramite la parola chiave as:

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

L'asserzione dice al compilatore: "Fidati di me, so che questo elemento è un HTMLCanvasElement". Non esegue alcun controllo o cast a runtime; serve solo ad aiutare il type checker.

Asserzioni Const (as const)

Quando dichiariamo un oggetto o un array con const, TypeScript permette comunque di modificarne le proprietà interne. Aggiungendo as const alla fine, l'intera struttura viene congelata e resa di sola lettura, convertendo tutte le proprietà nei loro tipi letterali esatti:

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

Tipi Stringa Template (Template Literal Types)

I tipi stringa template si basano sulle stringhe template di JavaScript, ma vengono usati per definire tipi. Consentono di combinare più tipi letterali in 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}`;

Utility Stringhe nei Template Literal Types

TypeScript offre dei tipi di utilità speciali per manipolare i caratteri all'interno dei Template Literal Types:

• Capitalize<StringType>: Rende maiuscola la prima lettera della stringa.
• Uncapitalize<StringType>: Rende minuscola la prima lettera della stringa.
• Uppercase<StringType>: Converte tutta la stringa in maiuscolo.
• Lowercase<StringType>: Converte tutta la stringa in minuscolo.

type ActionType = 'click' | 'hover';

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

Prova tu

Esercizio 1: Unione di Letterali Direction

Esercizio 2: Asserzione su JSON.parse

Esercizio 3: Template Literal per Eventi

Esercizio 4: Template Literal Type con Capitalize