Когда используются intersection types в TypeScript?

Intersection Types в TypeScript

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

Базовый синтаксис

Intersection типы объявляются с помощью оператора &:

type Admin = { admin: boolean };
type User = { name: string; email: string };

type AdminUser = Admin & User;

const user: AdminUser = {
  admin: true,
  name: "John",
  email: "john@example.com"
};

Основные применения

1. Комбинирование интерфейсов и типов

Используется когда нужно объединить несколько контрактов в один:

interface HasId { id: number; }
interface HasTimestamp { createdAt: Date; }

type Entity = HasId & HasTimestamp;

const entity: Entity = {
  id: 1,
  createdAt: new Date()
};

2. Расширение типов компонентов

В React часто используют для расширения props компонентов:

interface BaseButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

interface ExtendedButtonProps extends BaseButtonProps {
  variant: "primary" | "secondary";
  size: "sm" | "md" | "lg";
}

type ButtonProps = BaseButtonProps & { disabled?: boolean };

3. Mixins и композиция

Intersection типы идеальны для реализации pattern Mixin:

function withLogging<T>(base: T): T & { log: () => void } {
  return {
    ...base,
    log() {
      console.log("Logging enabled");
    }
  };
}

const user = { name: "Alice" };
const loggedUser = withLogging(user);
loggedUser.log(); // ✓ работает

4. Комбинирование конфигураций

type DefaultConfig = { timeout: number; retries: number };
type UserConfig = { endpoint: string; method: "GET" | "POST" };

type FullConfig = DefaultConfig & UserConfig;

const config: FullConfig = {
  timeout: 5000,
  retries: 3,
  endpoint: "/api",
  method: "POST"
};

Intersection vs Union

Важно не путать с union типами (|):

// Union — ИЛИ (одно из)
type A = { a: string } | { b: number };

// Intersection — И (оба одновременно)
type B = { a: string } & { b: number };

const intersection: B = {
  a: "hello",
  b: 42
}; // ✓ требует оба свойства

Конфликты свойств

Если типы имеют свойства с одинаковыми именами но разными типами, TypeScript создаст never:

type A = { value: string };
type B = { value: number };

type C = A & B; // value: never

const obj: C = { value: "hello" }; // ✗ ошибка

Практические примеры

Для API ответов:

type ApiResponse<T> = { status: number; data: T };
type User = { id: number; name: string };

type UserResponse = ApiResponse<User> & { timestamp: Date };

Для HOC в React:

function withRouter<P>(Component: React.ComponentType<P>): React.ComponentType<P & { router: Router }> {
  return (props: P & { router: Router }) => <Component {...props} />;
}

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

• Объединение независимых типов
• Расширение компонентных props
• Реализация mixins
• Комбинирование конфигураций
• Создание сложных типов из простых

Intersection типы делают TypeScript код более гибким и переиспользуемым, обеспечивая строгую типизацию при комбинировании функционала.