TypeScript - 元组

有时，可能需要存储各种类型值的集合。数组无法满足此目的。TypeScript 为我们提供了一种称为元组的数据类型来实现此目的。

它表示异构值的集合。换句话说，元组可以存储不同类型的多个字段。元组也可以作为参数传递给函数。

语法

我们可以使用 JavaScript 的数组语法创建元组

const tupleName = [value1, value2, value3, ...valueN]

但我们需要将其类型声明为元组。

const tupleName: [type1, type2, type3, ...typeN] = [value1, value2, value3, ...valueN]

例如

const myTuple: [number, string] = [10,"Hello"];

您可以先定义一个元组，然后进行初始化，

let myTuple: [number, string]; // declaring the tuple
myTuple = [10, "Hello"]; // initializing the tuple

请确保，声明的const元组必须进行初始化。

您也可以在 Typescript 中声明一个空元组，并选择稍后对其进行初始化。

var myTuple = []; 
myTuple[0] = 10;
myTuple[1] = "Hello";

访问元组中的值

元组值分别称为项。元组是基于索引的。这意味着元组中的项可以使用其对应的数字索引进行访问。元组项的索引从零开始，一直到 n-1（其中 n 是元组的大小）。

语法

以下是使用其索引访问元组中值的语法：

tupleName[index]

示例：简单元组

var myTuple: [number, string] = [10,"Hello"]; //create a tuple 
console.log(myTuple[0]) 
console.log(myTuple[1])

在上面的示例中，声明了一个元组myTuple。该元组分别包含数值类型和字符串类型的值。

编译后，它将在 JavaScript 中生成以下代码。

var myTuple = [10, "Hello"]; //create a tuple 
console.log(myTuple[0]);
console.log(myTuple[1]);

其输出如下：

10 
Hello

示例：空元组

我们可以如下声明一个空元组，然后对其进行初始化。

var tup = [] 
tup[0] = 12 
tup[1] = 23 

console.log(tup[0]) 
console.log(tup[1])

编译后，它将在 JavaScript 中生成相同的代码。

其输出如下：

12 
23

元组操作

TypeScript 中的元组支持各种操作，例如推送新项、从元组中删除项等。

示例

var myTuple: [number, string, string, string]; 
myTuple = [10,"Hello","World","typeScript"]; 
console.log("Items before push " + myTuple.length)

myTuple.push(12) // append value to the tuple 
console.log("Items after push " + myTuple.length) 
console.log("Items before pop " + myTuple.length)
 
// removes and returns the last item
console.log(myTuple.pop() + " popped from the tuple") 
console.log("Items after pop " + myTuple.length)

push() 将一个项追加到元组
pop() 删除并返回元组中的最后一个值

编译后，它将在 JavaScript 中生成以下代码。

var myTuple;
myTuple = [10, "Hello", "World", "typeScript"];
console.log("Items before push " + myTuple.length);
myTuple.push(12); // append value to the tuple 
console.log("Items after push " + myTuple.length);
console.log("Items before pop " + myTuple.length);
// removes and returns the last item
console.log(myTuple.pop() + " popped from the tuple"); 
console.log("Items after pop " + myTuple.length);

以上代码的输出如下：

Items before push 4 
Items after push 5 
Items before pop 5 
12 popped from the tuple 
Items after pop 4

更新元组

元组是可变的，这意味着您可以更新或更改元组元素的值。

示例

var myTuple: [number, string, string, string]; // define tuple
myTuple = [10,"Hello","World","typeScript"]; // initialize tuple
console.log("Tuple value at index 0 " + myTuple[0]) 
//update a tuple element 
myTuple[0] = 121     
console.log("Tuple value at index 0 changed to   " + myTuple[0])

编译后，它将在 JavaScript 中生成以下代码。

var myTuple; // define tuple
myTuple = [10, "Hello", "World", "typeScript"]; // initialize tuple
console.log("Tuple value at index 0 " + myTuple[0]);
//update a tuple element 
myTuple[0] = 121;
console.log("Tuple value at index 0 changed to   " + myTuple[0]);

以上代码的输出如下：

Tuple value at index 0 10 
Tuple value at index 0 changed to 121

解构元组

解构是指分解实体的结构。TypeScript 在元组的上下文中使用时支持解构。

示例

var a: [number, string] = [10,"hello"];
var [b, c] = a;
console.log( b );    
console.log( c );

编译后，它将生成以下 JavaScript 代码。

var a = [10, "hello"];
var b = a[0], c = a[1];
console.log(b);
console.log(c);

其输出如下：

10
hello

函数参数和元组类型

我们可以定义一个函数来显式地接受元组类型。因此，在调用函数时，我们将元组作为参数传递。

示例

function processData(data: [string, number]): void {
    const [name, age] = data;
    console.log(`Name: ${name}, Age: ${age}`);
}
let data: [string, number] = ["John", 32]
processData(data);

我们在这里定义了一个函数processData()，它接受一个元组类型的参数。在函数内部，我们使用元组解构来获取组成元素。我们调用该函数，并将元组作为参数传递。

编译后，它将生成以下 JavaScript 代码。

function processData(data) {
    const [name, age] = data;
    console.log(`Name: ${name}, Age: ${age}`);
}
let data = ["John", 32];
processData(data);

以上代码的输出如下：

Name: John, Age: 32

打印页面