$ sudo teach IT
МОДУЛЬ 7 · УРОК 2

Пересечение типов (Intersection Types)

Комбинирование типов для создания мощных абстракций в TypeScript

Добро пожаловать, дорогие студенты!

Сегодня мы погрузимся в одну из самых мощных и гибких возможностей TypeScript — пересечение типов (Intersection Types). Если в предыдущем уроке мы изучали объединение типов (Union Types), которое позволяет значению быть одним из нескольких типов, то пересечение типов делает прямо противоположное — оно требует, чтобы значение соответствовало всем перечисленным типам одновременно.

Представьте, что у вас есть два набора требований. Union-тип говорит: «Выполните любое из этих требований». А intersection-тип говорит: «Выполните ВСЕ эти требования». Это ключевое различие, которое мы подробно разберём сегодня.

Содержание урока

  1. Что такое пересечение типов и зачем оно нужно
  2. Синтаксис пересечения типов
  3. Пересечение объектных типов
  4. Пересечение vs Объединение: сравнение
  5. Расширение интерфейсов через extends
  6. Смешивание типов (Mixing Types)
  7. Практические примеры применения
  8. Паттерн миксинов (Mixins)
  9. Комбинирование функциональных типов
  10. Реальные примеры из жизни
  11. Типичные ошибки и как их избегать

1. Что такое пересечение типов?

Пересечение типов (Intersection Type) — это способ объединить два или более типа в один, который содержит все свойства и методы исходных типов. Результирующий тип требует, чтобы значение соответствовало каждому из исходных типов.

Формально, пересечение типов A и B записывается как A & B. Значение этого типа должно одновременно удовлетворять требованиям типа A И типа B.

Аналогия из жизни

Представьте, что вы устраиваетесь на работу. Union-тип требует, чтобы вы были программистом или дизайнером. А intersection-тип требует, чтобы вы были и программистом, и дизайнером одновременно. Второй вариант, конечно, более требовательный, но и результат — более универсальный специалист.

Простейший пример

type A = { x: number }
type B = { y: number }

type Point = A & B

const point: Point = { x: 10, y: 20 } // ✓ Корректно
// const p: Point = { x: 10 } // ✗ Ошибка: отсутствует y

Как видите, тип Point требует наличие обеих координат — и x, и y.

💡 Совет учителя:

Подумайте о пересечении типов как о конструкторе LEGO. Каждый тип — это набор деталей. Когда вы пересекаете типы, вы берёте все детали из каждого набора и собираете из них одну большую конструкцию. Ваш финальный объект должен иметь все детали из всех наборов.

2. Синтаксис пересечения типов

Синтаксис пересечения типов в TypeScript предельно прост — используется оператор амперсанда & между типами:

// Базовый синтаксис
type Result = TypeA & TypeB

// С несколькими типами
type Complex = TypeA & TypeB & TypeC

// С литеральными типами
type Literal = "hello" & string

Синтаксис с типами-объявлениями

Вы можете создавать пересечения любых типов — интерфейсов, типов-псевдонимов, примитивов, литеральных типов и даже функциональных типов:

// Пересечение интерфейсов
interface HasName {
  name: string;
}

interface HasAge {
  age: number;
}

type Person = HasName & HasAge

// Теперь Person = { name: string; age: number }

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

Интересный случай — пересечение несовместимых примитивных типов. Что будет, если пересечь string и number?

type Impossible = string & number

// Impossible = never
// Значение не может быть одновременно строкой и числом!

type AlsoImpossible = string & boolean
// AlsoImpossible = never
⚠️ Важное замечание:

Когда вы пересекаете несовместимые типы (например, string & number), результатом будет тип never — «пустой» тип, значения которого не существует. Это логично: невозможно создать значение, которое является одновременно строкой и числом.

3. Пересечение объектных типов

Наиболее частый и полезный случай использования пересечения — комбинирование объектных типов. Давайте рассмотрим подробно, как это работает.

Базовый пример с объектами

interface ContactInfo {
  email: string;
  phone: string;
}

interface AddressInfo {
  street: string;
  city: string;
  zipCode: string;
}

// Пересечение: FullProfile требует ВСЕ свойства
type FullProfile = ContactInfo & AddressInfo

const user: FullProfile = {
  email: "user@example.com",
  phone: "+7 (999) 123-45-67",
  street: "ул. Примерная, д. 42",
  city: "Москва",
  zipCode: "101000"
};

Что происходит «под капотом»

Когда TypeScript вычисляет тип FullProfile, он «склеивает» свойства из обоих интерфейсов. Фактически FullProfile эквивалентен:

// Эквивалент FullProfile
type FullProfileEquivalent = {
  email: string;
  phone: string;
  street: string;
  city: string;
  zipCode: string;
}

Пересечение с общими свойствами

А что будет, если у двух типов есть общее свойство с одинаковым именем, но разными типами?

interface A {
  value: string;
}

interface B {
  value: number;
}

type Conflict = A & B

// Conflict = { value: never }
// Значение не может быть одновременно строкой и числом!
❌ Ошибка компиляции:

Если типы общего свойства совместимы (например, оба string), результатом будет этот тип. Но если типы несовместимы, результат — never, и создать значение такого типа будет невозможно.

📌 Важно запомнить:

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

4. Пересечение vs Объединение: подробное сравнение

Многие студенты путают пересечение (&) и объединение (|) типов. Давайте разберём фундаментальное различие.

Таблица сравнения

Характеристика Пересечение (&) Объединение (|)
Оператор & |
Логика И (AND) ИЛИ (OR)
Требование Все типы одновременно Любой из типов
Свойства Все свойства из всех типов Только общие свойства
Примитивы Обычно never Множественный выбор

Пример: объединение объектов

interface Cat {
  meow: void;
  purr: void;
}

interface Dog {
  bark: void;
  fetch: void;
}

// Объединение: CatOrDog может быть ИЛИ кошкой, ИЛИ собакой
type CatOrDog = Cat | Dog

// Пересечение: CatAndDog должно уметь И мурчать, И лаять
type CatAndDog = Cat & Dog

const catOrDog: CatOrDog = { meow: () => {} }; // ✓ Достаточно одного метода

const catAndDog: CatAndDog = {
  meow: () => {},
  purr: () => {},
  bark: () => {},
  fetch: () => {}
}; // ✓ Все методы обязательны
⚠️ Типичная ошибка студентов:

Студенты часто думают, что пересечение объектов «перезаписывает» свойства одного типа свойствами другого. Это неверно! Пересечение объединяет все свойства, и каждое свойство сохраняет свой исходный тип.

5. Расширение интерфейсов через extends

TypeScript предоставляет ещё один механизм для комбинирования типов — наследование интерфейсов с помощью ключевого слова extends. Давайте сравним оба подхода.

// Способ 1: Пересечение типов
type Employee1 = Person & WorkInfo

// Способ 2: Расширение интерфейса
interface Employee2 extends Person, WorkInfo {
  // можно добавить дополнительные свойства
}

Когда что использовать?

Оба подхода создают одинаковый результат по типам, но имеют различия в использовании:

  • extends — работает только с интерфейсами. Более читаем для описания иерархии типов.
  • & (пересечение) — работает с любыми типами (type, interface, примитивы, литералы). Более гибок.
  • extends — позволяет добавлять новые свойства в дочернем интерфейсе.
  • & (пересечение) — создаёт анонимный тип без возможности расширения.
// extends позволяет добавить новые свойства
interface Person {
  name: string;
}

interface WorkInfo {
  position: string;
}

interface Employee extends Person, WorkInfo {
  salary: number; // новое свойство!
}

// С пересечением нельзя добавить свойства напрямую
type EmployeeType = Person & WorkInfo & { salary: number }
📌 Рекомендация учителя:

Если вы работаете только с интерфейсами и хотите выразить отношения «наследования», используйте extends. Если вам нужно комбинировать разные типы (type-псевдонимы, примитивы, литералы) или вы хотите создать более абстрактную комбинацию — используйте пересечение &.

6. Смешивание типов (Mixing Types)

Пересечение типов особенно полезно для создания составных типов из нескольких более простых. Этот подход часто называют «смешиванием типов» или «микшированием» (mixing).

Пример: создание «супертипа»

interface Loggable {
  log(message: string): void;
}

interface Serializable {
  serialize(): string;
}

interface Validatable {
  validate(): boolean;
}

// Создаём тип, который требует все три возможности
type SuperEntity = Loggable & Serializable & Validatable

// Любой класс, реализующий SuperEntity, должен иметь все три метода
class UserEntity implements SuperEntity {
  log(message: string) { }
  serialize() { return "{}"; }
  validate() { return true; }
}

Смешивание примитивных и объектных типов

// Создаём тип с дополнительными свойствами поверх примитива
type BrandedString = string & { __brand: "email" }

// Теперь мы можем создавать «брендированные» строки
function createEmail(email: string): BrandedString {
  return email as BrandedString;
}

// Теперь можно различать типы строк на уровне типов!
type PhoneNumber = string & { __brand: "phone" }

// email и phone — оба строки, но разные бренды
const email = createEmail("test@example.com");
📌 Паттерн «Branded Types»:

Смешивание примитивных и объектных типов позволяет создавать «брендированные» типы. Это полезно для различения строковых идентификаторов, email-адресов, паролей и т.д. На уровне рантайма это обычные строки, но на уровне типов TypeScript не позволит случайно подменить один тип другим.

7. Практические примеры применения

Теперь давайте рассмотрим реальные случаи, где пересечение типов применяется на практике. Эти примеры показывают, почему пересечение — это не просто теоретическая конструкция, а мощный инструмент.

Пример 1: Декорирование объектов

// Базовая сущность
interface BaseEntity {
  id: number;
  createdAt: Date;
}

// Добавляем аудит
interface Auditable {
  updatedAt: Date;
  updatedBy: string;
}

// Добавляем SoftDelete
interface SoftDeletable {
  deletedAt: Date | null;
  isDeleted: boolean;
}

// Составной тип: всё вместе
type FullEntity = BaseEntity & Auditable & SoftDeletable

const user: FullEntity = {
  id: 1,
  createdAt: new Date(),
  updatedAt: new Date(),
  updatedBy: "admin",
  deletedAt: null,
  isDeleted: false
};

Пример 2: Улучшение React-компонентов

// Типичный случай в React-приложениях
interface ComponentProps {
  children: React.ReactNode;
}

interface StyledProps {
  className?: string;
  style?: React.CSSProperties;
}

interface EventHandlerProps {
  onClick?: (event: React.MouseEvent) => void;
}

// Комбинируем все пропсы
type ButtonProps = ComponentProps & StyledProps & EventHandlerProps & {
  variant: "primary" | "secondary" | "danger";
};

Пример 3: API-ответы с дополнительными данными

interface ApiResponse {
  status: number;
  message: string;
}

interface HasData<T> {
  data: T;
}

interface HasPagination {
  page: number;
  totalPages: number;
  totalCount: number;
}

// Список с пагинацией
type PaginatedResponse<T> = ApiResponse & HasData<T[]> & HasPagination

// Использование
const users: PaginatedResponse<User> = await fetchUsers();
// users.status, users.message, users.data, users.page, users.totalPages, users.totalCount
📌 Преимущества этого подхода:

Вместо того чтобы создавать один громоздкий интерфейс, вы разбиваете его на логические части. Это улучшает читаемость, обеспечивает переиспользование и упрощает поддержку кода. Каждая «маленькая» интерфейсная часть отвечает за одну конкретную ответственность.

8. Паттерн миксинов (Mixins)

Миксины (Mixins) — это мощный паттерн, который позволяет комбинировать поведение из разных классов. TypeScript поддерживает миксины через пересечение типов и вспомогательные функции.

Простейший миксин

// Конструктор для миксина
type Constructor<T = {}> = new (...args: any[]) => T;

// Миксин для логирования
function Timestamped<T extends Constructor>(Base: T) {
  return class extends Base {
    createdAt = new Date();
    updatedAt = new Date();
  };
}

// Миксин для валидации
function Validatable<T extends Constructor>(Base: T) {
  return class extends Base {
    validate() {
      return true;
    }
  };
}

// Использование миксинов
class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}

// Комбинируем миксины
const EnhancedUser = Validatable(Timestamped(User));

const user = new EnhancedUser("Иван");
user.name; // ✓ из User
user.createdAt; // ✓ из Timestamped
user.validate(); // ✓ из Validatable

Паттерн «маска» для миксинов

// Интерфейс для типизации результата миксина
interface Constructor<T = {}> {
  new (...args: any[]): T;
}

// Маска для определения типа миксина
type GConstructor<T = {}> = Constructor<T> & { prototype: {}; };
📌 Почему миксины полезны:

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

9. Комбинирование функциональных типов

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

Пересечение функциональных типов

type Fn1 = (x: number) => number;
type Fn2 = (x: string) => string;

// Результат — функция, которая должна обрабатывать оба типа
type CombinedFn = Fn1 & Fn2

// Это приводит к перегрузке функции
const combined: CombinedFn = (x: any): any => x;

combined(42); // ✓ Возвращает number
combined("hi"); // ✓ Возвращает string

Смешивание функции с объектными свойствами

// Функция с дополнительными свойствами
interface QueryFn {
  (query: string): Promise<any>;
}

interface Cacheable {
  cache: Map<string, any>;
}

type CachedQueryFn = QueryFn & Cacheable

// Создаём функцию с кешем
const cachedQuery = ((query: string) => {
  // проверка кеша...
}) as CachedQueryFn;

cachedQuery.cache = new Map();
await cachedQuery("SELECT *");
⚠️ Осторожно:

При пересечении функциональных типов результат — это функция с перегрузками. Это может быть неочевидно и привести к сложностям при типизации. В таких случаях лучше использовать явные перегрузки функций.

10. Реальные примеры из жизни

Давайте рассмотрим более сложные реальные примеры, которые встречаются в профессиональной разработке.

Пример 1: Модель данных с ролями

interface BaseUser {
  id: number;
  name: string;
  email: string;
}

interface AdminPermissions {
  role: "admin";
  permissions: string[];
  canDelete: boolean;
}

interface ModeratorPermissions {
  role: "moderator";
  moderationLevel: number;
}

// Полный пользователь с правами администратора
type AdminUser = BaseUser & AdminPermissions

// Полный пользователь-модератор
type ModUser = BaseUser & ModeratorPermissions

// Любая роль
type AnyUser = AdminUser | ModUser

Пример 2: Конфигурация приложения

interface DatabaseConfig {
  host: string;
  port: number;
  database: string;
}

interface AuthConfig {
  secret: string;
  expiresIn: number;
}

interface CacheConfig {
  ttl: number;
  maxSize: number;
}

// Полная конфигурация = пересечение всех подконфигураций
type AppConfig = DatabaseConfig & AuthConfig & CacheConfig

const config: AppConfig = {
  host: "localhost",
  port: 5432,
  database: "myapp",
  secret: "my-secret-key",
  expiresIn: 3600,
  ttl: 600,
  maxSize: 1000
};

Пример 3: Middleware-цепочка

interface Request {
  path: string;
  method: string;
}

interface WithAuth {
  user: User;
  token: string;
}

interface WithBody {
  body: any;
}

// Каждый middleware добавляет свойства к запросу
type AuthenticatedRequest = Request & WithAuth
type FullRequest = AuthenticatedRequest & WithBody

// Middleware получает тот тип, который ему нужен
function authMiddleware(req: Request): AuthenticatedRequest {
  // ... добавляем user и token
}

function bodyParser(req: AuthenticatedRequest): FullRequest {
  // ... добавляем body
}
📌 Паттерн «наращивания» типов:

Это один из самых элегантных способов использования пересечений. Каждый middleware «наращивает» тип запроса, добавляя новые свойства. TypeScript автоматически вычисляет финальный тип на основе цепочки пересечений.

11. Типичные ошибки и как их избегать

Рассмотрим наиболее распространённые ошибки, которые допускают разработчики при работе с пересечением типов.

Ошибка 1: Неправильное понимание логики

// ✗ НЕПРАВИЛЬНО: думаем, что достаточно одного типа
type Shape = Circle & Square
const s: Shape = { radius: 5 }; // ✗ Ошибка: нет side!

// ✓ ПРАВИЛЬНО: нужно всё
const s2: Shape = { radius: 5, side: 10 };

Ошибка 2: Конфликтующие типы свойств

interface A { value: string }
interface B { value: number }

// ✗ Проблема: value будет типа never
type Conflict = A & B

// ✓ Решение: переименовать свойства
interface A2 { stringValue: string }
interface B2 { numberValue: number }
type Fixed = A2 & B2 // ✓ Теперь всё работает

Ошибка 3: Слишком глубокая вложенность

// ✗ Слишком сложно для понимания
type MegaType =
  A & B & C & D & E & F & G;

// ✓ Разбейте на промежуточные типы
type BasicTypes = A & B & C;
type ExtendedTypes = D & E & F;
type MegaType = BasicTypes & ExtendedTypes & G;

Ошибка 4: Забыть про optional свойства

interface Required {
  name: string;
}

interface Optional {
  age?: number; // опциональное
}

type Person = Required & Optional

// age остаётся опциональным!
const p1: Person = { name: "Иван" }; // ✓ OK
const p2: Person = { name: "Мария", age: 25 }; // ✓ OK
⚠️ Совет: проверяйте свойства при пересечении

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

Практические задания для самостоятельной работы

Задание 1: Система уведомлений

Создайте типы для системы уведомлений: EmailNotification, SMSNotification, PushNotification. Затем создайте тип MultiChannelNotification — пересечение всех трёх.

Задание 2: Форма регистрации

Определите интерфейсы для полей формы: HasName, HasEmail, HasPassword. Создайте тип RegistrationForm — пересечение всех трёх.

Задание 3: Миксин для логирования

Создайте миксин Loggable, который добавляет методы log(), warn(), error() к классу. Примените его к классу UserService.

Итоги урока

  • Пересечение типов создаёт тип, требующий соответствия всем исходным типам одновременно
  • Оператор & используется для создания пересечений
  • Результат содержит все свойства из всех исходных типов
  • Пересечение несовместимых типов даёт never
  • Пересечение ≠ Объединение: & требует всё, | требует одно из
  • Пересечение более гибко, чем extends (работает с любыми типами)
  • Паттерн миксинов использует пересечение для комбинирования поведения
  • Пересечение полезно для «наращивания» типов (middleware, декорирование)

Отличная работа! В следующем уроке мы изучим более продвинутые техники работы с типами. Практикуйтесь с пересечением типов — это один из самых полезных инструментов в TypeScript!

Дополнительные ресурсы

  • Официальная документация TypeScript: TypeScript Handbook — Intersection Types
  • Статья: «Understanding TypeScript Intersection Types»
  • Паттерн миксинов: TypeScript Mixins - Documentation
  • Branded Types: Creating Nominal Types in TypeScript

Тест по Intersection Types

10 вопросов

Пересечение типов для сущностей

Premium

Branded types для идентификаторов

Premium
Перейти к тестуНа следующий урок