Antwoord.

Geschiedenis van de vraag

In JavaScript wordt de operator typeof gebruikt om het type van primitieve waarden tijdens runtime te controleren. TypeScript breidt dit mechanisme uit en maakt het een onderdeel van het type-narrowing-systeem (type narrowing) via type guards. TypeScript gebruikt het resultaat van de operator typeof om het type van een variabele binnen een codeblok te verfijnen, wat het mogelijk maakt om de logica van de functie nauwkeuriger te beschrijven, vooral bij het werken met union-types.

Probleem

In normaal JavaScript kan er na het typechecken met typeof geen typegarantie zijn — de programmeur moet zich herinneren wat er op welk moment in de code gebeurt. Echter, in TypeScript wordt de taak bemoeilijkt door de aanwezigheid van verschillende types en union-types, en zonder correcte type-narrowing is het gemakkelijk om een fout te maken, bijvoorbeeld door naar een niet-bestaande methode te verwijzen. Bovendien heeft de operator specifieke beperkingen: hij "ziet" alleen basis primitieve types; voor arrays en objecten retourneert hij 'object'.

Oplossing

TypeScript staat toe dat de operator typeof wordt gecombineerd met eigen type-analyse voor het verfijnen van het type van een variabele binnen een codeblok. Dit verhoogt automatisch de veiligheid — de compiler weet met welk type de code werkt en suggereert mogelijke eigenschappen en methoden.

Code voorbeeld:

function printId(id: number | string) {
  if (typeof id === 'string') {
    // In deze tak is id: string
    console.log(id.toUpperCase());
  } else {
    // In deze tak is id: number
    console.log(id.toFixed(2));
  }
}

Belangrijkste kenmerken:

• Werkt alleen met primitieve types: 'string', 'number', 'boolean', 'symbol', 'undefined', 'object', 'function', 'bigint'.
• Helpt TypeScript om een union-type te verkleinen tot een specifiek primitief binnen een codeblok.
• Onderscheidt geen arrays en objecten, retourneert altijd 'object' voor hen.

Vragen met een twist.

Kan de operator typeof een array identificeren?

Nee, typeof retourneert voor zowel een array als een object hetzelfde waarde — 'object'. Voor het onderscheiden van arrays is het beter om de methode Array.isArray() te gebruiken.

Code voorbeeld:

const arr = [1, 2, 3];
console.log(typeof arr); // 'object'
console.log(Array.isArray(arr)); // true

Kan ik met typeof null en object onderscheiden?

Nee, typeof null retourneert 'object', dit is een historische eigenschap van JavaScript.

Code voorbeeld:

console.log(typeof null); // 'object'

Kan ik met typeof een gebruikersklasse controleren?

Nee, voor instanties van klassen zal typeof ook 'object' retourneren. Hiervoor worden de operator instanceOf of gebruikers type guard-functies gebruikt.

Code voorbeeld:

class User {}
const u = new User();
console.log(typeof u); // 'object'
console.log(u instanceof User); // true

Typefouten en anti-patterns

• Gebruik van typeof voor controle van complexe gegevensstructuren (bijvoorbeeld arrays, null, objecten).
• Verwaarlozing van het gebruik van de operators instanceof en Array.isArray() voor een nauwkeuriger type-narrowing.
• Typecontrole alleen uitvoeren op runtime-niveau, terwijl statische controle wordt genegeerd.

Voorbeeld uit het leven

Negatieve case

Een programmeur schreef een functie waarin hij wilde controleren of de waarde een array was met behulp van typeof, en op basis van het resultaat verschillende methoden wilde aanroepen.

Voordelen:

• Code is eenvoudig geschreven.
• Vereist geen extra functies.

Nadelen:

• De functie faalt bij het doorgeven van een array: de array wordt gezien als een object, runtime-fouten.

Positieve case

Gebruik van Array.isArray en combinatie met type guard.

Voordelen:

• Veilige statische typevorming.
• Geen fouten met types van objecten versus arrays.

Nadelen:

• Je moet rekening houden met verschillende type guard-instrumenten.