Vakbonden en vernauwing

In de echte wereld hebben variabelen en API-reacties niet altijd één vast type. TypeScript biedt Union Types om met variabiliteit om te gaan, en Type Narrowing om er tijdens runtime veilig mee te kunnen werken.

Union-typen

Met een samenvoegingstype kan een variabele waarden van verschillende typen accepteren. Het wordt uitgedrukt met behulp van het verticale balksymbool (|):

let result: number | string;
result = 42; // Valid
result = 'Error 404'; // Valid

Wanneer we echter met een samenvoegingstype werken, kunnen we methoden die slechts tot één van de typen behoren niet rechtstreeks aanroepen (we kunnen bijvoorbeeld .toUpperCase() niet aanroepen als de variabele ook een number kan zijn). We moeten eerst het type "versmallen".

Type vernauwing

Typevernauwing is het proces waarbij TypeScript besturingsstroomstructuren (zoals if of switch) analyseert om een ​​specifieker type voor een variabele tijdens runtime af te leiden.

Er zijn verschillende manieren om vernauwing uit te voeren:

1. De typeof-operator

Ideaal voor het onderscheiden van primitieve typen:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // TypeScript knows 'value' is a string here
    console.log(value.length);
  } else {
    // TypeScript knows 'value' is a number here
    console.log(value.toFixed(2));
  }
}

2. De in-operator

Wordt gebruikt om te controleren of een specifieke eigenschap voor een object bestaat:

interface Fish {
  swim: () => void;
}
interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // Narrowing to Fish
  } else {
    animal.fly(); // Narrowing to Bird
  }
}

Gediscrimineerde vakbonden

Het patroon Gediscrimineerde Unies bestaat uit het maken van objecten die een gemeenschappelijke eigenschap delen met een unieke letterlijke waarde (een zogenaamde discriminator). TypeScript herkent deze discriminator en beperkt automatisch het type binnen voorwaardelijke blokken.

interface SuccessResponse {
  status: 'success'; // Literal discriminator
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Literal discriminator
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Data received:', response.data);
  } else {
    console.error('An error occurred:', response.errorMessage);
  }
}

Probeer het zelf

Oefening 1: Union-typen

Oefening 2: Basistypevernauwing

Oefening 3: Versmallen met 'in'

Oefening 4: Gedifferentieerde Unievorm