Khẳng định kiểu

Thuộc phần Giới thiệu về TypeScript trong hành trình JavaScript của Coddy. Bài học 68 trên 73.

Đôi khi TypeScript không có đủ thông tin để xác định chính xác kiểu dữ liệu của một giá trị, nhưng bạn là nhà phát triển nên biết rõ hơn giá trị đó thực sự thuộc kiểu nào. Phép khẳng định kiểu cho phép bạn nói với TypeScript: "Hãy tin mình, mình biết giá trị này thuộc kiểu cụ thể này."

TypeScript cung cấp hai cú pháp để khẳng định kiểu. Cú pháp as là cách dùng phổ biến hơn:

let data: unknown = '{"name": "John", "age": 30}';
let user = data as string;

Bạn cũng có thể dùng cú pháp dấu ngoặc nhọn, dù cách này ít phổ biến hơn trong TypeScript hiện đại:

let data: unknown = '{"name": "John", "age": 30}';
let user = <string>data;

Thử thách

Dễ

Tạo một hàm (function) xử lý dữ liệu từ mô phỏng API bên ngoài. Bạn sẽ làm việc với các giá trị có kiểu unknown và dùng phép khẳng định kiểu để truy cập thuộc tính an toàn.

Tạo một biến apiResponse có kiểu unknown và gán cho biến chuỗi JSON sau:

{"userId": 42, "username": "alice_dev", "isActive": true}

Tạo một hàm có tên processUserData để:

Nhận tham số data có kiểu unknown
Dùng phép khẳng định kiểu để coi data là một string
Phân tích chuỗi JSON bằng JSON.parse()
Dùng một phép khẳng định kiểu khác để coi kết quả đã phân tích là một đối tượng có các thuộc tính userId (number), username (string) và isActive (boolean)
Trả về một chuỗi có định dạng: "User [userId]: [username] (Active: [isActive])"
Khai báo tường minh kiểu trả về là string

Tạo thêm dữ liệu kiểm thử:

Tạo secondApiResponse có kiểu unknown với chuỗi JSON: {"userId": 15, "username": "bob_admin", "isActive": false}
Tạo thirdApiResponse có kiểu unknown với chuỗi JSON: {"userId": 99, "username": "charlie_user", "isActive": true}

Kiểm thử hàm và in ra các kết quả sau:

Gọi processUserData với apiResponse và in kết quả
Gọi processUserData với secondApiResponse và in kết quả
Gọi processUserData với thirdApiResponse và in kết quả

Tự làm thử

// Tạo các biến chứa phản hồi từ API
const apiResponse: unknown = '{"userId": 42, "username": "alice_dev", "isActive": true}';
const secondApiResponse: unknown = '{"userId": 15, "username": "bob_admin", "isActive": false}';
const thirdApiResponse: unknown = '{"userId": 99, "username": "charlie_user", "isActive": true}';

// TODO: Tạo hàm (function) processUserData tại đây

// Kiểm tra hàm và in ra kết quả
console.log(processUserData(apiResponse));
console.log(processUserData(secondApiResponse));
console.log(processUserData(thirdApiResponse));