Budowanie unii rozróżnianych
Oznaczaj elementy unii wspólną właściwością rozróżniającą
Budowanie unii rozróżnianych to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Czym jest unia dyskryminowana?
Unia dyskryminowana to unia typów obiektowych, które mają wspólną właściwość typu literal, nazywaną dyskryminatorem. Ten wspólny znacznik pozwala TypeScript rozróżniać poszczególne elementy unii.
// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;Właściwość dyskryminatora
Dyskryminator musi być typem literałowym (na przykład "circle"), a nie typem szerokim, takim jak string. Każdy element unii otrzymuje własną, unikatową wartość literałową.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"Każdy element ma własne pola
Oprócz wspólnego dyskryminatora każdy element unii zawiera pola, które mają sens tylko w jego przypadku. Okrąg ma pole radius, a kwadrat — pole side.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;Tworzenie wartości unii
Podczas tworzenia wartości TypeScript sprawdza, czy jej kształt dokładnie odpowiada jednemu elementowi unii na podstawie właściwości kind.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 5 },
{ kind: "square", side: 4 }
];
console.log(shapes.length); // 2Dlaczego nie użyć po prostu pól opcjonalnych?
Luźny typ z polami opcjonalnymi (radius?, side?) pozwala tworzyć nieprawidłowe kombinacje. Unia dyskryminowana sprawia, że nieprawidłowe stany są niemożliwe do wyrażenia.
// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowedNazwa dyskryminatora zależy od Państwa
Znacznik jest zwykle nazywany kind lub type, ale można użyć dowolnej nazwy, o ile każdy element unii korzysta z tej samej nazwy właściwości i ma inną wartość literałową.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; delta: number };
const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"Modelowanie kalkulatora pól figur
Unie dyskryminowane są szczególnie przydatne, gdy każdy wariant wymaga innego sposobu obsługi. W tym przykładzie przygotujemy figury, które później przetworzy funkcja obliczająca pole.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const myShapes: Shape[] = [
{ kind: "circle", radius: 3 },
{ kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);Dodawanie trzeciego wariantu
Unię można łatwo rozszerzać. Dodanie elementu triangle wymaga zmiany tylko jednej linii, a TypeScript uwzględni go wszędzie tam, gdzie używana jest unia.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number }
| { kind: "triangle"; base: number; height: number };
const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);Unikatowe literały zapobiegają nakładaniu się wariantów
Ponieważ każda wartość kind jest unikatowa, nie ma niejednoznaczności. Wartość należy dokładnie do jednego elementu unii, nigdy do dwóch naraz.
type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;
function describe(u: Union) {
return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));Dyskryminatory ze znacznikami logicznymi
Dyskryminator nie musi być napisem. Sprawdzi się również literał typu boolean, co jest przydatne w przypadku wyników oznaczających powodzenie lub niepowodzenie.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);Unie dyskryminowane w praktyce
Mają już Państwo kompletny model figur. W następnej lekcji zawęzimy typ na podstawie dyskryminatora, aby bezpiecznie uzyskać dostęp do pola właściwego dla danego elementu.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");Szybkie sprawdzenie: dyskryminatory
Sprawdź, czy rozumiesz unie dyskryminowane.
Podsumowanie: tworzenie unii dyskryminowanych
Nauczyli się Państwo, że unia dyskryminowana łączy typy obiektowe współdzielące literałowy dyskryminator, taki jak kind. Każdy element unii zawiera własne pola, unikatowe literały zapobiegają nakładaniu się wariantów, a ten wzorzec sprawia, że nieprawidłowe stany są niemożliwe do wyrażenia.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);
Ucz się TypeScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 101
- Lekcje
- 352
Często zadawane pytania
Czy lekcja „Budowanie unii rozróżnianych” jest bezpłatna?
Tak — pełny tekst „Budowanie unii rozróżnianych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Budowanie unii rozróżnianych”?
Oznaczaj elementy unii wspólną właściwością rozróżniającą Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?
Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Budowanie unii rozróżnianych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?
Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Budowanie unii rozróżnianych
- Zawężanie na podstawie właściwości rozróżniającej
- Sprawdzanie kompletności za pomocą never
- Modelowanie automatów stanów