Hoe TypeScript-typebevestigingen te gebruiken

Type-asserties in TypeScript zijn een manier om de compiler te vertellen dat u meer weet over het type van een waarde dan hijzelf. Dit kan handig zijn wanneer u werkt met waarden met onzekere of brede typen en u deze wilt beperken voor betere typecontrole en leesbaarheid van de code. In dit artikel onderzoeken we hoe u TypeScript-type-asserties effectief kunt gebruiken.

Wat is typebevestiging?

Type assertion is een mechanisme in TypeScript waarmee u de standaard type-inferentie van de TypeScript-compiler kunt overschrijven. Het verandert het werkelijke runtime-type niet, maar helpt de compiler het type van een variabele te begrijpen voor typecontrole. Type-asserties lijken op typecasting in andere talen zoals C# of Java, maar dan zonder enige runtime-impact.

Syntaxis van type-asserties

Er zijn twee manieren om typebevestigingen in TypeScript te gebruiken:

• Het trefwoord as gebruiken (aanbevolen)
• Gebruik van hoekige haakjes <>

Het gebruik van het trefwoord as

De meest gebruikelijke manier om typebevestigingen te gebruiken is met het trefwoord as:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 17

In dit voorbeeld vertellen we TypeScript dat someValue van het type string is, zodat we de eigenschap length kunnen gebruiken.

Gebruik van hoekige haakjes <>

De alternatieve syntaxis voor typebevestigingen maakt gebruik van punthaken:

let someValue: unknown = "Hello, TypeScript!";
let strLength: number = (someValue).length;

console.log(strLength); // Output: 17

Deze syntaxis bereikt hetzelfde resultaat als de as-syntaxis. Het wordt echter niet aanbevolen in omgevingen waar JSX (zoals React) wordt gebruikt, omdat het in conflict is met de syntaxis voor JSX-elementen.

Veelvoorkomende use cases voor typebevestigingen

Typebevestigingen worden vaak in verschillende scenario's gebruikt:

• Bij het werken met het type unknown
• Bij het verwerken van DOM-elementen
• Bij het beperken van de vakbondstypen
• Bij interactie met bibliotheken van derden die geen typedefinities hebben

Voorbeeld: Typen bevestigen met het type onbekend

Het type unknown is handig als u elk type wilt accepteren, maar nog steeds wat typecontrole moet uitvoeren voordat u het gebruikt. Type-asserties helpen het type te beperken:

function getLength(value: unknown): number {
  if (typeof value === "string") {
    return (value as string).length;
  } else if (Array.isArray(value)) {
    return (value as any[]).length;
  }
  return 0;
}

console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0

In dit voorbeeld gebruiken we typebevestigingen om TypeScript te vertellen dat waarde een tekenreeks of een elke[]-array is.

Voorbeeld: DOM-elementen verwerken

Bij het manipuleren van de DOM moet TypeScript het specifieke type van een element kennen om de juiste eigenschappen en methoden te bieden. Type-asserties zijn hierbij handig:

const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";

Hier gebruiken we typebevestiging om TypeScript te vertellen dat inputElement een HTMLInputElement is, zodat we rechtstreeks toegang krijgen tot de eigenschap value.

Typebevestiging versus typecasting

Het is essentieel om het verschil te begrijpen tussen type assertion en type casting. In TypeScript veranderen type assertions het daadwerkelijke type niet tijdens runtime; ze vertellen de TypeScript compiler alleen hoe het type tijdens compile time behandeld moet worden. Daarentegen kan type casting in andere talen zoals C# of Java het converteren van een waarde van het ene type naar het andere tijdens runtime inhouden, wat van invloed kan zijn op de prestaties en het gedrag.

Waarschuwingen bij het gebruik van typebevestigingen

Hoewel type-assertions krachtig kunnen zijn, kan verkeerd gebruik leiden tot runtime-fouten. Hier zijn enkele tips om ze veilig te gebruiken:

• Vermijd het gebruik van beweringen om incompatibele typen geforceerd te converteren.
• Wees altijd voorzichtig met het gebruik van beweringen en geef de voorkeur aan het beperken van typen met behulp van de typeguards van TypeScript.
• Gebruik beweringen wanneer u zeker bent van het type en wanneer het niet mogelijk is om het op een andere manier te specificeren.

Voorbeeld van onjuiste typebevestiging

Hier is een voorbeeld van een gevaarlijke typebevestiging:

let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!

console.log(numValue); // Output: Hello, TypeScript! (incorrect)

Deze code compileert zonder fouten, maar leidt tot onverwacht gedrag tijdens runtime, omdat de tekenreeks ten onrechte als een getal wordt behandeld.

Conclusie

Type-asserties in TypeScript bieden een manier om de afgeleide typen te overschrijven wanneer u meer weet over het type van een waarde dan TypeScript. Ze zijn handig bij het werken met onzekere typen, interactie met externe bibliotheken of het werken met DOM-elementen. Ze moeten echter voorzichtig worden gebruikt om runtime-fouten te voorkomen en typeveiligheid in uw code te garanderen.

Door type-asserties onder de knie te krijgen, kunt u expressievere en robuustere TypeScript-code schrijven. Oefen ze in verschillende scenario's om vertrouwder te raken met deze krachtige functie.