TypeScript Academy · Урок

TupleToUnion и UnionToIntersection

Программно преобразуйте кортежи в объединения и обратно

«TupleToUnion и UnionToIntersection» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

TupleToUnion: концепция

TupleToUnion преобразует тип кортежа в объединение типов его элементов — это обратная операция по отношению к созданию кортежа из отдельных типов.

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

Как работает T[number]

Индексация кортежа с помощью number сразу обращается ко всем числовым индексам, что TypeScript выражает как объединение типов элементов.

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

TupleToUnion с as const

Объединяйте его с массивами as const, чтобы выводить объединения из массивов значений.

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

UnionToIntersection: концепция

Преобразовать объединение в пересечение сложнее: для этого нужны распределяемые условные типы с типами функций, чтобы собрать все элементы.

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

Почему работает приём с функцией

Распределение по элементам объединения оборачивает каждый из них в тип функции. Затем TypeScript выводит пересечение всех типов параметров, чтобы удовлетворить структурному ограничению.

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

UnionToTuple: сложная задача

Преобразование объединения в кортеж теоретически возможно, но зависит от порядка вычисления, который TypeScript не гарантирует, поэтому в рабочем коде этого следует избегать.

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

Практическое применение TupleToUnion

Извлеките все допустимые ключи из кортежа строковых литералов, чтобы создать объединённый тип для проверки.

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

Практическое применение UnionToIntersection

Объедините несколько интерфейсов примесей из объединения в один составной тип.

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

Пересечение примитивов

Пересечение несвязанных примитивных типов даёт never, поскольку ни одно значение не может одновременно быть string и number.

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

Использование в обобщённых ограничениях

Объединяйте TupleToUnion и UnionToIntersection внутри обобщённых ограничений, чтобы создавать гибкие API с безопасными типами.

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

Итоги: кортеж ↔ объединение ↔ пересечение

TupleToUnion использует индексацию T[number]. UnionToIntersection использует приём с распределяемой функцией и infer. Оба типа — важные инструменты для сложных преобразований типов.

Быстрая проверка

Что представляет собой TupleToUnion<[string, number]>?

Что Вы узнали

TupleToUnion использует числовую индексацию для извлечения объединений элементов из кортежей. UnionToIntersection использует приём с распределяемой функцией. Это базовые шаблоны для сложных преобразований типов TypeScript.

Часто задаваемые вопросы

Урок «TupleToUnion и UnionToIntersection» бесплатный?

Да — полный текст урока «TupleToUnion и UnionToIntersection» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «TupleToUnion и UnionToIntersection»?

Программно преобразуйте кортежи в объединения и обратно Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «TupleToUnion и UnionToIntersection»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к TypeScript Academy