Garzi de tip

Îngustarea tipului este unul dintre cele mai importante concepte din TypeScript. Adesea, totuși, apărările de tip standard precum typeof sau instanceof nu sunt suficiente pentru obiecte personalizate complexe. Aici intervin Custom Type Guards.

Gărzi de tip standard

Să începem prin a rezuma modul în care TypeScript restrânge tipurile folosind operatori JavaScript standard:

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));
  }
}

Gărzi de tip personalizat (operator is)

Pentru a defini o gardă de tip personalizat, creăm o funcție care returnează un predicat de tip în formatul parameterName is Type în loc de un tip de returnare boolean standard.

Funcția trebuie să returneze un valor boolean (true sau false). Dacă returnează true, TypeScript va ști că parametrul transmis este de tipul specificat.

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();
  }
}

Siguranță și turnare (as vs Tip Guards)

Casting tip (de exemplu, val as Cat) forțează compilatorul să aibă încredere în dezvoltator fără nicio verificare reală a timpului de rulare. Dacă obiectul runtime nu corespunde așteptărilor, codul va eșua în tăcere sau va arunca excepții.

Protecțiile de tip personalizat, pe de altă parte, efectuează o verificare robustă și dinamică a timpului de execuție, informând în siguranță și cu acuratețe compilatorul TypeScript despre tipul real de variabilă:

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!
  }
}

Încercați-l singur

Exercițiul 1: Garda de tip șir

Exercițiul 2: Gardă tip utilizator premium

Exercițiul 3: Validarea obiectelor de eroare personalizate

Exercițiul 4: Garda de tip admin