Typy mapowane i warunkowe
Proszę budować typy mapowane do przekształcania wszystkich właściwości typu oraz używać typów warunkowych z infer do zaawansowanej logiki na poziomie typów.
Typy mapowane i warunkowe to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Typy mapowane — przekształcanie każdej właściwości
Typy mapowane iterują po kluczach typu i przekształcają je. Stanowią podstawę typów narzędziowych Partial, Readonly i Record.
// Partial implemented as a mapped type:
type MyPartial<T> = {
[K in keyof T]?: T[K];
};
// Readonly:
type MyReadonly<T> = {
readonly [K in keyof T]: T[K];
};Zmiana mapowania kluczy za pomocą as
Należy użyć as w klauzuli mapowania, aby zmienić nazwy kluczy. Można połączyć to z typami literałów szablonowych, aby uzyskać zaawansowane przekształcenia.
type Getters<T> = {
[K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};
type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }Filtrowanie właściwości za pomocą never
Zwrócenie never podczas zmiany mapowania klucza usuwa daną właściwość z wynikowego typu.
// Keep only function-valued properties:
type FunctionProperties<T> = {
[K in keyof T as T[K] extends Function ? K : never]: T[K];
};Typy warunkowe — if/else dla typów
Typy warunkowe używają wzorca T extends U ? TrueType : FalseType. Są obliczane na poziomie typów, a nie w czasie wykonywania.
type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>; // numberRozdzielne typy warunkowe
Gdy T jest unią, typy warunkowe rozdzielają się na poszczególne elementy. string | number extends string ? ... sprawdza każdy z nich osobno: (string extends string ? ...) | (number extends string ? ...).
type ToArray<T> = T extends any ? T[] : never;
type StringOrNumberArray = ToArray<string | number>;
// string[] | number[] (not (string | number)[])Używanie infer do wyodrębniania typów
infer R wprowadza zmienną typu, którą TypeScript wypełnia. Pozwala przechwytywać części struktury typu.
type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;
type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>; // numberTypy literałów szablonowych
Typy literałów szablonowych używają tej samej składni backticków co literały szablonowe, ale na poziomie typów, tworząc typy unii z kombinacji literałów tekstowych.
type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'
type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'Łączenie typów mapowanych i warunkowych
Najbardziej zaawansowane wzorce TypeScript łączą oba rodzaje typów. Wbudowane typy required, partial, readonly i record są typami mapowanymi.
// Make all functions in an object async:
type Asyncify<T> = {
[K in keyof T]: T[K] extends (...args: infer A) => infer R
? (...args: A) => Promise<R>
: T[K];
};DeepPartial — Rekurencyjny typ narzędziowy
Wbudowany typ Partial działa tylko o jeden poziom w głąb. DeepPartial rekurencyjnie zagłębia się w obiekty zagnieżdżone.
type DeepPartial<T> = {
[K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};Praktyczne zastosowanie: typy odpowiedzi API
Typy mapowane i warunkowe umożliwiają tworzenie zaawansowanych typów na podstawie API — na przykład wyodrębnianie wyłącznie właściwości obiektu, które można serializować do formatu JSON.
Unikanie nadmiernego komplikowania
Złożone operacje na typach mogą utrudniać zrozumienie kodu. Zawsze należy zadać sobie pytanie: czy prostszy alias typu lub interfejs nie byłby bardziej czytelny? Typy powinny dokumentować intencję, a nie demonstrować znajomość TypeScript.
Szybkie sprawdzenie
Do czego wyrażenie T extends U ? A : B ewaluje, gdy T jest typem unii?
Podsumowanie: typy mapowane i warunkowe
Typy mapowane iterują po kluczach za pomocą [K in keyof T]. Użyj as, aby ponownie mapować klucze. Zwracaj never, aby filtrować. Typy warunkowe: T extends U ? A : B. infer wyodrębnia zmienne typów. Typy literałów szablonowych tworzą unie stringów. Połącz oba mechanizmy, aby tworzyć zaawansowane transformacje typów, takie jak DeepPartial i Asyncify.
Często zadawane pytania
Czy lekcja „Typy mapowane i warunkowe” jest bezpłatna?
Tak — pełny tekst „Typy mapowane i 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Typy mapowane i warunkowe”?
Proszę budować typy mapowane do przekształcania wszystkich właściwości typu oraz używać typów warunkowych z infer do zaawansowanej logiki na poziomie typów. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 3 z 4.
Ile czasu zajmuje lekcja „Typy mapowane i 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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Generics: T, extends i ograniczenia
- Typy narzędziowe: Partial, Required, Pick, Omit
- Typy mapowane i warunkowe
- Zawężanie: typeof, instanceof, unie dyskryminowane