Типи перетину в TypeScript
Що таке типи перетворення?
Тип перетворення об'єднує кілька типів в один за допомогою оператора &. Результуючий тип має всі властивості з усіх об'єднаних типів.
Основний синтаксис
typescript
type A = { name: string };
type B = { age: number };
type AB = A & B;
// AB = { name: string; age: number }
const person: AB = {
name: "Alice",
age: 25
}; // Повинен мати ЯК ІМ'Я, ТАК І ВІКПеретворення vs Об'єднання
| Оператор | Значення | Результат |
|---|---|---|
A & B (Перетворення) | Повинен задовольняти обидва A і B | Усі властивості з обох |
A | B (Об'єднання) | Повинен задовольняти або A, або B | Властивості, спільні для обох |
typescript
type Dog = { bark(): void; legs: number };
type Bird = { fly(): void; legs: number };
type DogAndBird = Dog & Bird;
// { bark(): void; fly(): void; legs: number }
type DogOrBird = Dog | Bird;
// Тільки 'legs' гарантовано доступнийОб'єднання інтерфейсів
typescript
interface HasId {
id: string;
}
interface HasTimestamps {
createdAt: Date;
updatedAt: Date;
}
interface HasSoftDelete {
deletedAt: Date | null;
}
type BaseEntity = HasId & HasTimestamps & HasSoftDelete;
// Має всі: id, createdAt, updatedAt, deletedAtПрактичні випадки використання
Міксини / Компонування типів
typescript
type Draggable = {
drag(): void;
position: { x: number; y: number };
};
type Resizable = {
resize(w: number, h: number): void;
size: { width: number; height: number };
};
type UIWidget = Draggable & Resizable;Розширення параметрів функцій
typescript
type BaseConfig = { debug: boolean; verbose: boolean };
type DBConfig = BaseConfig & { connectionString: string; pool: number };
type CacheConfig = BaseConfig & { ttl: number; maxSize: number };
function initDB(config: DBConfig) { /* ... */ }Типізація відповіді API
typescript
type ApiResponse<T> = {
status: number;
message: string;
} & T;
type UserResponse = ApiResponse<{ data: { name: string; email: string } }>;
// { status: number; message: string; data: { name: string; email: string } }Конфліктуючі властивості
Коли перетворені типи мають однакову властивість з несумісними типами, результатом є never:
typescript
type A = { value: string };
type B = { value: number };
type C = A & B;
// value: string & number → never (неможливо задовольнити)
const c: C = { value: "hello" }; // ❌ ПомилкаЯкщо типи сумісні, вони звужуються:
typescript
type A = { value: string | number };
type B = { value: number | boolean };
type C = A & B;
// value: number (перекриття string|number і number|boolean)Важливо:
Типи перетворення є еквівалентом "AND" у TypeScript — результуючий тип повинен задовольняти всі об'єднані типи. Використовуйте їх для складання складних типів з простіших будівельних блоків. Будьте обережні з конфліктуючими типами властивостей, які призводять до never.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.