• 150632

    文章

  • 1244

    评论

  • 13

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

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/


695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


发表评论

电子邮件地址不会被公开。 必填项已用*标注

自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客