TypeScript Academy · Урок

Практические шаблоны с объединениями и пересечениями

Применяйте объединения и пересечения в реальных задачах

Урок 4 из 413 шагов

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

Добро пожаловать

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

Шаблон необязательной полезной нагрузки

Моделируйте функции или события, которые могут содержать данные или не содержать их, с помощью объединения.
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

Конструктор или миксин с пересечением

Используйте пересечения для объединения наборов возможностей в единый тип.
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

Объединение для нормализации входных данных

Принимайте в функции гибкие типы входных данных и нормализуйте их до канонического типа.
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

Брендированные типы с пересечением

Создавайте различные типы на основе одного примитивного типа, сочетая его с уникальным маркером бренда через пересечение.
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

Шаблон WithOptional

Используйте пересечение с частичным типом, чтобы создать базовый тип, в котором одни поля обязательны, а другие необязательны.
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

Свойства полиморфного компонента

В React объединения типов позволяют менять свойства компонента в зависимости от дискриминатора.
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

Расширение сторонних типов

Пересекайте сторонние типы со своими дополнениями.
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

Сочетание объединения и пересечения

Объединения и пересечения можно сочетать. Скобки управляют приоритетом.
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

Защитники типов для вариантов объединения

Напишите повторно используемую функцию-защитник типа, чтобы сужать объединение без повторения проверок.
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

Распределительное поведение пересечений

Распределительный закон: A & (B | C) = (A & B) | (A & C). TypeScript применяет его автоматически.
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

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

Какой шаблон создаёт отдельный тип на основе `number`, чтобы предотвратить случайное смешивание идентификаторов?

Повторение

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

Изучай TypeScript с ИИ-репетитором — бесплатно

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

Курсы
101
Уроки
352

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

Урок «Практические шаблоны с объединениями и пересечениями» бесплатный?

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

Чему я научусь в уроке «Практические шаблоны с объединениями и пересечениями»?

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

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

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

Сколько времени занимает урок «Практические шаблоны с объединениями и пересечениями»?

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

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

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

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

  1. Объединения типов: A или B
  2. Пересечения типов: A и B
  3. Размеченные объединения для безопасного сопоставления с шаблонами
  4. Практические шаблоны с объединениями и пересечениями
← Назад к TypeScript Academy