Type assertion là gì?

Trong TypeScript, type assertion là một cơ chế cho trình biên dịch (compiler) biết về kiểu dữ liệu (type) của một biến (variable). Khi TypeScript xác định rằng phép gán (assignment) không hợp lệ, thì chúng ta có một tùy chọn để ghi đè (override) kiểu dữ liệu bằng cách sử dụng type assertion. Nếu chúng ta sử dụng type assertion, thì phép gán luôn hợp lệ. Nếu không, chương trình của chúng ta có thể hoạt động không chính xác.

Type assertion là nói tường minh (explicitly) với trình biên dịch rằng chúng ta muốn coi biến là một kiểu dữ liệu khác và yêu cầu trình biên dịch không suy ra nó. Nó cho phép chúng ta coi kiểu dữ liệu any như một số (number) hoặc một số như một chuỗi (string). Type assertion thường được sử dụng khi chúng ta di chuyển mã từ JavaScript sang TypeScript.

Type assertion hoạt động giống như typecasting, nhưng nó không thực hiện kiểm tra kiểu (type checking) hoặc tái cấu trúc dữ liệu giống như các ngôn ngữ khác có thể làm như C # và Java. Nó không có hiệu ứng runtime, nó chỉ là một cách để cho trình biên dịch của TypeScript biết kiểu dữ liệu của một biến.

let code: any = 123; 
let employeeCode =  code; 
console.log(typeof(employeeCode)); //Output: number

Trong ví dụ trên, chúng ta có một biến code thuộc kiểu dữ liệu any. Chúng tôi gán giá trị của biến này cho một biến khác được gọi là employeeCode. Tuy nhiên, chúng ta biết rằng code thuộc kiểu dữ liệu số, mặc dù nó đã được khai báo (declare) là any. Vì vậy, trong khi gán code cho employeeCode, chúng ta đã khẳng định rằng code thuộc kiểu dữ liệu số trong trường hợp này và chúng ta chắc chắn về điều đó. Bây giờ, kiểu dữ liệu của employeeCode là số.

Tương tự, chúng ta có thể gặp trường hợp có một đối tượng (object) đã được khai báo mà chưa có bất kỳ thuộc tính (property) nào.

let employee = { };
employee.name = "John"; //Compiler Error: Property 'name' does not exist on type '{}'
employee.code = 123; //Compiler Error: Property 'code' does not exist on type '{}'

Ví dụ trên sẽ đưa ra lỗi trình biên dịch, vì trình biên dịch giả định rằng kiểu dữ liệu của employee là {} không có thuộc tính nào. Tuy nhiên, chúng ta có thể tránh trường hợp này bằng cách sử dụng type assertion, như được hiển thị bên dưới.

interface Employee { 
    name: string; 
    code: number; 
} 

let employee =  { }; 
employee.name = "John"; // OK
employee.code = 123; // OK

Trong ví dụ trên, chúng ta đã tạo một interface Employee với các thuộc tính là name và code. Sau đó, chúng ta sử dụng type assertion này trên employee. Các interface được sử dụng để định nghĩa cấu trúc của các biến.

Có hai cách để thực hiện type assertion trong TypeScript:

1. Sử dụng cú pháp (syntax) ngoặc nhọn . Cho đến nay trong phần này, chúng ta đã sử dụng dấu ngoặc nhọn để hiển thị type assertion.

let code: any = 123; 
let employeeCode =  code; 

Tuy nhiên, có một cách khác để thực hiện type assertion, sử dụng cú pháp 'as'.

2. Sử dụng từ khóa (keyword) as

let code: any = 123; 
let employeeCode = code as number;

Cả hai cú pháp đều tương đương và chúng ta có thể sử dụng bất kỳ cú pháp type assertion nào trong số này. Tuy nhiên, trong khi xử lý JSX trong TypeScript, chỉ cho phép cú pháp as vì JSX có thể nhúng vào XML giống như một cú pháp. Và vì XML sử dụng dấu ngoặc nhọn, nó tạo ra xung đột khi sử dụng type assertion với dấu ngoặc nhọn trong JSX.