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(定义元组)

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

用户可以注释掉最后给出的代码,并尝试编译它,看看当我们在元组中添加更多元素或以随机顺序添加元素时会发生什么错误。

// 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);

编译后,它将生成以下 JavaScript 代码:

// 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` 类型的数组,其中包含多个元组。

用户可以看到我们如何像访问二维数组一样访问特定元组中的值。

//  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!

在本教程中,我们学习了元组类型。我们还通过不同的例子演示了元组的不同用法。我们学习了如何创建元组、访问元组中的元素、创建元组数组以及使用元组从函数返回多个值。

更新于:2023年1月17日

263 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.