Unie i Zawężanie typów

W rzeczywistym świecie zmienne oraz odpowiedzi z interfejsów API nie zawsze mają jeden stały typ. TypeScript oferuje Typy Unii (Union Types) do zarządzania tą zmiennością oraz Zawężanie Typów (Type Narrowing) do bezpiecznej pracy z nimi w czasie wykonywania kodu.

Typy Unii (Union Types)

Typ unii pozwala zmiennej na akceptowanie wartości różnych typów. Zapisujemy go za pomocą pionowej kreski (|):

let result: number | string;
result = 42; // Valido
result = 'Errore 404'; // Valido

Jednak gdy pracujemy z typem unii, nie możemy bezpośrednio wywoływać metod należących tylko do jednego z tych typów (na przykład nie możemy wywołać .toUpperCase(), jeśli zmienna może być również typu number). Najpierw musimy "zawęzić" typ.

Zawężanie Typów (Type Narrowing)

Co to jest Type Narrowing? To proces, w którym TypeScript analizuje struktury sterujące przepływem kodu (takie jak if czy switch), aby wywnioskować bardziej szczegółowy typ zmiennej w danym bloku kodu a runtime.

Istnieje kilka sposobów na zawężenie typu:

1. Operator typeof

Idealny do rozróżniania typów prymitywnych:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // Qui TypeScript sa che 'value' è una stringa
    console.log(value.length);
  } else {
    // Qui TypeScript sa che 'value' è un numero
    console.log(value.toFixed(2));
  }
}

2. Operator in

Służy do sprawdzania, czy dany obiekt posiada określoną właściwość:

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

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

Unie Dyskryminowane (Discriminated Unions)

Wzorzec Unii Dyskryminowanych polega na tworzeniu obiektów współdzielących wspólną właściwość ze ściśle określoną wartością literalną (nazywaną dyskryminatorem). TypeScript rozpoznaje ten dyskryminator i automatycznie zawęża typ wewnątrz bloków warunkowych.

interface SuccessResponse {
  status: 'success'; // Discriminatore letterale
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Discriminatore letterale
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Dati ricevuti:', response.data);
  } else {
    console.error('Si è verificato un errore:', response.errorMessage);
  }
}

Spróbuj sam

Ćwiczenie 1: Typy Unii

Ćwiczenie 2: Podstawy Type Narrowing

Ćwiczenie 3: Narrowing z użyciem 'in'

Ćwiczenie 4: Unia Dyskryminowana Shape