TypeScript Academy · Lekcja

Rozdzielające typy warunkowe

Kontroluj sposób rozdzielania warunków względem unii

Rozdzielające typy warunkowe to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 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.

Zaskakujące zachowanie

Typy warunkowe mają specjalną zasadę: gdy sprawdzany typ jest nagim parametrem typu, a przekazywana wartość jest unią, typ warunkowy jest rozdzielany na każdy element osobno, a następnie wyniki są łączone w unię.

To podstawa działania Exclude, Extract i wielu innych narzędzi.

type ToArray<T> = T extends unknown ? T[] : never;

type A = ToArray<string | number>;
// string[] | number[]  (NOT (string | number)[])

Co oznacza „nagi”

„Nagi” oznacza, że parametr typu występuje samodzielnie po lewej stronie extends, a nie jest opakowany w inny typ. Rozdzielanie zachodzi tylko w przypadku nagich parametrów.

type Naked<T> = T extends string ? "y" : "n";
// T is naked -> distributes over unions

Rozdzielanie krok po kroku

Dla ToArray<string | number> kompilator oblicza wynik dla każdego elementu:

ToArray<string> = string[]
ToArray<number> = number[]

Następnie łączy je w unię: string[] | number[].

type R = ToArray<boolean>;
// boolean is true | false, so:
// true[] | false[]

Filtrowanie unii

Rozdzielanie ułatwia filtrowanie. Niepożądane elementy należy zamienić na never; never znika z unii, pozostawiając tylko zachowane elementy.

type Strings<T> = T extends string ? T : never;

type A = Strings<string | number | boolean>; // string

never znika z unii

Najważniejszy fakt: X | never upraszcza się do X. Gdy więc rozdzielona gałąź daje wynik never, ten element zostaje w praktyce usunięty z końcowej unii.

type A = string | never;        // string
type B = "a" | never | "b";     // "a" | "b"

Wyłączanie rozdzielania

Czasami rozdzielanie nie jest pożądane, na przykład podczas porównywania całej unii jako jednej całości. Należy opakować obie strony w jednoelementową krotkę: [T] extends [U]. Parametr T nie jest już wtedy nagi, więc rozdzielanie zostaje wyłączone.

type IsNever<T> = [T] extends [never] ? true : false;

type A = IsNever<never>;  // true
type B = IsNever<string>; // false

Dlaczego opakowanie działa

Po umieszczeniu [T] po lewej stronie sprawdzanym typem jest krotka, a nie sam parametr. Specjalna zasada rozdzielania przestaje obowiązywać, więc unia jest sprawdzana jako całość.

type AllStrings<T> = [T] extends [string] ? true : false;

type A = AllStrings<"a" | "b">;     // true
type B = AllStrings<"a" | number>;  // false

Rozdzielane a nierozdzielane

Porównajmy bezpośrednio obie postacie. Wersja z nagim parametrem sprawdza każdy element, a wersja opakowana sprawdza unię jako jeden typ.

type Distributed<T> = T extends string ? true : false;
type Wrapped<T> = [T] extends [string] ? true : false;

type A = Distributed<string | number>; // boolean (true | false)
type B = Wrapped<string | number>;     // false

Działanie Exclude

Wbudowane narzędzie Exclude<T, U> usuwa z T każdy element, który można przypisać do U. To po prostu rozdzielany typ warunkowy, który zamienia pasujące elementy na never.

type MyExclude<T, U> = T extends U ? never : T;

type A = MyExclude<"a" | "b" | "c", "b">; // "a" | "c"

Działanie Extract

Extract<T, U> działa odwrotnie: zachowuje tylko elementy, które można przypisać do U. Rozdzielanie jest takie samo, ale gałęzie mają przeciwne wyniki.

type MyExtract<T, U> = T extends U ? T : never;

type A = MyExtract<"a" | "b" | "c", "a" | "c">; // "a" | "c"

Praktyczne możliwości

Rozdzielanie pozwala przekształcić każdy element unii w jednym wyrażeniu: tworzyć tablice dla każdego elementu, dodawać prefiks do każdego ciągu znaków lub filtrować według struktury. W połączeniu z [T] extends [U] do sprawdzania całej unii pozwala dokładnie kontrolować, kiedy zachodzi rozdzielanie.

Notacja: w rzeczywistym TypeScript typy literałów szablonowych zapisuje się jako ciągi znaków ograniczone grawisami, zawierające miejsca na interpolację dollar-brace. W tych fragmentach pokazujemy ten wzorzec jako Tpl<...>, wymieniając każdą część w kolejności; na przykład szablon z grawisami dopasowujący dosłowny prefiks, a następnie Rest, zapisujemy jako Tpl<'prefix', infer Rest>.

type Prefix<T extends string> = T extends unknown ? Tpl<'id_', T> : never;
// Tpl<'id_', T> is the template literal type joining 'id_' with each T

type A = Prefix<'a' | 'b'>; // 'id_a' | 'id_b'

Szybkie sprawdzenie

Proszę sprawdzić rozumienie rozdzielanych typów warunkowych.

Podsumowanie

Rozdzielane typy warunkowe są podstawą narzędzi operujących na uniach.

Nagi typ T extends U ? rozdziela się na każdy element unii.
Gałęzie zwracające never usuwają elementy.
[T] extends [U] wyłącza rozdzielanie podczas sprawdzania całej unii.
Exclude i Extract to niewielkie rozdzielane typy warunkowe.

Następnie, w Kursie 22: arytmetyka w systemie typów.

Często zadawane pytania

Czy lekcja „Rozdzielające typy warunkowe” jest bezpłatna?

Tak — pełny tekst „Rozdzielające typy warunkowe” 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 „Rozdzielające typy warunkowe”?

Kontroluj sposób rozdzielania warunków względem unii Ć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 4 z 4.

Ile czasu zajmuje lekcja „Rozdzielające typy warunkowe”?

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

← Powrót do TypeScript Academy