TypeScript Academy · Lekcja

TupleToUnion i UnionToIntersection

Programowo konwertuj krotki na unie i unie na przecięcia.

TupleToUnion i UnionToIntersection to bezpłatna lekcja TypeScript 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

TupleToUnion: koncepcja

TupleToUnion przekształca typ krotki w unię typów jej elementów — jest to odwrotność budowania krotki z pojedynczych typów.

type TupleToUnion<T extends readonly any[]> = T[number];
type A = TupleToUnion<[string, number, boolean]>; // string | number | boolean

Jak działa T[number]

Indeksowanie krotki za pomocą number uzyskuje dostęp do wszystkich indeksów liczbowych jednocześnie, co TypeScript wyraża jako unię typów elementów.

type Tuple = [string, number, boolean];
type Elements = Tuple[number]; // string | number | boolean

TupleToUnion z as const

Połącz tablice as const z tym typem, aby wyprowadzać unie z tablic wartości.

const COLORS = ["red", "green", "blue"] as const;
type Color = typeof COLORS[number]; // "red" | "green" | "blue"

UnionToIntersection: koncepcja

Przekształcenie unii w przecięcie jest trudniejsze i wymaga rozdzielających typów warunkowych z typami funkcji, aby zebrać wszystkie elementy.

type UnionToIntersection<U> =
  (U extends any ? (x: U) => void : never) extends (x: infer I) => void
    ? I
    : never;

Dlaczego działa sztuczka z funkcją

Rozdzielenie unii na elementy opakowuje każdy z nich w typ funkcji. Następnie TypeScript wyprowadza przecięcie wszystkich typów parametrów, aby spełnić ograniczenie strukturalne.

type A = UnionToIntersection<{ a: 1 } | { b: 2 }>;
// { a: 1 } & { b: 2 }

UnionToTuple: trudny problem

Przekształcenie unii w krotkę jest teoretycznie możliwe, ale zależy od kolejności ewaluacji, której TypeScript nie gwarantuje — unikaj tego w kodzie produkcyjnym.

// Not reliable — union member order is unspecified
// Use TupleToUnion (safe) not UnionToTuple (fragile)

Praktyczne zastosowanie TupleToUnion

Wyodrębnij wszystkie prawidłowe klucze z krotki literałów tekstowych, aby utworzyć unię typów do walidacji.

const ALLOWED_METHODS = ["GET", "POST", "PUT", "DELETE"] as const;
type HttpMethod = typeof ALLOWED_METHODS[number];
function request(method: HttpMethod) { /* ... */ }

Praktyczne zastosowanie UnionToIntersection

Scal wiele interfejsów mixin z unii w jeden połączony typ.

type Mixin1 = { log(): void };
type Mixin2 = { save(): Promise<void> };
type Combined = UnionToIntersection<Mixin1 | Mixin2>;
// { log(): void } & { save(): Promise<void> }

Przecięcie typów prostych

Przecięcie niepowiązanych typów prostych daje never, ponieważ żadna wartość nie może być jednocześnie typu string i number.

type X = UnionToIntersection<string | number>; // never

Używanie tych typów w ograniczeniach generycznych

Łącz TupleToUnion i UnionToIntersection w ograniczeniach generycznych, aby tworzyć elastyczne i bezpieczne typowo interfejsy API.

function merge<T extends object[]>(...args: T): UnionToIntersection<T[number]> {
  return Object.assign({}, ...args) as any;
}

Podsumowanie: Tuple ↔ Union ↔ Intersection

TupleToUnion używa indeksowania za pomocą T[number]. UnionToIntersection wykorzystuje sztuczkę z funkcją rozdzielającą oraz infer. Oba typy są niezbędnymi narzędziami zaawansowanej modyfikacji typów.

Szybkie sprawdzenie

Czym jest TupleToUnion<[string, number]>?

Czego się Państwo nauczyli

TupleToUnion używa indeksowania numerycznego do wyodrębniania unii elementów z krotek. UnionToIntersection wykorzystuje sztuczkę z funkcją rozdzielającą. Są to podstawowe wzorce zaawansowanej modyfikacji typów TypeScriptu.

Często zadawane pytania

Czy lekcja „TupleToUnion i UnionToIntersection” jest bezpłatna?

Tak — pełny tekst „TupleToUnion i UnionToIntersection” 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 „TupleToUnion i UnionToIntersection”?

Programowo konwertuj krotki na unie i unie na przecięcia. Ć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 3 z 4.

Ile czasu zajmuje lekcja „TupleToUnion i UnionToIntersection”?

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