Literale Typen und Assertionen

TypeScript bietet fortschrittliche Werkzeuge, um die möglichen Werte von Variablen einzuschränken und den Compiler zu zwingen, bei Bedarf spezifischere Typen zu erkennen.

Literal-Typen (Literal Types)

Ein Literal-Typ stellt einen einzelnen präzisen Wert dar (z. B. einen bestimmten String oder eine bestimmte Zahl). Sie werden meist mit Unions kombiniert:

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

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

Typ-Assertionen (as)

Manchmal verfügen Sie über Informationen zu einem Typ, die TypeScript zur Kompilierzeit nicht kennen kann. In diesen Fällen können Sie eine Typ-Assertion mit dem Schlüsselwort as verwenden:

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

Die Assertion sagt dem Compiler: „Vertrau mir, ich weiß, dass dieses Element ein HTMLCanvasElement ist“. Es führt zur Laufzeit keine Prüfungen oder Typumwandlungen (Casts) durch; es dient nur dazu, dem Type-Checker zu helfen.

Const-Assertionen (as const)

Wenn wir ein Objekt oder ein Array mit const deklarieren, erlaubt es TypeScript dennoch, dessen interne Eigenschaften zu ändern. Durch das Hinzufügen von as const am Ende wird die gesamte Struktur eingefroren und schreibgeschützt (readonly) gemacht, wodurch alle Eigenschaften in ihre exakten Literal-Typen umgewandelt werden:

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

Template-Literal-Typen (Template Literal Types)

Template-Literal-Typen basieren auf JavaScript-Template-Strings, werden aber zur Definition von Typen verwendet. Sie ermöglichen es, mehrere Literal-Typen zu einem einzigen zu kombinieren:

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

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

String-Hilfsklassen in Template-Literal-Typen

TypeScript bietet spezielle Hilfstypen zur Manipulation von Zeichen innerhalb von Template-Literal-Typen:

• Capitalize<StringType>: Schreibt den ersten Buchstaben der Zeichenfolge groß.
• Uncapitalize<StringType>: Schreibt den ersten Buchstaben der Zeichenfolge klein.
• Uppercase<StringType>: Wandelt die gesamte Zeichenfolge in Großbuchstaben um.
• Lowercase<StringType>: Wandelt die gesamte Zeichenfolge in Kleinbuchstaben um.

type ActionType = 'click' | 'hover';

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

Probier es aus

Esercizio 1: Union von Literal-Typen Direction

Esercizio 2: Assertion auf JSON.parse

Esercizio 3: Template-Literal für Events

Esercizio 4: Template-Literal-Typ mit Capitalize