Casting trong Typescript – Type Assertion – Ví dụ minh họa

Trong TypeScript, casting (hay còn gọi là type assertion) là cách bạn thông báo cho trình biên dịch rằng bạn biết rõ về kiểu dữ liệu của một giá trị hơn là TypeScript suy luận. Điều này thường được sử dụng khi bạn làm việc với các kiểu dữ liệu phức tạp hoặc khi bạn cần chuyển đổi giữa các kiểu dữ liệu khác nhau.

Cách sử dụng type assertion trong TypeScript

TypeScript cung cấp hai cú pháp để thực hiện type assertion:

1. Cú pháp dùng dấu ngoặc nhọn <>:

let someValue: any = "Hello, TypeScript!";
let strLength: number = (<string>someValue).length;

console.log(strLength); // Output: 16

2. Cú pháp dùng từ khóa as:

let someValue: any = "Hello, TypeScript!";
let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 16

Ví dụ minh họa

1. Casting từ kiểu any sang kiểu cụ thể:

let someValue: any = "This is a string";

let strLength: number = (someValue as string).length;

console.log(strLength); // Output: 16

2. Casting giữa các kiểu interface:

interface Person {
    name: string;
    age: number;
}

interface Employee {
    name: string;
    age: number;
    employeeId: number;
}

let person: Person = { name: "John", age: 30 };
let employee: Employee = person as Employee;

employee.employeeId = 1234;

console.log(employee); // Output: { name: 'John', age: 30, employeeId: 1234 }

3. Casting với DOM elements:

Khi làm việc với DOM, bạn thường cần phải xác định kiểu của một phần tử DOM cụ thể để sử dụng các thuộc tính và phương thức của nó.

let inputElement = document.getElementById("userInput") as HTMLInputElement;

inputElement.value = "Hello, World!";

Trong ví dụ này, getElementById trả về một phần tử kiểu HTMLElement, nhưng chúng ta biết rằng phần tử này là một HTMLInputElement, vì vậy chúng ta sử dụng type assertion để chuyển đổi kiểu.

Lưu ý khi sử dụng type assertion

• Không thay đổi kiểu dữ liệu thực sự: Type assertion không thay đổi kiểu dữ liệu thực sự của giá trị trong runtime, nó chỉ thay đổi cách mà TypeScript kiểm tra kiểu dữ liệu trong thời gian biên dịch.
• Cẩn thận khi sử dụng: Việc sử dụng type assertion một cách không cẩn thận có thể dẫn đến lỗi trong runtime nếu bạn khẳng định sai kiểu dữ liệu.

Ví dụ:

let someValue: any = 42;
let strLength: number = (someValue as string).length; // Điều này sẽ gây lỗi trong runtime

Hy vọng những ví dụ trên giúp bạn hiểu rõ hơn về cách sử dụng type assertion trong TypeScript!