Uniri și îngustare

În lumea reală, variabilele și răspunsurile API nu au întotdeauna un singur tip fix. TypeScript oferă Tipuri de unire pentru a gestiona variabilitatea și Reducerea tipului pentru a opera în siguranță pe acestea în timpul execuției.

Tipuri de uniuni

Un tip de unire permite unei variabile să accepte valori de diferite tipuri. Este exprimat folosind simbolul barei verticale (|):

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

Cu toate acestea, atunci când lucrăm cu un tip de uniune, nu putem apela direct metode care aparțin doar unuia dintre tipuri (de exemplu, nu putem apela .toUpperCase() dacă variabila poate fi și o number). Mai întâi trebuie să „îngustăm” tipul.

Tip îngustare

Type Narrowing este procesul în care TypeScript analizează structurile fluxului de control (cum ar fi if sau switch) pentru a deduce un tip mai specific pentru o variabilă în timpul execuției.

Există mai multe moduri de a efectua îngustarea:

1. Operatorul typeof

Ideal pentru a distinge tipurile primitive:

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. Operatorul in

Folosit pentru a verifica dacă o anumită proprietate există pe un obiect:

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

Sindicate discriminate

Modelul Uniuni discriminate constă în crearea de obiecte care au o proprietate comună cu o valoare literală unică (numită discriminator). TypeScript recunoaște acest discriminator și restrânge automat tipul în blocurile condiționate.

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

Încercați-l singur

Exercițiul 1: Tipuri de unire

Exercițiul 2: Îngustarea tipului de bază

Exercițiul 3: Îngustarea cu „în”

Exercițiul 4: Forma de uniune discriminată