Type bewakers

Typevernauwing is een van de belangrijkste concepten in TypeScript. Vaak zijn standaardbeveiligingen zoals typeof of instanceof echter niet voldoende voor complexe aangepaste objecten. Dit is waar Aangepaste Type Guards in beeld komen.

Standaard type bewakers

Laten we beginnen met een samenvatting van hoe TypeScript typen verkleint met behulp van standaard JavaScript-operatoren:

function processInput(val: string | number) {
  if (typeof val === 'string') {
    // Here 'val' is of type string
    console.log(val.toUpperCase());
  } else {
    // Here 'val' is of type number
    console.log(val.toFixed(2));
  }
}

Aangepaste typebeschermers (operator is)

Om een ​​aangepaste typeguard te definiëren, maken we een functie die een typepredikaat retourneert in de indeling parameterName is Type in plaats van een standaard Booleaans retourtype.

De functie moet een Booleaanse waarde (true of false) retourneren. Als het true retourneert, weet TypeScript dat de doorgegeven parameter van het opgegeven type is.

interface Cat {
  name: string;
  meow(): void;
}

interface Dog {
  name: string;
  bark(): void;
}

// This is a custom type guard
function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function makeNoise(pet: Cat | Dog) {
  if (isCat(pet)) {
    // Here TypeScript knows 'pet' is a Cat
    pet.meow();
  } else {
    // Here TypeScript knows 'pet' is a Dog
    pet.bark();
  }
}

Veiligheid en werpen (as versus Type Guards)

Type casting (bijvoorbeeld val as Cat) dwingt de compiler om de ontwikkelaar te vertrouwen zonder enige echte runtime-verificatie. Als het runtime-object niet aan de verwachtingen voldoet, mislukt de code stil of genereert hij uitzonderingen.

Aangepaste typeguards voeren daarentegen een robuuste en dynamische runtimecontrole uit, waarbij ze de TypeScript-compiler veilig en nauwkeurig informeren over het werkelijke variabeletype:

function processInput(input: unknown) {
  // unsafe casting: could crash if input does not have the split method
  // const str = input as string;
  // console.log(str.split(' '));

  // safe guard
  if (isString(input)) {
    console.log(input.split(' ')); // 100% Safe!
  }
}

Probeer het zelf

Oefening 1: Stringtype-bescherming

Oefening 2: Premium gebruikerstypebescherming

Oefening 3: Validatie van aangepaste foutobjecten

Oefening 4: Beheerderstypewacht