Що таке intersection тип?

TypeScriptJunior~1 хв читання

Що таке Intersection Type

Intersection тип (по-українськи "тип-перетин") об'єднує кілька типів в один, створюючи тип, що містить усі властивості і вимоги кожного з них.

Простіше кажучи: A & B означає: об'єкт має відповідати і типу A, і типу B одночасно.

Приклад 1. Перетин двох об'єктів

javascript

type User = { name: string };
type Contact = { email: string };

type UserWithContact = User & Contact;

const person: UserWithContact = {
  name: "Tim",
  email: "tim@example.com",
};

UserWithContact тепер об'єднує поля обох типів:

name із User
email із Contact

Приклад 2. Перетин інтерфейсів

javascript

interface A { a: number }
interface B { b: string }

type AB = A & B;

const value: AB = { a: 10, b: "hello" };

Можна використовувати як з type, так і з interface - результат однаковий.

Приклад 3. Використання у функціях

Іноді потрібно типізувати параметри, які задовольняють кільком обмеженням одразу:

javascript

type CanLog = { log: () => void };
type CanError = { error: (msg: string) => void };

function handleLogger(service: CanLog & CanError) {
  service.log();
  service.error("Щось пішло не так");
}

const logger = {
  log: () => console.log("OK"),
  error: (msg: string) => console.error(msg),
};

handleLogger(logger); // об'єкт реалізує обидва інтерфейси

Приклад 4. Перетин з примітивами

TypeScript дозволяє перетинати навіть примітивні типи, але результат може бути ніколи не досяжним (never):

javascript

type A = string;
type B = number;

type C = A & B; // неможливо - string і number не перетинаються
// type C = never

Перетин несумісних типів дає never.

Приклад 5. Перетин union-типів

Перетин застосовний і до об'єднань (|):

javascript

type A = { a: number } | { b: number };
type B = { a: number } | { c: number };

type Intersection = A & B;
// Результат: { a: number } | ({ a: number } & { c: number }) | ({ b: number } & { a: number }) | ...

На практиці таке рідко пишуть вручну, але TypeScript вміє точно обчислювати підсумковий тип.

Приклад 6. Успадкування через перетин

Іноді замість extends простіше використати &:

javascript

type Base = { id: number };
type Timestamps = { createdAt: Date; updatedAt: Date };

type Entity = Base & Timestamps;

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

Так можна створювати складені типи з модулів - як "міксини" в ООП.

Intersection vs Union

Оператор	Назва	Опис
`A \| B`	Union (об'єднання)
`A & B`	Intersection (перетин)	Значення має бути A і B одночасно

Приклад для порівняння:

javascript

type Dog = { bark: () => void };
type Cat = { meow: () => void };

type PetUnion = Dog | Cat; // або собака, або кіт
type PetBoth  = Dog & Cat; // і собака, і кіт одночасно

Приклад 7. Перетин з generic-типами

javascript

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

const result = merge({ name: "Tim" }, { age: 25 });
// тип result: { name: string; age: number }

Дуже поширена реальна техніка: функція merge повертає перетин двох об'єктів.

Важливо пам'ятати

Перетин об'єднує властивості, а не значення.
Якщо в перетині та сама властивість має різні типи - TS видасть помилку несумісності:

javascript

type A = { id: number };
type B = { id: string };
type C = A & B; // Type 'string' is not assignable to type 'number'

Підсумок

Властивість	Опис
Оператор	`&`
Назва	Intersection Type (тип-перетин)
Сенс	"І те, і те одночасно"
Результат	Тип, що включає всі властивості
Протилежність	`
Часте застосування	Композиція типів, mixins, об'єднання інтерфейсів

Просте визначення:

Intersection тип (A & B) - це тип, що поєднує в собі всі поля та вимоги з A і B.

Об'єкт такого типу має відповідати обом одночасно.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.