Loại bảo vệ

Thu hẹp kiểu chữ là một trong những khái niệm quan trọng nhất trong TypeScript. Tuy nhiên, thông thường, các loại bảo vệ tiêu chuẩn như typeof hoặc instanceof là không đủ cho các đối tượng tùy chỉnh phức tạp. Đây là lúc Vệ sĩ loại tùy chỉnh phát huy tác dụng.

Bảo vệ loại tiêu chuẩn

Hãy bắt đầu bằng cách tóm tắt cách TypeScript thu hẹp các loại bằng cách sử dụng toán tử JavaScript tiêu chuẩn:

function processInput(val: string | number) {
  if (typeof val === 'string') {
    // Here 'val' is of type string
    console.log(val.toUpperCase());
  } else {
    // Here 'val' is of type number
    console.log(val.toFixed(2));
  }
}

Bộ bảo vệ loại tùy chỉnh (toán tử is)

Để xác định trình bảo vệ kiểu tùy chỉnh, chúng tôi tạo một hàm trả về vị ngữ loại ở định dạng parameterName is Type thay vì kiểu trả về boolean tiêu chuẩn.

Hàm phải trả về giá trị boolean (true hoặc false). Nếu nó trả về true, TypeScript sẽ biết rằng tham số đã truyền thuộc loại đã chỉ định.

interface Cat {
  name: string;
  meow(): void;
}

interface Dog {
  name: string;
  bark(): void;
}

// This is a custom type guard
function isCat(animal: Cat | Dog): animal is Cat {
  return (animal as Cat).meow !== undefined;
}

function makeNoise(pet: Cat | Dog) {
  if (isCat(pet)) {
    // Here TypeScript knows 'pet' is a Cat
    pet.meow();
  } else {
    // Here TypeScript knows 'pet' is a Dog
    pet.bark();
  }
}

An toàn và đúc (as so với Type Guards)

Truyền kiểu (ví dụ: val as Cat) buộc trình biên dịch phải tin cậy nhà phát triển mà không có bất kỳ xác minh thời gian chạy thực nào. Nếu đối tượng thời gian chạy không đáp ứng được mong đợi, mã sẽ âm thầm bị lỗi hoặc đưa ra các ngoại lệ.

Mặt khác, các bộ bảo vệ kiểu tùy chỉnh thực hiện kiểm tra thời gian chạy mạnh mẽ và năng động, thông báo một cách an toàn và chính xác cho trình biên dịch TypeScript về loại biến thực tế:

function processInput(input: unknown) {
  // unsafe casting: could crash if input does not have the split method
  // const str = input as string;
  // console.log(str.split(' '));

  // safe guard
  if (isString(input)) {
    console.log(input.split(' ')); // 100% Safe!
  }
}

Hãy tự mình thử

Bài tập 1: Bảo vệ kiểu chuỗi

Bài tập 2: Bảo vệ loại người dùng cao cấp

Bài tập 3: Xác thực đối tượng lỗi tùy chỉnh

Bài tập 4: Bảo vệ loại quản trị viên