TypeScript Academy · Lekcja

Warunki na poziomie typów

Rozgałęziaj typy za pomocą wyrażeń typów warunkowych

Warunki na poziomie typów to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 2 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.

Instrukcja if na poziomie typów

Język typów zyskuje rozgałęzianie dzięki typom warunkowym. Składnia T extends U ? X : Y oznacza: jeśli T można przypisać do U, wynikiem jest X, w przeciwnym razie Y.

Jest to odpowiednik wyrażenia if / else na poziomie typów.

type IsString<T> = T extends string ? "yes" : "no";

type A = IsString<string>; // "yes"
type B = IsString<number>; // "no"

extends oznacza możliwość przypisania

To sprawdzenie nie dotyczy równości. T extends U jest prawdziwe, gdy wartość typu T można wykorzystać tam, gdzie oczekiwany jest typ U. Typy literałowe można przypisać do ich typu bazowego.

type T1 = "hello" extends string ? true : false; // true
type T2 = string extends "hello" ? true : false; // false
type T3 = 42 extends number ? true : false;       // true

Wybór typu wyniku

Typy warunkowe pozwalają jednemu generykowi zwracać różne struktury zależnie od danych wejściowych. W tym przykładzie Wrap opakowuje tablice inaczej niż wartości skalarne.

type Wrap<T> = T extends unknown[]
  ? { list: T }
  : { value: T };

type A = Wrap<number>;   // { value: number }
type B = Wrap<string[]>; // { list: string[] }

Filtrowanie do never

Popularna sztuczka polega na zwróceniu never w jednej z gałęzi. never oznacza „brak wartości” i przydaje się później do usuwania elementów z unii.

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

type A = OnlyStrings<string>; // string
type B = OnlyStrings<number>; // never

Wnioskowanie za pomocą infer

Prawdziwa siła ujawnia się przy użyciu słowa kluczowego infer. Wewnątrz typu warunkowego infer wprowadza nową zmienną typu, która przechwytuje część dopasowanego typu.

W tym przykładzie przechwytujemy typ elementów tablicy.

type ElementType<T> = T extends (infer U)[] ? U : never;

type A = ElementType<number[]>; // number
type B = ElementType<string[]>; // string

Wnioskowanie wyników funkcji

Można umieścić infer w dowolnym miejscu wzorca. Aby wyodrębnić typ wyniku funkcji, należy wywnioskować część znajdującą się za strzałką. Tak właśnie działa wbudowane narzędzie ReturnType.

type MyReturn<T> = T extends (...args: any[]) => infer R ? R : never;

type A = MyReturn<() => number>;      // number
type B = MyReturn<(x: string) => boolean>; // boolean

Wnioskowanie wielu części

Pojedynczy typ warunkowy może jednocześnie wprowadzać kilka zmiennych infer. W tym przykładzie wyodrębniamy zarówno pierwszy element krotki, jak i jej pozostałą część.

type FirstRest<T> = T extends [infer H, ...infer R]
  ? { head: H; rest: R }
  : never;

type A = FirstRest<[1, 2, 3]>;
// { head: 1; rest: [2, 3] }

Zagnieżdżone typy warunkowe

Typy warunkowe można zagnieżdżać tak jak połączone instrukcje else if. Gałąź else jednego typu warunkowego może sama być kolejnym typem warunkowym, tworząc drabinę decyzji.

type Describe<T> =
  T extends string ? "text" :
  T extends number ? "num" :
  T extends boolean ? "flag" :
  "other";

type A = Describe<number>; // "num"
type B = Describe<null>;   // "other"

Warunki jako zabezpieczenia

Typu warunkowego należy użyć do sprawdzenia struktury przed wyodrębnieniem z niej informacji. Jeśli dane wejściowe nie pasują, należy użyć never, aby nieprawidłowe użycie było widoczne.

type GetName<T> = T extends { name: infer N } ? N : never;

type A = GetName<{ name: string }>; // string
type B = GetName<{ age: number }>;  // never

Łączenie warunków

Można wymagać wielu warunków, zagnieżdżając je. W tym przykładzie typ musi być jednocześnie obiektem i mieć właściwość id, aby przejść sprawdzenie.

type RequireId<T> =
  T extends object
    ? T extends { id: unknown } ? T : never
    : never;

type A = RequireId<{ id: 1; x: 2 }>; // { id: 1; x: 2 }
type B = RequireId<{ x: 2 }>;        // never

Typy warunkowe są wszędzie

Większość wbudowanych typów narzędziowych opiera się na typach warunkowych: NonNullable, Extract, Exclude, Parameters i ReturnType. Zrozumienie składni extends ? : pozwala korzystać ze wszystkich tych narzędzi.

type MyNonNullable<T> = T extends null | undefined ? never : T;

type A = MyNonNullable<string | null>; // string

Szybkie sprawdzenie

Proszę sprawdzić rozumienie typów warunkowych i infer.

Podsumowanie

Typy warunkowe wyposażają język typów w instrukcję if/else i dopasowywanie wzorców.

T extends U ? X : Y rozgałęzia się na podstawie możliwości przypisania.
infer przechwytuje dopasowane części w nowych zmiennych.
Typy warunkowe można zagnieżdżać, tworząc drabiny decyzji.
Zwracanie never usuwa elementy.

Następnie: przekazywanie typu warunkowego z powrotem do niego samego w celu uzyskania rekurencji.

Często zadawane pytania

Czy lekcja „Warunki na poziomie typów” jest bezpłatna?

Tak — pełny tekst „Warunki na poziomie typów” 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 „Warunki na poziomie typów”?

Rozgałęziaj typy za pomocą wyrażeń typów warunkowych Ć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 2 z 4.

Ile czasu zajmuje lekcja „Warunki na poziomie typów”?

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