Mục lục
Tuples trong TypeScript
Xem thêm các chuyên mục:

Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.


Trong TypeScript, Tuple (bộ dữ liệu) là một dẫy các giá trị. Về cơ bản, Tuple là một mảng với các tính năng bổ xung, dưới đây là các đặc điểm của Tuple:
- Tuple được khai báo với một số lượng phần tử cụ thể, và chỉ định kiểu cho mỗi phần tử.
- Giá trị khởi tạo cho Tuple phải là một mảng với số phần tử bằng số phần tử được khai báo của Tuple.
- Sau khi khai báo một Tuple và khởi tạo giá trị cho nó, bạn có thể tự do hơn trong việc thêm các phần tử vào Tuple hoặc loại bỏ các phần tử ra khỏi Tuple.
Cú pháp:
// Declare a Tuple variable and initialize its value
let myTuple: [dataType1, dataType2, dataTypeN] = [value1, value2, valueN];
// Declare a Tuple variable
let myTuple: [dataType1, dataType2, dataTypeN];
// Initialize its value
myTuple = [value1, value2, valueN];
Ví dụ: Chúng ta tạo một Tuple với 3 phần tử kiểu [string, string, number]:
tuple_ex1.ts
// string: emp number, string: name, number: salary
let myTuple1: [string, string, number] = ['E01', 'Tom', 1200 ]; // OK
let myTuple2: [string, string, number] = ['E01']; // Error !!
let myTuple3: [string, string, number] = ['E01', 'Tom', 1200, 500]; // Error !!
let myTuple4: [string, string, number] = [100, 200, 300]; // Error !!
let myTuple4: [string, string, number] = ['A', 'B', 'C']; // Error !!
Một Tuple thực sự là một đối tượng của interface Array. Vì vậy chúng ta có thể truy cập vào các phần tử của nó thông qua các chỉ số.
tuple_ex2.ts
// string: emp number, string: name, number: salary
let myTuple: [string, string, number] = ['E01', 'Tom', 1200 ];
console.log(myTuple);
console.log(`Type: ${myTuple.constructor.name}`); // Array
console.log(`myTuple[0]: ${myTuple[0]}`); // E01
console.log(`myTuple[1]: ${myTuple[1]}`); // Tom
console.log(`myTuple[2]: ${myTuple[2]}`); // 1200
myTuple[1] = 'Jerry';
console.log(myTuple);
Output:
[ 'E01', 'Tom', 1200 ]
Type: Array
myTuple[0]: E01
myTuple[1]: Tom
myTuple[2]: 1200
[ 'E01', 'Jerry', 1200 ]
Về cơ bản Tuple là một mảng cộng với các kiểm tra bổ xung.
Ý tưởng thiết kế của Tuple:
Array | Tuple | |
Độ dài chính xác | No | Yes (*) |
Độ dài động | Yes | No (*) |
Chứa nhiều kiểu dữ liệu | No | Yes |
Theo ý tưởng thiết kế của Tuple, bạn nên sử dụng nó khi bạn cần một mảng với kích thước cố định, và kiểu cụ thể cho mỗi phần tử. Tuy nhiên đó chỉ là một quy tắc lỏng lẻo, sau khi khai báo và khởi tạo giá trị cho Tuple, bạn có thể thay đổi số lượng phần tử của Tuple nếu muốn.
Ví dụ: Sử dụng phương thức push() để thêm các phần tử mới vào một Tuple (Mặc dù, điều này trái với ý tưởng thiết kế của Tuple).
tuple_warning_ex1.ts (**)
// string: staff number, string: name, number: salary
let staff: [string, string, number] = ['E01', 'Tom', 1200 ];
console.log(staff); // [ 'E01', 'Tom', 1200 ]
let newLength = staff.push('New 1', 'New 2');
console.log('New Length: ' + newLength); // 5
console.log(staff); // [ 'E01', 'Tom', 1200, 'New 1', 'New 2' ]
// The element at index 3 and 4 cannot be accessed directly:
// console.log(staff[3]); // Compile Error !!!
// console.log(staff[4]); // Compile Error !!!
let idx3 = 3;
let idx4 = 4;
// Accessing the elements at index 3 and 4 in this way is OK:
console.log(staff[idx3]); // OK!
console.log(staff[idx4]); // OK!
// Accessing the elements at index 3 and 4 in this way is OK:
for(let idx in staff) {
console.log(`Element at ${idx} is: ${staff[idx]}`);
}
Output:
[ 'E01', 'Tom', 1200 ]
New Length: 5
[ 'E01', 'Tom', 1200, 'New 1', 'New 2' ]
New 1
New 2
Element at 0 is: E01
Element at 1 is: Tom
Element at 2 is: 1200
Element at 3 is: New 1
Element at 4 is: New 2
Ví dụ dưới đây cho thấy đôi khi phá vỡ các quy tắc thiết kế của Tuple cũng mang lại lợi ích.
tuple_arr_ex1.ts
let employeeInfo: [string, string, number, string] = [
'E01', // Emp Number
'Tom', // Emp Name
1200 , // Salary
'0901.33333' // Phone Number
];
employeeInfo.push('0901.44444'); // Second Phone Number
employeeInfo.push('0901.55555'); // Third Phone Number
console.log(employeeInfo);
Output:
[
'E01',
'Tom',
1200,
'0901.33333',
'0901.44444',
'0901.55555'
]
Các phương thức của mảng (và tất nhiên nó cũng có thể sử dụng với Tuple):
Array Interface
interface Array<T> {
length: number;
toString(): string;
toLocaleString(): string;
pop(): T | undefined;
push(...items: T[]): number;
concat(...items: ConcatArray<T>[]): T[];
concat(...items: (T | ConcatArray<T>)[]): T[];
join(separator?: string): string;
reverse(): T[];
shift(): T | undefined;
slice(start?: number, end?: number): T[];
sort(compareFn?: (a: T, b: T) => number): this;
splice(start: number, deleteCount?: number): T[];
splice(start: number, deleteCount: number, ...items: T[]): T[];
unshift(...items: T[]): number;
indexOf(searchElement: T, fromIndex?: number): number;
lastIndexOf(searchElement: T, fromIndex?: number): number;
every<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): this is S[];
every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
some(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean;
forEach(callbackfn: (value: T, index: number, array: T[]) => void, thisArg?: any): void;
map<U>(callbackfn: (value: T, index: number, array: T[]) => U, thisArg?: any): U[];
filter<S extends T>(predicate: (value: T, index: number, array: T[]) => value is S, thisArg?: any): S[];
filter(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): T[];
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduce(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
reduce<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T): T;
reduceRight(callbackfn: (previousValue: T, currentValue: T, currentIndex: number, array: T[]) => T, initialValue: T): T;
reduceRight<U>(callbackfn: (previousValue: U, currentValue: T, currentIndex: number, array: T[]) => U, initialValue: U): U;
[n: number]: T;
}
Xem các ví dụ sử dụng các phương thức trên trong bài viết về mảng: