TypeScript 元组类型

我们将学习TypeScript中的元组类型。在JavaScript中，一个数组可以包含不同数据类型的元素。然而，由于TypeScript是JavaScript的超集和类型严格的语言，TypeScript数组只能包含单一类型的元素。

因此，元组允许我们在TypeScript数组中存储不同数据类型的元素。此外，当我们在元组内存储元素时，元素的顺序很重要；否则，TypeScript编译器在编译代码时可能会产生错误。

语法

你可以按照下面的语法来定义TypeScript中的图元。

let sample_tuple: [string, number, data_types of other variables ...];
sample_tuple = ['TypeScript', 95, other values according to data types];

在上面的语法中，用户可以看到，我们需要定义我们想放在每个索引上的值的数据类型。它可以包含多个用户想要存储的元素，但需要为每个索引定义类型。

示例1 (定义元组)

在下面的例子中，我们已经创建了长度为4的元组。该元组在第一个索引中包含数字，在第二个索引中包含布尔值，在第三个和第四个索引中分别包含字符串和数字。

用户可以把最后给出的代码注释出来，然后试着编译，看看当我们在元组中添加更多的元素或随机顺序的元素时，会出现什么错误。

// defining the tuple of length four
let sample_tuple: [number, boolean, string, number] = [
   10,
   true,
   "TutorialsPoint",
   90,
];

let values: string =
   sample_tuple[0] +
   " " +
   sample_tuple[1] +
   " " +
   sample_tuple[2] +
   " " +
sample_tuple[3];
console.log("The value of tuple elements is " + values);

// defining the tuple of length four
var sample_tuple = [
   10,
   true,
   "TutorialsPoint",
   90,
];
var values = sample_tuple[0] +
   " " +
   sample_tuple[1] +
   " " +
   sample_tuple[2] +
   " " +
   sample_tuple[3];
console.log("The value of tuple elements is " + values);

输出

上述代码将产生以下输出 −

The value of tuple elements is 10 true TutorialsPoint 90

示例2 (元组数组)

在这个例子中，我们已经定义了元组的类型。之后，我们创建了array_tuple类型的数组，其中包含多个tuple。

用户可以看到我们如何从一个特定的元组中获取数值，就像二维数组一样。

//  defining the type for the tuple array

//  tuple is of length two containing the number and boolean value
type array_tuple = [number, boolean];

//  defining the array of tuple
let array: array_tuple[] = [
   [1, true],
   [2, false],
   [3, false],
   [4, true],
];

// accessing the values from the different index of tuple
console.log("The value of index 1 is " + array[1]);
console.log("The value of index 2 is " + array[2]);
console.log(
   "The value of index 3 and 2nd index in the nested array is " + array[3][1]
);

在编译时，它将生成以下JavaScript代码 −

//  defining the array of tuple
var array = [
   [1, true],
   [2, false],
   [3, false],
   [4, true],
];

// accessing the values from the different index of tuple
console.log("The value of index 1 is " + array[1]);
console.log("The value of index 2 is " + array[2]);
console.log("The value of index 3 and 2nd index in the nested array is " + array[3][1]);

输出

上述代码将产生以下输出 −

The value of index 1 is 2,false
The value of index 2 is 3,false
The value of index 3 and 2nd index in the nested array is true

示例 3 (向元组添加值)

在下面的例子中，我们已经创建了布尔和数字类型的元组。在初始化元组时，我们不能添加比元组类型中定义的更多的值。在初始化元组时，我们需要按照元组类型中定义的相同顺序用一个数字和一个布尔值来初始化它。

之后，为了向元组添加值，我们可以使用push()方法，就像下面的例子中使用的那样。

// creating the tuple of type number and boolean
var tuple: [boolean, number] = [true, 20];

// adding only a boolean value
tuple.push(false);

// pushing only number values
tuple.push(99);

// pushing number and boolean both
tuple.push(101, true);
console.log("The values of the tuple is " + tuple);

// tuple doesn't allow to push the elements of string type as 

// it can contain an only number and boolean values

// tuple.push("hi");

在编译时，它将生成以下JavaScript代码 −

// creating the tuple of type number and boolean
var tuple = [true, 20];

// adding only a boolean value
tuple.push(false);

// pushing only number values
tuple.push(99);

// pushing number and boolean both
tuple.push(101, true);
console.log("The values of the tuple is " + tuple);

// tuple doesn't allow to push the elements of string type as

// it can contain an only number and boolean values

// tuple.push("hi");

输出

上述代码将产生以下输出 −

The values of the tuple is true,20,false,99,101,true

示例 4 (从函数返回元组)

在这个例子中，我们创建了函数getIntAndString()，它返回数字和字符串类型的元组。元组的一个主要好处是，它可以用来从函数中返回多个值。

另外，用户可以通过下面的例子学习将元组解构为另一个从函数返回的元组。

//  function, which returns the tuple of type number and string
function getIntAndString(): [number, string] {
  return [10, "TutorialsPoint!"];
}

// stored returned tuple from the function
let tuple: [number, string] = getIntAndString();

console.log("The value of the tuple is " + tuple);

在编译时，它将生成以下JavaScript代码 −

//  function, which returns the tuple of type number and string
function getIntAndString() {
   return [10, "TutorialsPoint!"];
}

// stored returned tuple from the function
var tuple = getIntAndString();
console.log("The value of the tuple is " + tuple);

输出

上述代码将产生以下输出 —

The value of the tuple is 10,TutorialsPoint!

在本教程中，我们已经了解了元组的类型。此外，我们还通过不同的例子来展示元组的不同用途。我们学会了创建一个元组，从元组中访问元素，创建元组的数组，以及使用元组从函数中返回多个值。