关于typescript:TypeScript-元组类型

TypeScript 语言中，数组中的元素个别只能是由雷同数据类型组成（any[] 除外），如果咱们想要存储不同类型的元素，则能够应用元组。

TypeScript 中的元组（Tuple）从形状上来看和数组相差不多，然而元组中容许存储不同类型的元素，数组中的元素必须是雷同的类型。

申明元组

申明元组的语法：

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

示例：

例如申明一个由数字类型、字符串类型、布尔类型形成的元素：

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

编译成 JavaScript 代码：

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

输入：

[1, 'a', true]

这样申明的元组，元素的类型必须一一对应，例如左边中括号内第一个元素必须是 number 类型的数据，第二个元素必须是 string 类型的数据，第三个必须是 boolean 类型，如果没有一一对应，则会报错。

示例：

下图中是一段示例代码，当元素与对应地位的数据类型没有一一对应，会产生谬误：

拜访元组

和数组一样，元组中元素也能够应用索引来拜访，元组中的索引值同样从 0 开始，第一个元素为 0，第二个为 1，以此类推第 n 个为 n-1。

示例：

通过索引拜访一个元素时，能够失去这个元素的值：

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

编译为 JavaScript 代码：

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

输入：

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

须要留神的是，在拜访元组中的元素时，不能够越界拜访。例如下面数组中只有三个元素，那么如果咱们拜访索引为 3 的元素：

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

输入：

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

可选元素类型

咱们在申明一个元组时，能够在元素类型后缀一个问号 ？ 来阐明元素是可选的。

示例：

上面元组中，第二个元素和第三个元素为可选元素：

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

有一点很重要，就是可选元素类型必须在必选元素类型前面。也就是说，如果一个元素类型前面后缀了一个问号 ？，那么这个元素之后的所有元素类型都要后缀一个问号。

示例：

下图中第二个元素为可选元素，第三个元素如果不是可选元素，就会导致报错：

元组操作

TypeScript 中元组也反对各种操作，例如咱们能够应用 push() 办法向元组增加元素，应用 pop() 办法移除元组中的最初一个元素。其实应用起来就和数组中相似。

示例：

首先申明一个元组：

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

而后咱们能够应用 push() 办法向这个元组中增加新的元素（倡议最好不要这样做），如下所示：

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

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

也能够应用 pop() 办法删除元组中最初一个元素：

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

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

更新或批改元组元素

元组是可变的，这示意咱们能够更新或更改元组中的元素值，要批改元组中的元素，须要用到索引和赋值运算符 =。

示例：

例如将元组中索引为 1 的元素值批改为 ’aaa’：

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

编译成 JavaScript 代码：

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

输入：

[7, 'aaa']

解构元组

咱们能够解构元组中的元素，例如：

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

编译成 JavaScript 代码：

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

输入：

7
summer
true

如果咱们不须要解构元组中的全副元素，就能够像上面这样解构：

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

编译成 JavaScript 代码：

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

输入：

7
['summer', true]

入手练习

1. 请定义一个元组，这个元组中第一个元素为字符串类型，第二个元素为布尔类型，第三个元素为可选的数字类型？
2. 请将上面这个元组中第三个元素的值批改为“可乐”？

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

链接：https://www.9xkd.com/