`union (|)` în TypeScript

Interfețe, alias-uri, union și enum TypeScript 1.4

Un tip care acceptă valori din mai multe tipuri: A | B înseamnă fie A, fie B.

Sintaxă

let id: number | string;
type Stare = "activ" | "inactiv" | "suspendat";
function f(x: string | string[]) { ... }

Ce face `union (|)`

Un union se scrie cu bara verticală și înseamnă „una dintre variante”: number | string acceptă și numere, și texte. Este felul TypeScript de a descrie valori care pot avea mai multe forme: un id numeric sau text, un parametru care primește un element sau o listă, o stare din câteva valori fixe.

Pe o valoare union poți folosi direct doar ce au în comun toate variantele. Ca să folosești ce este specific unei variante, verifici întâi care este (typeof, Array.isArray, in, o proprietate comună), iar TypeScript restrânge tipul în fiecare ramură.

Union-urile de obiecte cu o proprietate comună de tip literal (tip: "cerc" | "patrat") se numesc discriminated unions și sunt cel mai sigur mod de a modela date cu variante.

Exemple

Exemplul 1: Parametru care acceptă un element sau o listă

function formateaza(nume: string | string[]): string {
    if (Array.isArray(nume)) {
        return nume.join(", ");      // aici nume este string[]
    }
    return nume.toUpperCase();       // aici nume este string
}

console.log(formateaza("Ana"));
console.log(formateaza(["Ana", "Mihai", "Ioana"]));

Rezultat

ANA
Ana, Mihai, Ioana

Exemplul 2: Doar ce au în comun toate variantele

toFixed există doar pe number, deci nu poate fi apelată pe number | string fără verificare.

function afiseaza(pret: number | string) {
    console.log(pret.toFixed(2));
}
afiseaza(12);

Eroarea afișată de tsc

exemplu.mts(2,22): error TS2339: Property 'toFixed' does not exist on type 'string | number'.
  Property 'toFixed' does not exist on type 'string'.

Exemplul 3: Union de valori literale

type Stare = "nouă" | "trimisă" | "livrată";

const comenzi: { id: number; stare: Stare }[] = [
    { id: 101, stare: "livrată" },
    { id: 102, stare: "nouă" },
    { id: 103, stare: "trimisă" },
];

for (const c of comenzi) {
    const gata = c.stare === "livrată" ? "✓" : "…";
    console.log(`#${c.id} ${c.stare.padEnd(8)} ${gata}`);
}