Типи TypeScript Union і Intersection

TypeScript надає потужні функції системи шрифтів, які допомагають писати безпечніший і більш передбачуваний код. Серед цих функцій є типи об’єднання та перетину, які пропонують гнучкість у визначенні та керуванні складними типами. У цій статті представлено ці поняття та наведено приклади для ілюстрації їх використання.

Що таке типи спілок?

Типи об’єднань дозволяють змінній зберігати значення різних типів. Це корисно, коли вам потрібно представити значення, яке може бути одним із кількох типів. Типи об’єднань позначаються символом | (трубка).

Визначення типів союзів

Щоб визначити тип об’єднання, ви вказуєте кілька типів, розділених символом |:

let value: string | number;

value = "Hello, TypeScript"; // Valid
value = 42; // Valid
value = true; // Error: Type 'boolean' is not assignable to type 'string | number'

У цьому прикладі змінна value може бути рядком або числом, але не логічним.

Використання типів об’єднання у функціях

Типи об’єднання особливо корисні у функціях, де параметри або типи повернення можуть бути кількох типів:

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(formatValue("hello")); // Output: HELLO
console.log(formatValue(123.456)); // Output: 123.46

Функція formatValue приймає параметр, яким може бути рядок або число, і форматує його відповідно.

Що таке типи перехресть?

Типи перетину дозволяють об’єднати кілька типів в один. Це означає, що значення типу перетину задовольнить усі типи в перетині. Типи перетину позначаються символом & (амперсанд).

Визначення типів перехресть

Щоб визначити тип перетину, ви вказуєте кілька типів, розділених символом &:

interface Person {
  name: string;
}

interface Employee {
  employeeId: number;
}

type EmployeePerson = Person & Employee;

const john: EmployeePerson = {
  name: "John Doe",
  employeeId: 1234
};

console.log(john.name); // Output: John Doe
console.log(john.employeeId); // Output: 1234

У цьому прикладі тип EmployeePerson поєднує інтерфейси Person і Employee, у результаті чого тип має name і EmployeeId властивості.

Використання типів перетину у функціях

Типи перетину також можна використовувати у функціях, щоб вимагати властивості кількох типів:

function printEmployeeDetails(employee: Person & Employee): void {
  console.log(`Name: ${employee.name}`);
  console.log(`Employee ID: ${employee.employeeId}`);
}

const jane: EmployeePerson = {
  name: "Jane Smith",
  employeeId: 5678
};

printEmployeeDetails(jane);
// Output:
// Name: Jane Smith
// Employee ID: 5678

Для функції printEmployeeDetails потрібен аргумент, який задовольняє типи Person і Employee.

Поєднання типів об’єднання та перетину

Ви можете комбінувати типи об’єднання та перетину, щоб створити складні визначення типів:

type Shape = Circle | Rectangle;

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

function getArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius * shape.radius;
  } else {
    return shape.width * shape.height;
  }
}

const myCircle: Circle = { kind: "circle", radius: 10 };
const myRectangle: Rectangle = { kind: "rectangle", width: 20, height: 30 };

console.log(getArea(myCircle)); // Output: 314.159...
console.log(getArea(myRectangle)); // Output: 600

У цьому прикладі тип Shape є об’єднанням Circle і Rectangle, а функція getArea обробляє обидва типи відповідно.

Висновок

Типи об’єднання та перетину в TypeScript надають потужні способи керування та комбінування типів, пропонуючи гнучкість і точність у визначеннях типів. Типи об’єднання дозволяють змінній бути одним із кількох типів, тоді як типи перетину об’єднують кілька типів в один. Використовуючи ці функції, ви можете створювати більш надійні та надійні додатки.

Попрактикуйтесь у використанні типів об’єднання та перетину, щоб ознайомитися з їхніми можливостями та покращити свої навички кодування TypeScript.