TypeScript: Type Guards

Type Guards là một tính năng mạnh mẽ của TypeScript giúp bạn kiểm tra kiểu của một biến tại thời gian chạy. Thay vì chỉ dựa vào các kiểu đã được xác định trong mã, Type Guards cho phép bạn xác minh kiểu dữ liệu của biến ngay khi chương trình chạy. Điều này rất hữu ích khi làm việc với các loại dữ liệu động hoặc khi bạn muốn kiểm tra kiểu trước khi truy cập vào các thuộc tính hoặc phương thức.

Trong bài học này, chúng ta sẽ tìm hiểu về cách sử dụng Type Guards để kiểm tra kiểu tại thời gian chạy bằng các từ khóa typeof và instanceof.

1. Type Guards là gì?

Type Guards trong TypeScript là cách để kiểm tra kiểu của một biến tại thời gian chạy, giúp cho trình biên dịch biết rõ kiểu của biến trong một phạm vi nhất định. Bằng cách này, TypeScript có thể cung cấp thông tin về các thuộc tính hoặc phương thức của biến dựa trên kiểu dữ liệu mà bạn đã kiểm tra.

Các Type Guards phổ biến trong TypeScript bao gồm:

• typeof: Dùng để kiểm tra kiểu cơ bản như string, number, boolean, symbol, undefined, v.v.
• instanceof: Dùng để kiểm tra đối tượng có phải là thể hiện của một lớp (class) hay không.
• User-defined Type Guards: Dùng để tạo ra các hàm tùy chỉnh để kiểm tra kiểu.

2. Dùng typeof để kiểm tra kiểu

typeof là một toán tử trong JavaScript và TypeScript giúp bạn kiểm tra kiểu của các biến cơ bản như string, number, boolean, v.v. typeof có thể được sử dụng trong các Type Guards để xác định kiểu của một giá trị.

2.1. Cú pháp

typeof value === "type"

2.2. Ví dụ

function getStringLength(value: string | number): number {
  if (typeof value === "string") {
    return value.length; // Nếu value là string, ta có thể sử dụng thuộc tính .length
  }
  return 0; // Nếu value là number, không có thuộc tính .length
}

console.log(getStringLength("Hello, TypeScript!")); // Output: 20
console.log(getStringLength(123)); // Output: 0

Ở ví dụ trên:

• Hàm getStringLength nhận một giá trị có thể là kiểu string hoặc number.
• Chúng ta sử dụng typeof để kiểm tra xem giá trị là kiểu string, và nếu đúng, chúng ta có thể sử dụng thuộc tính .length của chuỗi.

3. Dùng instanceof để kiểm tra kiểu đối tượng

instanceof là một toán tử trong JavaScript và TypeScript giúp kiểm tra xem một đối tượng có phải là thể hiện của một lớp (class) cụ thể hay không. Điều này rất hữu ích khi làm việc với các đối tượng hoặc các lớp phức tạp.

3.1. Cú pháp

object instanceof ClassName

3.2. Ví dụ

class Dog {
  bark() {
    console.log("Woof!");
  }
}

class Cat {
  meow() {
    console.log("Meow!");
  }
}

function speak(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark(); // Nếu animal là Dog, gọi phương thức bark()
  } else if (animal instanceof Cat) {
    animal.meow(); // Nếu animal là Cat, gọi phương thức meow()
  }
}

const dog = new Dog();
const cat = new Cat();

speak(dog); // Output: Woof!
speak(cat); // Output: Meow!

Ở ví dụ này:

• Hàm speak nhận một tham số animal có thể là kiểu Dog hoặc Cat.
• Sử dụng instanceof, chúng ta kiểm tra kiểu của animal và gọi phương thức tương ứng (bark cho Dog và meow cho Cat).

4. User-defined Type Guards

TypeScript cho phép bạn tạo ra các hàm tùy chỉnh để kiểm tra kiểu dữ liệu. Đây được gọi là User-defined Type Guards. Khi sử dụng các hàm này, bạn có thể xác định một cách rõ ràng hơn kiểu của các biến trong chương trình.

4.1. Cú pháp

Để tạo một User-defined Type Guard, bạn cần khai báo một hàm trả về giá trị boolean và sử dụng cú pháp is Type để TypeScript nhận diện kiểu.

function isString(value: any): value is string {
  return typeof value === "string";
}

Hàm isString sẽ kiểm tra xem giá trị value có phải là kiểu string không. Khi sử dụng trong chương trình, TypeScript sẽ tự động nhận diện kiểu của giá trị sau khi gọi hàm này.

4.2. Ví dụ

function isString(value: any): value is string {
  return typeof value === "string";
}

function printLength(value: string | number): void {
  if (isString(value)) {
    console.log(value.length); // Nếu value là string, ta có thể sử dụng .length
  } else {
    console.log("Value is not a string.");
  }
}

printLength("Hello, TypeScript!"); // Output: 20
printLength(123); // Output: Value is not a string.

Trong ví dụ trên:

• Hàm isString được sử dụng như một User-defined Type Guard.
• TypeScript nhận diện value là kiểu string sau khi gọi isString(value).

5. Tổng kết

Type Guards là một công cụ mạnh mẽ trong TypeScript giúp bạn kiểm tra kiểu của một biến tại thời gian chạy. Chúng ta có thể sử dụng các toán tử typeof và instanceof để kiểm tra kiểu của các giá trị cơ bản và các đối tượng. Bên cạnh đó, TypeScript cũng hỗ trợ User-defined Type Guards, cho phép bạn tạo các hàm tùy chỉnh để kiểm tra kiểu một cách chính xác hơn.

Sử dụng Type Guards sẽ giúp bạn viết mã an toàn hơn, giảm thiểu lỗi và tối ưu hóa quá trình phát triển ứng dụng trong TypeScript.