首页 前端 正文

TypeScript 元组


这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战

元组

学习一个和数组类似概念的元组。

alex 中每一项都会被推论为 string 和 number 的联合类型。

// 记录一个人的姓名、性别和年龄
let alex = ['Alex', 'male', 20];
let lucy = ['Lucy', 'female', 18];


这样做有什么问题呢?我们在取用 alex 中的某一项的时候,只能够使用数字和string 中的共用的属性或者方法。

其次我们能够确定第 0 项,一定是 string,第二项,一定是 number。可是这里无法使用他们独有的属性和方法。

这个时候,我们就可以使用元组,来实现:

元组的定义很简单,使用方括号,然后将其中每一项的类型都定义出来。这样的话,我们就能确定第 0 项和第 2 项的类型了。

// 记录一个人的姓名、性别和年龄
let alex: [string, string, number] = ['Alex', 'male', 20];
let lucy: [string, string, number] = ['Lucy', 'female', 18];

alex[0].length;
alex[2].toFixed(2);

// 我们在给元组某一项赋值的时候,只能赋值这一项的类型。比如,第 0 项是 string,那么我们就无法赋值为 number
alex[0] = 'Alexa';

// 报错,不能将类型“20”分配给类型“string”
alex[0] = 20;

// 如果我们想赋值一个下标超出了元组范围的话,某一项的话,那么这一项就可以既赋值为 string,又可以赋值为 number,但是无法赋值为其他类型
alex[3] = 3;

// 另外,我们直接给 alex 赋值的时候,不能够只赋值其中某一项,必须把这三项全部赋值给他才行,下面这样的话,就会报错
alex = ['Alex', 'male'];


最后我们可以把元组定义成类型别名,定义出类型别名之后,这个类型别名可以直接应用到 alex 和 lucy。

type Person = [string, string, number];

// 记录一个人的姓名、性别和年龄
let alex: Person = ['Alex', 'male', 20];
let lucy: Person = ['Lucy', 'female', 18];


元组 VS 数组

元组数组
每一项可以是不同的类型每一项都是同一种类型
有预定义的长度没有长度限制
用于表示一个结果用于表示一个列表

习题-为变量 animal 声明合适的类型

const animal: ______ = [
    'panda',
    10,
    false
];


A. number | string | boolean

B. (number | string | boolean ) []

C. [string, number, boolean]

D. { number | string | boolean } []

答案:C

解析

数组各个元素必须相同,元组各个元素可以不相同。变量 animal 被赋值为元组,因此变量 animal 应该声明为元组类型最合适。

  • A - 本选项的联合类型中均为基本数据类型。故错误。

  • B - 本选项为数组类型,数组的元素是联合类型,且联合类型包含了元组各元素的类型。本选项是正确的,但不是最合适的。

  • C - 本选项为元组类型。且元素结构类型顺序与赋值元组元素的结构类型顺序相符,故本选项最合适。

  • D - 本选项是错误格式。

资料-越界的元素

在 TypeScript 的基础类型中,元组( Tuple )表示一个 已知数量类型 的数组。我们来看如下代码:

let someList: [string, number];

// 初始化赋值
someList = ['Apple', 18]; // ok

someList = ['Apple', 'BlackBerry']; // error


看到上述代码会不会有疑问,那当我们需要扩展 someList 的值的时候会怎么样呢?

let someList: [string, number];

// 初始化赋值
someList = ['Apple', 18]; // ok

someList = ['Apple', 'BlackBerry']; // error Type 'string' is not assignable to type 'number'.

someList = [['Apple', 18], 'BlackBerry']; //error Type '(string | number)[]' is not assignable to type 'string'. Type 'string' is not assignable to type 'number'.

someList[3] = 'BlackBerry' // ok

someList[4] = 19 // ok

someList[5] = false // error Type 'false' is not assignable to type 'string | number'.


从上述代码我们可以得出以下结论:

  • 元组初始化赋值时,值的类型和数量必须与声明的时候一一对应

  • 元组允许手动给跨界的元素复制,此时值类型为元组声明时类型的联合类型

    原文:https://juejin.cn/post/7030245353299378213

打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/3864.html

相关推荐

什么是gRPC

什么是gRPC

这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战元组学习一个和数组类似概念的元组。alex 中每一项都会被推论...

前端 2022.08.19 0 1393

什么是前端工程化?

什么是前端工程化?

这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战元组学习一个和数组类似概念的元组。alex 中每一项都会被推论...

前端 2022.08.19 0 1202

二维码扫码登录的原理是什么?

二维码扫码登录的原理是什么?

这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战元组学习一个和数组类似概念的元组。alex 中每一项都会被推论...

前端 2022.08.19 0 1047

如何快速切换和管理node版本

如何快速切换和管理node版本

这是我参与11月更文挑战的第14天,活动详情查看:2021最后一次更文挑战元组学习一个和数组类似概念的元组。alex 中每一项都会被推论...

前端 2022.08.18 0 1358

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站