TypeScript tuple type

TypeScript language, the elements in an array can generally only be composed of the same data type ( any[] ). If we want to store elements of different types, we can use tuples.

TypeScript in 0613f6e8488b1c looks similar to the array in appearance, but different types of elements are allowed to be stored in the tuple, and the elements in the array must be of the same type.

Declaration tuple

The syntax for declaring tuples:

let tuple_name = [value1,value2,value3,…value n]

Example:

For example, declare an element composed of a number type, a string type, and a boolean type:

let tup1:[number, string, boolean] = [1, 'a', true];
console.log(tup1);  

Compile into JavaScript code:

var tup1 = [1, 'a', true];
console.log(tup1); // [ 1, 'a', true ]

Output:

[ 1, 'a', true ]

For the tuple declared in this way, the element types must correspond to each other. For example, the first element in the right bracket must be number type 0613f6e8488bf0, the second element must be string type 0613f6e8488bf1, and the third boolean , if If there is no one-to-one correspondence, an error will be reported.

Example:

The following figure is a sample code. When the element does not have a one-to-one correspondence with the data type of the corresponding position, an error will occur:

Access tuple

Like an array, the elements in a tuple can also be accessed by index. The index value in the tuple also starts from 0, the first element is 0, the second is 1, and so on, the n is n-1 .

Example:

When you access an element by index, you can get the value of this element:

let tup1: [string, number, number] = ['xkd', 1, 3];
console.log("第三个元素的值为：" +  tup1[2]);
console.log("第三个元素的类型为：" + typeof tup1[2]);

Compiled to JavaScript code:

var tup1 = ['xkd', 1, 3];
console.log("第三个元素的值为：" + tup1[2]);
console.log("第三个元素的类型为：" + typeof tup1[2]);

Output:

第三个元素的值为：3
第三个元素的类型为：number

It should be noted that when accessing the elements in the tuple, it is not allowed to access beyond the bounds. For example, there are only three elements in the above array, so if we access the element with index 3:

let tup1: [string, number, number] = ['xkd', 1, 3];
console.log(tup1[3]);

Output:

Tuple type '[string, number, number]' of length '3' has no element at index '3'.

Optional element type

When we declare a tuple, we can suffix the element type with a question mark ？ to indicate that the element is optional.

Example:

In the following tuple, the second and third elements are optional elements:

let tup1: [string, number?, number?];
tup1 = ['a'];
tup1 = ['a', 1];
tup1 = ['a', 1, 3]

It is very important that the optional element type must be after the mandatory element type. In other words, if an element type is suffixed with a question mark ？ , then all element types after this element must be suffixed with a question mark.

Example:

The second element in the figure below is optional. If the third element is not optional, an error will be reported:

Tuple operations

TypeScript also support various operations. For example, we can use the push() method to add elements to the tuple, and the pop() method to remove the last element in the tuple. In fact, the use is similar to the array.

Example:

First declare a tuple:

let mytup:[number, number, string, string] = [7, 36, 'summer', 'xkd'];

Then we can use the push() method to add new elements to this tuple (it is recommended not to do this), as shown below:

let mytup:[number, number, string, string] = [7, 36, 'summer', 'xkd'];
mytup.push('mark');
console.log(mytup);

// 输出：[ 7, 36, 'summer', 'xkd', 'mark' ]

You can also use the pop() method to delete the last element in the tuple:

mytup.pop();
console.log(mytup);

// 输出：[ 7, 36, 'summer' ]

Update or modify tuple elements

Tuples are mutable, which means that we can update or change the value of the elements in the tuple. To modify the elements in the tuple, we need to use the index and assignment operator = .

Example:

For example, modify the value of the element with index 1 in the tuple to'aaa':

let mytup:[number, string] = [7, 'xkd'];
mytup[1] = 'aaa';
console.log(mytup);

Compile into JavaScript code:

var mytup = [7, 'xkd'];
mytup[1] = 'aaa';
console.log(mytup);

Output:

[ 7, 'aaa' ]

Deconstructing tuples

We can deconstruct the elements in the tuple, for example:

let mytup:[number, string, boolean] = [7, 'summer', true];
let [a, b, c] = mytup;
console.log(a);
console.log(b);
console.log(c);

Compile into JavaScript code:

var mytup = [7, 'summer', true];
var a = mytup[0], b = mytup[1], c = mytup[2];
console.log(a);
console.log(b);
console.log(c);

Output:

7
summer
true

If we don't need to deconstruct all the elements in the tuple, we can deconstruct like this:

let mytup:[number, string, boolean] = [7, 'summer', true];
let [a, ...arg] = mytup;
console.log(a);
console.log(arg);

Compile into JavaScript code:

var mytup = [7, 'summer', true];
var a = mytup[0], arg = mytup.slice(1);
console.log(a);
console.log(arg);

Output:

7
[ 'summer', true ]

Hands-on practice

1. Please define a tuple. In this tuple, the first element is a string type, the second element is a boolean type, and the third element is an optional number type?
2. Please modify the value of the third element in the following tuple to "Coke"?

let mytup: [string, number, string, boolean] = ['牛肉', 100, '雪碧', true];

Link: https://www.9xkd.com/