Công đoàn và thu hẹp

Trong thế giới thực, các biến và phản hồi API không phải lúc nào cũng có một loại cố định. TypeScript cung cấp Các loại kết hợp để xử lý tính biến đổi và Thu hẹp loại để vận hành an toàn trên chúng trong thời gian chạy.

Các loại liên minh

Kiểu kết hợp cho phép một biến chấp nhận các giá trị thuộc các loại khác nhau. Nó được thể hiện bằng ký hiệu thanh dọc (|):

let result: number | string;
result = 42; // Valid
result = 'Error 404'; // Valid

Tuy nhiên, khi làm việc với loại kết hợp, chúng ta không thể gọi trực tiếp các phương thức chỉ thuộc về một trong các loại đó (ví dụ: chúng ta không thể gọi .toUpperCase() nếu biến cũng có thể là number). Đầu tiên chúng ta phải “thu hẹp” loại hình.

Thu hẹp loại

Thu hẹp loại là quá trình trong đó TypeScript phân tích cấu trúc luồng điều khiển (chẳng hạn như if hoặc switch) để suy ra loại cụ thể hơn cho một biến trong thời gian chạy.

Có một số cách để thực hiện thu hẹp:

1. Toán tử typeof

Lý tưởng để phân biệt các loại nguyên thủy:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // TypeScript knows 'value' is a string here
    console.log(value.length);
  } else {
    // TypeScript knows 'value' is a number here
    console.log(value.toFixed(2));
  }
}

2. Toán tử in

Được sử dụng để kiểm tra xem một thuộc tính cụ thể có tồn tại trên một đối tượng hay không:

interface Fish {
  swim: () => void;
}
interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // Narrowing to Fish
  } else {
    animal.fly(); // Narrowing to Bird
  }
}

Công đoàn bị phân biệt đối xử

Mẫu Discriminated Unions bao gồm việc tạo các đối tượng có chung thuộc tính với một giá trị theo nghĩa đen duy nhất (được gọi là discriminator). TypeScript nhận ra yếu tố phân biệt đối xử này và tự động thu hẹp loại trong các khối có điều kiện.

interface SuccessResponse {
  status: 'success'; // Literal discriminator
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Literal discriminator
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Data received:', response.data);
  } else {
    console.error('An error occurred:', response.errorMessage);
  }
}

Hãy tự mình thử

Bài tập 1: Các kiểu kết hợp

Bài tập 2: Thu hẹp kiểu cơ bản

Bài tập 3: Thu hẹp bằng “in”

Bài tập 4: Hình dạng liên minh phân biệt đối xử