Các kiểu liên kết và giao nhau của TypeScript

TypeScript cung cấp các tính năng hệ thống kiểu mạnh mẽ giúp bạn viết mã an toàn hơn và dễ dự đoán hơn. Trong số các tính năng này có các kiểu hợp nhất và giao nhau, cung cấp tính linh hoạt trong việc xác định và quản lý các kiểu phức tạp. Bài viết này giới thiệu các khái niệm này và cung cấp các ví dụ để minh họa cách sử dụng của chúng.

Các loại liên minh là gì?

Kiểu hợp nhất cho phép một biến giữ các giá trị có nhiều kiểu khác nhau. Điều này hữu ích khi bạn cần biểu diễn một giá trị có thể là một trong nhiều kiểu. Kiểu hợp nhất được biểu thị bằng ký hiệu | (ống).

Định nghĩa các loại liên minh

Để xác định kiểu hợp nhất, bạn chỉ định nhiều kiểu được phân tách bằng ký hiệu |:

let value: string | number;

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

Trong ví dụ này, biến giá trị có thể là chuỗi hoặc số, nhưng không phải là boolean.

Sử dụng Union Type trong Functions

Kiểu hợp nhất đặc biệt hữu ích trong các hàm mà tham số hoặc kiểu trả về có thể là nhiều kiểu:

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

Hàm formatValue lấy tham số có thể là string hoặc number và định dạng cho phù hợp.

Các loại giao lộ là gì?

Kiểu giao nhau cho phép bạn kết hợp nhiều kiểu thành một. Điều này có nghĩa là giá trị của kiểu giao nhau sẽ thỏa mãn tất cả các kiểu trong giao nhau. Kiểu giao nhau được biểu thị bằng ký hiệu & (dấu và).

Xác định các loại giao lộ

Để xác định loại giao điểm, bạn chỉ định nhiều loại được phân tách bằng ký hiệu &:

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

Trong ví dụ này, kiểu EmployeePerson kết hợp các giao diện Person và Employee, tạo ra một kiểu có cả thuộc tính name và employeeId.

Sử dụng các kiểu giao nhau trong hàm

Các kiểu giao nhau cũng có thể được sử dụng trong các hàm để yêu cầu nhiều thuộc tính kiểu:

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

Hàm printEmployeeDetails yêu cầu đối số đáp ứng cả hai kiểu Person và Employee.

Kết hợp các loại Union và Intersection

Bạn có thể kết hợp các kiểu hợp và giao để tạo ra các định nghĩa kiểu phức tạp:

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

Trong ví dụ này, kiểu Shape là sự kết hợp của Circle và Rectangle, và hàm getArea xử lý cả hai kiểu tương ứng.

Phần kết luận

Các kiểu hợp nhất và giao điểm trong TypeScript cung cấp những cách mạnh mẽ để quản lý và kết hợp các kiểu, mang lại sự linh hoạt và độ chính xác trong định nghĩa kiểu. Các kiểu hợp nhất cho phép một biến là một trong nhiều kiểu, trong khi các kiểu giao điểm kết hợp nhiều kiểu thành một. Bằng cách sử dụng các tính năng này, bạn có thể tạo các ứng dụng mạnh mẽ hơn và an toàn hơn về kiểu.

Thực hành sử dụng các kiểu hợp và giao để làm quen với khả năng của chúng và cải thiện kỹ năng viết mã TypeScript của bạn.