TypeScript 元组类型
TypeScript 语言中，数组中的元素一般只能是由相同数据类型组成（any[] 除外），如果我们想要存储不同类型的元素，则可以使用元组。
TypeScript 中的元组（Tuple）从外形上来看和数组相差不多， 但是元组中允许存储不同类型的元素，数组中的元素必须是相同的类型。
声明元组
声明元组的语法：
let tuple_name = [value1,value2,value3,…value n]示例： 【TypeScript 元组类型】例如声明一个由数字类型、字符串类型、布尔类型构成的元素：
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 ]动手练习
- 请定义一个元组，这个元组中第一个元素为字符串类型，第二个元素为布尔类型，第三个元素为可选的数字类型？
- 请将下面这个元组中第三个元素的值修改为 “可乐”？
let mytup: [string, number, string, boolean] = ['牛肉', 100, '雪碧', true];
链接：https://www.9xkd.com/
推荐阅读
- typeScript入门基础介绍
- mysql|InnoDB数据页结构
- 接口|axios接口报错-参数类型错误解决
- 带你了解类型系统以及flow和typescript的基本使用
- 史前艺术的审美类型「清央美术」
- 认识图表
- MySQL|MySQL 5.7参考手册_11.1 数据类型概览
- 人的四种气质类型和四种血型性格辨析
- 二、Redis的五种常用数据类型
- js类型转换和内存