TypeScript: Type Assertion

TypeScript cung cấp một tính năng gọi là Type Assertion, giúp bạn "chỉ ra" kiểu dữ liệu của một biến khi bạn biết rõ kiểu của nó, mặc dù TypeScript không thể tự động suy luận ra kiểu đó. Type Assertion có thể giúp bạn kiểm tra kiểu dữ liệu một cách chính xác hơn khi làm việc với dữ liệu mà TypeScript không thể xác định chắc chắn.

Trong bài học này, chúng ta sẽ tìm hiểu về cách sử dụng Type Assertion để chuyển đổi kiểu dữ liệu với từ khóa as trong TypeScript.

1. Type Assertion là gì?

Type Assertion cho phép bạn xác định lại kiểu của một biến từ kiểu này sang kiểu khác, mà không cần phải thực hiện bất kỳ phép kiểm tra kiểu nào tại thời điểm biên dịch. Điều này hữu ích khi bạn biết rằng một biến có kiểu cụ thể nhưng TypeScript không thể suy luận ra được.

Type Assertion giống như bạn nói với TypeScript rằng "Tôi biết kiểu dữ liệu này là gì, vì vậy hãy sử dụng kiểu dữ liệu mà tôi chỉ định".

Ví dụ:

let someValue: any = "Hello, world!";
let stringLength: number = (someValue as string).length;
console.log(stringLength); // Output: 13

Ở ví dụ trên:

• someValue có kiểu any, vì vậy TypeScript không thể xác định được chính xác kiểu của nó.
• Bằng cách sử dụng Type Assertion (someValue as string), chúng ta cho TypeScript biết rằng someValue thực sự là một chuỗi (string), từ đó có thể sử dụng thuộc tính .length của chuỗi mà không gặp lỗi.

2. Cú pháp Type Assertion

Trong TypeScript, có hai cách để thực hiện Type Assertion:

2.1. Dùng từ khóa as

Cách phổ biến và chính thức để thực hiện Type Assertion là sử dụng từ khóa as.

let someValue: any = "Hello, TypeScript!";
let stringLength: number = (someValue as string).length;
console.log(stringLength); // Output: 18

Ở đây:

• someValue as string chuyển đổi kiểu của someValue thành string.

2.2. Cú pháp "angle-bracket" (dấu ngoặc nhọn)

Một cách khác là sử dụng cú pháp dấu ngoặc nhọn (<>) để chuyển đổi kiểu dữ liệu. Tuy nhiên, cú pháp này không được khuyến khích khi sử dụng trong các file TypeScript với JSX (dành cho React), vì nó có thể gây nhầm lẫn với cú pháp JSX.

let someValue: any = "Hello, TypeScript!";
let stringLength: number = (<string>someValue).length;
console.log(stringLength); // Output: 18

Ở ví dụ này:

• <string>someValue chuyển đổi kiểu của someValue thành string.

3. Khi nào sử dụng Type Assertion

Type Assertion hữu ích trong các tình huống sau:

3.1. Làm việc với các kiểu dữ liệu không xác định

Khi bạn làm việc với dữ liệu có kiểu không xác định (ví dụ: dữ liệu từ API, đối tượng JSON, hoặc dữ liệu nhập từ người dùng), TypeScript có thể không thể xác định chính xác kiểu của nó.

Ví dụ:

function getLength(obj: any): number {
  return (obj as string).length;
}

let result = getLength("TypeScript is awesome!");
console.log(result); // Output: 22

Ở ví dụ trên:

• Biến obj có kiểu any, nhưng bạn biết rằng nó thực sự là một chuỗi (string), vì vậy bạn sử dụng Type Assertion để chuyển đổi kiểu.

3.2. Làm việc với DOM

Khi làm việc với DOM trong TypeScript, đôi khi bạn cần truy vấn một phần tử và chỉ định kiểu của nó.

Ví dụ:

let inputElement = document.querySelector('input') as HTMLInputElement;
inputElement.value = "Hello!";

Ở đây:

• document.querySelector('input') trả về một phần tử DOM, nhưng TypeScript không biết chắc chắn kiểu của nó.
• Sử dụng as HTMLInputElement, chúng ta cho TypeScript biết rằng phần tử này thực sự là một HTMLInputElement, từ đó có thể truy cập các thuộc tính như value.

4. Lưu ý khi sử dụng Type Assertion

Mặc dù Type Assertion rất hữu ích, nhưng bạn cần lưu ý một số điểm sau:

4.1. Type Assertion không thay đổi dữ liệu

Type Assertion không thay đổi giá trị hoặc cấu trúc của dữ liệu, nó chỉ thay đổi cách TypeScript kiểm tra kiểu dữ liệu của biến đó. Do đó, bạn phải chắc chắn rằng dữ liệu thực sự có kiểu như bạn chỉ định.

Ví dụ, nếu bạn thực hiện một Type Assertion sai, bạn sẽ gặp lỗi trong thời gian chạy:

let someValue: any = "Hello, TypeScript!";
let num: number = (someValue as number); // Lỗi, vì giá trị thực tế là chuỗi

Trong ví dụ trên:

• someValue thực sự là một chuỗi, nhưng bạn đã thực hiện Type Assertion thành kiểu number, điều này có thể gây lỗi trong thời gian chạy.

4.2. Type Assertion không thực hiện kiểm tra kiểu

Type Assertion bỏ qua kiểm tra kiểu của TypeScript, vì vậy nó không an toàn như việc sử dụng các kiểu dữ liệu đúng. Đảm bảo rằng bạn sử dụng Type Assertion khi bạn thực sự biết rõ kiểu dữ liệu.

5. Tổng kết

Type Assertion là một công cụ hữu ích trong TypeScript giúp bạn xác định kiểu dữ liệu của biến khi TypeScript không thể tự động suy luận ra được. Bạn có thể sử dụng từ khóa as hoặc cú pháp "angle-bracket" (<>) để thực hiện Type Assertion, giúp mã nguồn của bạn linh hoạt hơn khi làm việc với dữ liệu có kiểu không xác định.

Tuy nhiên, cần thận trọng khi sử dụng Type Assertion để tránh gặp phải các lỗi thời gian chạy do chuyển đổi kiểu không chính xác.