Cách sử dụng TypeScript Type Assertions

Khẳng định kiểu trong TypeScript là một cách để cho trình biên dịch biết rằng bạn biết nhiều hơn về kiểu của một giá trị so với nó. Điều này có thể hữu ích khi bạn làm việc với các giá trị có kiểu không chắc chắn hoặc rộng và bạn muốn thu hẹp chúng lại để kiểm tra kiểu tốt hơn và khả năng đọc mã. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng khẳng định kiểu TypeScript hiệu quả.

Type Assertion là gì?

Type assertion là một cơ chế trong TypeScript cho phép bạn ghi đè suy luận kiểu mặc định do trình biên dịch TypeScript thực hiện. Nó không thay đổi kiểu thời gian chạy thực tế nhưng giúp trình biên dịch hiểu kiểu của biến để kiểm tra kiểu. Type assertions tương tự như type casting trong các ngôn ngữ khác như C# hoặc Java, nhưng không có bất kỳ tác động nào đến thời gian chạy.

Cú pháp của các khẳng định kiểu

Có hai cách để sử dụng khẳng định kiểu trong TypeScript:

• Sử dụng từ khóa as (khuyến nghị)
• Sử dụng dấu ngoặc nhọn <>

Sử dụng từ khóa as

Cách phổ biến nhất để sử dụng khẳng định kiểu là sử dụng từ khóa as:

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

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

Trong ví dụ này, chúng tôi cho TypeScript biết rằng someValue thuộc kiểu string, cho phép chúng tôi sử dụng thuộc tính length.

Sử dụng dấu ngoặc nhọn <>

Cú pháp thay thế cho khẳng định kiểu sử dụng dấu ngoặc nhọn:

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

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

Cú pháp này đạt được kết quả tương tự như cú pháp as. Tuy nhiên, không nên sử dụng trong môi trường sử dụng JSX (như React) vì nó xung đột với cú pháp cho các phần tử JSX.

Các trường hợp sử dụng phổ biến cho các khẳng định kiểu

Khẳng định kiểu thường được sử dụng trong một số trường hợp:

• Khi làm việc với kiểu unknown
• Khi xử lý các phần tử DOM
• Khi thu hẹp các loại liên minh
• Khi tương tác với các thư viện của bên thứ ba thiếu định nghĩa kiểu

Ví dụ: Khẳng định các loại với loại unknown

Kiểu unknown hữu ích khi bạn muốn chấp nhận bất kỳ kiểu nào nhưng vẫn cần phải kiểm tra kiểu trước khi sử dụng. Khẳng định kiểu giúp thu hẹp kiểu:

function getLength(value: unknown): number {
  if (typeof value === "string") {
    return (value as string).length;
  } else if (Array.isArray(value)) {
    return (value as any[]).length;
  }
  return 0;
}

console.log(getLength("Hello")); // Output: 5
console.log(getLength([1, 2, 3])); // Output: 3
console.log(getLength(42)); // Output: 0

Trong ví dụ này, chúng tôi sử dụng khẳng định kiểu để cho TypeScript biết rằng value là một string hoặc một mảng any[].

Ví dụ: Xử lý các phần tử DOM

Khi thao tác DOM, TypeScript cần biết loại cụ thể của một phần tử để cung cấp các thuộc tính và phương thức phù hợp. Khẳng định loại hữu ích ở đây:

const inputElement = document.getElementById("user-input") as HTMLInputElement;
inputElement.value = "Hello, TypeScript!";

Ở đây, chúng ta sử dụng khẳng định kiểu để cho TypeScript biết rằng inputElement là HTMLInputElement, cho phép chúng ta truy cập trực tiếp vào thuộc tính value.

Khẳng định kiểu so với ép kiểu

Điều cần thiết là phải hiểu sự khác biệt giữa khẳng định kiểu và ép kiểu. Trong TypeScript, khẳng định kiểu không thay đổi kiểu thực tế tại thời điểm chạy; chúng chỉ cho trình biên dịch TypeScript biết cách xử lý kiểu tại thời điểm biên dịch. Ngược lại, ép kiểu trong các ngôn ngữ khác như C# hoặc Java có thể liên quan đến việc chuyển đổi giá trị từ kiểu này sang kiểu khác tại thời điểm chạy, điều này có thể ảnh hưởng đến hiệu suất và hành vi.

Thận trọng khi sử dụng Khẳng định kiểu

Mặc dù các khẳng định kiểu có thể mạnh mẽ, nhưng việc sử dụng sai có thể dẫn đến lỗi thời gian chạy. Sau đây là một số mẹo để sử dụng chúng một cách an toàn:

• Tránh sử dụng các khẳng định để chuyển đổi cưỡng bức các kiểu không tương thích.
• Luôn sử dụng các khẳng định một cách thận trọng và ưu tiên thu hẹp các kiểu bằng cách sử dụng bộ bảo vệ kiểu của TypeScript.
• Sử dụng khẳng định khi bạn chắc chắn về loại và khi không thể thu hẹp phạm vi bằng cách khác.

Ví dụ về khẳng định loại không chính xác

Sau đây là một ví dụ về khẳng định kiểu nguy hiểm:

let someValue: string = "Hello, TypeScript!";
let numValue: number = (someValue as unknown as number); // Dangerous!

console.log(numValue); // Output: Hello, TypeScript! (incorrect)

Mã này biên dịch mà không có lỗi, nhưng sẽ dẫn đến hành vi không mong muốn khi chạy vì chuỗi không được xử lý đúng cách như một số.

Phần kết luận

Khẳng định kiểu trong TypeScript cung cấp một cách để ghi đè các kiểu suy ra khi bạn biết nhiều hơn về kiểu của giá trị so với TypeScript. Chúng hữu ích khi xử lý các kiểu không chắc chắn, tương tác với các thư viện của bên thứ ba hoặc làm việc với các phần tử DOM. Tuy nhiên, chúng nên được sử dụng thận trọng để tránh lỗi thời gian chạy và đảm bảo an toàn kiểu trong mã của bạn.

Bằng cách thành thạo các khẳng định kiểu, bạn có thể viết mã TypeScript biểu cảm và mạnh mẽ hơn. Thực hành sử dụng chúng trong nhiều tình huống khác nhau để trở nên thoải mái hơn với tính năng mạnh mẽ này.