解释 TypeScript 中的元组类型
我们将学习 TypeScript 中的元组类型。在 JavaScript 中，数组可以包含不同数据类型的元素。不过，由于 TypeScript 是 JavaScript 和严格类型语言的超集，因此 TypeScript 数组只能包含单一类型的元素。
因此，元组允许我们将不同数据类型的元素存储在 TypeScript 数组中。此外，当我们将元素存储在元组中时，元素的顺序很重要；否则，TypeScript 编译器在编译代码时可能会生成错误。
语法
您可以按照以下语法在 TypeScript 中定义元组。
let sample_tuple: [string, number, data_types of other variable ...]; sample_tuple = ['TypeScript', 95, other values according to data types];
在上面的语法中，用户可以看到我们需要定义每个索引处要放置的值的数据类型。它可以包含用户想要存储的多个元素，但需要为每个索引定义类型。
示例 1(定义元组)
在下面的示例中，我们创建了长度为 4 的元组。元组在第一个索引处包含数字，在第二个索引处包含布尔值，在第三和第四个索引处分别包含字符串和数字。
用户可以注释掉最后给出的代码并尝试编译它，看看当我们在元组中添加更多元素或以随机顺序添加元素时会给出什么错误。
// 定义长度为 4 的元组
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);
编译后，它将生成以下 JavaScript 代码 -
// 定义长度为四的元组
var sample_tuple = [
10,
true,
"TutorialsPoint",
90,
];
var values = sample_tuple[0] +
" " +
sample_tuple[1] +
" " +
sample_tuple[2] +
" " +
sample_tuple[3];
console.log("元组元素的值为 " + values);
输出
上述代码将产生以下输出 −
元组元素的值为 10 true TutorialsPoint 90
示例 2(元组数组)
在此示例中，我们定义了元组的类型。之后，我们创建了 array_tuple 类型的数组，其中包含多个元组。
用户可以看到我们如何从特定元组(如二维数组)访问值。
// 定义元组数组的类型
// tuple 的长度为 2，包含数字和布尔值
type array_tuple = [number, boolean];
// 定义元组数组
let array: array_tuple[] = [
[1, true],
[2, false],
[3, false],
[4, true],
];
// 从元组的不同索引访问值
console.log("索引 1 的值为 " + array[1]);
console.log("索引 2 的值为 " + array[2]);
console.log(
"嵌套数组中索引 3 和第 2 个索引的值为 " + array[3][1]
);
编译后，它负责生成以下 JavaScript 代码 -
// 定义元组数组
var array = [
[1, true],
[2, false],
[3, false],
[4, true],
];
// 从元组的不同索引访问值
console.log("索引 1 的值为 " + array[1]);
console.log("索引 2 的值为 " + array[2]);
console.log("嵌套数组中索引 3 和第 2 个索引的值为 " + array[3][1]);
输出
上述代码将产生以下输出 −
索引 1 的值为 2,false 索引 2 的值为 3,false 嵌套数组中索引 3 和第 2 个索引的值为 true
示例 3(向元组添加值)
在下面的示例中，我们创建了布尔和数字类型的元组。在初始化元组时，我们不能添加比元组类型中定义的更多的值。在初始化元组时，我们需要用一个数字和一个布尔值按照元组类型中定义的顺序对其进行初始化。
之后，要向元组添加值，我们可以使用 push() 方法，如下例所示。
// 创建数字和布尔类型的元组
var tuple: [boolean, number] = [true, 20];
// 仅添加布尔值
tuple.push(false);
// 仅推送数字值
tuple.push(99);
// 推送数字和布尔值
tuple.push(101, true);
console.log("元组的值是 " + tuple);
// tuple 不允许推送字符串类型的元素，因为
// 它只能包含数字和布尔值
// tuple.push("hi");
编译后，它负责生成以下 JavaScript 代码 -
// 创建数字和布尔类型的 tuple
var tuple = [true, 20];
// 仅添加布尔值
tuple.push(false);
// 仅推送数字值
tuple.push(99);
// 同时推送数字和布尔值
tuple.push(101, true);
console.log("元组的值是 " + tuple);
// tuple 不允许推送字符串类型的元素，因为
// 它只能包含数字和布尔值
// tuple.push("hi");
输出
上述代码将产生以下输出 −
tuple 的值是 true,20,false,99,101,true
示例 4(从函数返回 Tuple)
在此示例中，我们创建了函数 getIntAndString()，它返回数字和字符串类型的 Tuple。元组的一个主要优点是它可用于从函数返回多个值。
此外，用户可以通过以下示例学习如何将元组析构为从函数返回的另一个元组。
// 函数，返回数字和字符串类型的元组
function getIntAndString(): [number, string] {
return [10, "TutorialsPoint!"];
}
// 存储从函数返回的元组
let tuple: [number, string] = getIntAndString();
console.log("元组的值为 " + tuple);
编译后，将生成以下 JavaScript 代码 -
// 函数，返回number类型和string类型的元组
function getIntAndString() {
return [10, "TutorialsPoint!"];
}
// 存储函数返回的元组
var tuple = getIntAndString();
console.log("元组的值为 " + tuple);
输出
上述代码将产生以下输出 −
元组的值为 10,TutorialsPoint!
我们在本教程中了解了元组类型。此外，我们还采用了不同的示例来演示元组的不同用途。我们学习了如何创建元组、从元组中访问元素、创建元组的数组以及使用元组从函数返回多个值。
