Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Hôm nay, chúng ta cùng tìm hiểu về Tuple trong Typescript nhé!

Tuple Typescript

Tuple trong Typescript cho phép chúng ta biển diễn thông tin của một Array với các kiểu dữ liệu đã biết, chúng ta sẽ đặt các kiểu dữ liệu mong muốn vào các index của mảng và khi sử dụng ta sẽ phải tuân theo thứ tự kiểu dữ liệu trong mảng. Để hiểu rõ hơn thì chúng ta cùng xem một ví dụ nhé.

Tuple

Mình tạo một mảng person, giả sử ta có một mảng với vị trí index đầu tiên là id, tiếp theo là username và cuối cùng là isAdmin. Ta sẽ sử dụng Tuple để gắn thông tin kiểu dữ liệu theo thứ tự cố định như trên bằng cách:

const person: [number, string, boolean] = [123, 'nguyenanhvu', true];

Ví dụ trên mình đã sử dụng Tuple để set kiểu dữ liệu vào các vị trí tương ứng trong mảng. Sử dụng Tuple trong một số trường hợp sẽ giúp chúng ta giảm được việc ghi nhớ, ví dụ như ở index = 0, ta thấy đây là phần tử có kiểu number ta có thể biết ví trị này chứa giá trị id, tương tự như vậy ta có thể biết được các giá trị của phần tử này có ý nghĩa gì nếu ta sử dụng Tuple một cách phù hợp ví dụ như ở trên ^^.

Bây giờ mình thử đổi giá trị ở index = 0 thành '123' và xem thử kết quả:

person[0] = '123';

Với thay đổi trên, ta sẽ gặp một lỗi đó là: "Type 'string' is not assignable to type 'number'".

Lỗi này xảy ra khi giá trị tại index = 0 không phù hợp với kiểu dữ liệu ta set trong Tuple. Bằng cách sử dụng Tuple ta có thể tránh được lỗi về thay đổi giá trị không phù hợp.

Tuple Array

Ta có thể khởi tạo một mảng Tuple với nhiều kiểu dữ liệu khác nhau:

let Car: [number, string][];
Car = [[1, "Lamborghini"], [2, "Ferrari"], [3, "Chevrolet"]];

Accessing Tuple Elements

Khi sử dụng Tuple, để truy xuất các phần tử trong mảng, ta sử dụng cách truy xuất mảng như bình thường:

const person: [number, string, boolean] = [123, 'nguyenanhvu', true];
console.log(person[0]); // 123

Kết luận

Như vậy là mình đã giới thiệu cho các bạn Tuple trong Typescript. Hy vọng bài viết giúp ích cho các bạn.

Hẹn gặp các bạn trong các bạn viết tiếp theo!

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.