TypeScript - Type.Assertions: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của TypeScript và tìm hiểu một khái niệm叫做 "Type Assertions." Đừng lo lắng nếu bạn mới bắt đầu học lập trình; tôi sẽ hướng dẫn bạn từng bước qua chủ đề này, giống như tôi đã làm cho sinh viên của mình trong nhiều năm qua. Vậy, hãy lấy một tách cà phê (hoặc thức uống yêu thích của bạn), và chúng ta cùng bắt đầu nhé!

Type Assertions là gì?

Trước khi chúng ta vào phần cách làm, hãy hiểu xem type assertions là gì. Hãy tưởng tượng bạn đang tham gia một bữa tiệc hóa trang, và bạn thấy ai đó mặc trang phục siêu anh hùng. Bạn biết đó là bạn của bạn ở dưới, nhưng mọi người khác chỉ thấy một siêu anh hùng. Type assertions trong TypeScript cũng tương tự như vậy - bạn đang nói với TypeScript, "Tôi biết điều này trông như một thứ, nhưng tin tôi đi, nó thực sự là một thứ khác."

Trong lập trình, type assertions cung cấp một cách để nói với bộ biên dịch TypeScript rằng hãy coi một giá trị là một loại cụ thể, ngay cả khi TypeScript không thể xác minh nó một mình.

Cách thực hiện Type Assertions?

Bây giờ chúng ta đã hiểu khái niệm, hãy xem cách chúng ta có thể sử dụng type assertions trong mã của mình. Có hai cách chính để làm điều này trong TypeScript:

1. Sử dụng từ khóa 'as'

Từ khóa 'as' là cách được khuyến nghị để thực hiện type assertions trong TypeScript. Dưới đây là cách nó hoạt động:

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

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

Trong ví dụ này, chúng ta đang nói với TypeScript, "Ồ, tôi biết someValue là loại any, nhưng hãy coi nó là một string khi tôi muốn lấy độ dài của nó."

Hãy phân tích nó:

• Chúng ta có một biến someValue loại any (nghĩa là nó có thể là bất kỳ thứ gì).
• Chúng ta muốn lấy độ dài của nó, nhưng TypeScript không biết nó là một string.
• Chúng ta sử dụng as string để khẳng định rằng someValue thực sự là một string.
• Bây giờ chúng ta có thể sử dụng thuộc tính .length.

2. Sử dụng cú pháp góc brackets

Đây là cú pháp cũ hơn mà bạn có thể thấy trong một số mã cơ sở:

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

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

Cú pháp này làm điều tương tự như cú pháp 'as'. Tuy nhiên, cần lưu ý rằng cú pháp này không thể sử dụng trong JSX, vì vậy từ khóa 'as' thường được ưu tiên.

Khi nào nên sử dụng Type Assertions?

Type assertions rất hữu ích trong nhiều trường hợp. Hãy cùng khám phá một số trường hợp sử dụng phổ biến:

1. Làm việc với các phần tử DOM

Khi làm việc với Document Object Model (DOM) trong TypeScript, bạn thường cần sử dụng type assertions. Dưới đây là một ví dụ:

const myButton = document.getElementById('myButton') as HTMLButtonElement;
myButton.disabled = true;

Trong trường hợp này, chúng ta đang nói với TypeScript rằng chúng ta chắc chắn myButton là một HTMLButtonElement. Điều này cho phép chúng ta truy cập các thuộc tính như disabled mà không cần TypeScript phàn nàn.

2. thu hẹp các loại

Đôi khi, bạn có thể có một biến loại tổng quát hơn, nhưng bạn biết nó thực sự là một loại cụ thể hơn:

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

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

function petAnimal(animal: Cat | Dog) {
if ('purr' in animal) {
(animal as Cat).purr();
} else {
(animal as Dog).bark();
}
}

Ở đây, chúng ta sử dụng type assertions để nói với TypeScript loại cụ thể nào chúng ta đang làm việc với trong câu lệnh if.

3. Làm việc với các thư viện bên ngoài

Khi sử dụng các thư viện bên ngoài không có định nghĩa TypeScript, bạn có thể cần sử dụng type assertions:

import * as lodash from 'lodash';

const result = (lodash as any).someUndefinedMethod();

Điều này nói với TypeScript hãy tin tưởng chúng ta và cho phép sử dụng someUndefinedMethod, ngay cả khi nó không biết về nó.

Cách tốt nhất và cảnh báo

Mặc dù type assertions có thể rất mạnh mẽ, chúng nên được sử dụng cẩn thận. Dưới đây là một số lời khuyên:

1. Sử dụng tiết kiệm: Type assertions sẽ bỏ qua kiểm tra loại của TypeScript. Sử dụng chúng chỉ khi cần thiết.

2. Kiểm tra lại các khẳng định của bạn: Nếu bạn khẳng định sai loại, TypeScript sẽ không bắt lỗi, điều này có thể dẫn đến các vấn đề thời gian chạy.

3. Xem xét sử dụng các ràng buộc loại: Trong nhiều trường hợp, các ràng buộc loại (như instanceof hoặc typeof) là lựa chọn an toàn hơn so với type assertions.

4. Cẩn thận với 'any': Khẳng định từ hoặc đến any có thể che giấu lỗi loại. Sử dụng các loại cụ thể hơn khi có thể.

Kết luận

Type assertions trong TypeScript giống như một mật mã bí mật với bộ biên dịch. Chúng cho phép bạn nói với TypeScript, "Tin tôi đi, tôi biết tôi đang làm gì." Nhưng hãy nhớ, với quyền lực lớn đi kèm với trách nhiệm lớn! Sử dụng type assertions một cách khôn ngoan, và chúng sẽ là một công cụ quý giá trong bộ công cụ TypeScript của bạn.

Tôi hy vọng hướng dẫn này đã giúp bạn hiểu type assertions tốt hơn. Nhớ rằng, thực hành là cách tốt nhất để hoàn thiện, vì vậy đừng ngần ngại thử nghiệm các khái niệm này trong mã của riêng bạn. Chúc các bạn may mắn, những nhà vô địch TypeScript tương lai!

Phương pháp	Cú pháp	Ví dụ
Từ khóa 'as'	(value as Type)	(someValue as string).length
Góc brackets	<Type>value	(<string>someValue).length

Credits: Image by storyset