Letterlijke typen en beweringen

TypeScript biedt geavanceerde tools om de mogelijke waarden van variabelen te beperken en om de compiler te dwingen specifiekere typen te herkennen wanneer dat nodig is.

Letterlijke typen

Een letterlijk type vertegenwoordigt een exacte, enkele waarde (bijvoorbeeld een specifieke tekenreeks of getal). Ze worden meestal gecombineerd met vakbondstypen:

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

light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLight

Typeverklaringen (as)

Soms hebt u informatie over een type dat TypeScript tijdens het compileren niet kan weten. In deze gevallen kunt u een typeverklaring gebruiken met het trefwoord as:

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

De bewering vertelt de compiler: "Geloof me, ik weet dat dit element een HTMLCanvasElement is". Er worden tijdens runtime geen controles of casts uitgevoerd; het helpt alleen de typecontrole.

Const-beweringen (as const)

Wanneer we een object of een array declareren met const, staat TypeScript nog steeds toe dat de interne eigenschappen ervan worden gewijzigd. Door aan het einde as const toe te voegen, wordt de hele structuur bevroren en alleen-lezen gemaakt, waarbij alle eigenschappen worden omgezet in hun exacte letterlijke typen:

const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-only

Letterlijke typen van sjablonen

Letterlijke sjabloontypen worden bovenop JavaScript-sjabloontekenreeksen gebouwd, maar worden gebruikt in typeposities. Ze maken het mogelijk om meerdere letterlijke typen in één te combineren:

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

// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;

Tekenreekshulpprogramma's in letterlijke sjabloontypen

TypeScript biedt speciale typen hulpprogramma's om tekens binnen letterlijke sjabloontypen te manipuleren:

• Capitalize<StringType>: geeft de eerste letter van de tekenreeks een hoofdletter.
• Uncapitalize<StringType>: Maakt de hoofdletter van de eerste letter van de string ongedaan.
• Uppercase<StringType>: Converteert de gehele tekenreeks naar hoofdletters.
• Lowercase<StringType>: Converteert de gehele tekenreeks naar kleine letters.

type ActionType = 'click' | 'hover';

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

Probeer het zelf

Oefening 1: Richting Letterlijke Unie

Oefening 2: Bewering op JSON.parse

Oefening 3: Letterlijke sjabloon voor evenementen

Oefening 4: Sjabloonlettertype met hoofdletter