07. TypeScript 中元组的使用和类型约束

TypeScript 中提供了元组的概念,这个概念是JavaScript中没有的。但是不要慌,其实元组在开发中并不常用,也可能是我的精力还不够。一般只在数据源是CVS这种文件的时候,会使用元组。其实你可以把元组看成数组的一个加强,它可以更好的控制或者说规范里边的类型。

元组的基本应用

我们先来看一个数组和这个数组注解的缺点,比如我们有一个小姐姐数组,数组中有姓名、职业和年龄,代码如下:

const xiaojiejie = ["xiaohong", "teacher", 28];

这时候把鼠标放到xiaojiejie变量上面,可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解,代码如下:

const xiaojiejie: (string | number)[] = ["xiaohong", "teacher", 28];

这时候你已经增加了代码注解,但是这并不能很好的限制,比如我们把代码改成下面的样子,TypeScript依然不会报错。

const xiaojiejie: (string | number)[] = ["xiaohong", 28, "teacher"];

我们只是简单的把数组中的位置调换了一下,但是TypeScript并不能发现问题,这时候我们需要一个更强大的类型,来解决这个问题,这就是元组。

元组和数组类似,但是类型注解时会不一样。

const xiaojiejie: [string, string, number] = ["xiaohong", "teacher", 28];

这时候我们就把数组中的每个元素类型的位置给固定住了,这就叫做元组。

元组的使用

目前我的工作中不经常使用元组,因为如果要使用元组,完全可以使用对象的形式来代替,但是如果你维护老系统,你会发现有一种数据源时CSV,这种文件提供的就是用逗号隔开的,如果要严谨的编程就需要用到元组了。例如我们有这样一组由CSV提供的(注意这里只是模拟数据)。

"xiaohong", "teacher", 28;
"xiaoli", "teacher", 18;
"xiaofang", "teacher", 25;

如果数据源得到的数据是这样的,你就可以使用元组了。

const xiaojiejies: [string, string, number][] = [
  ["xiaohong", "teacher", 28],
  ["xiaoli", "teacher", 18],
  ["xiaofang", "teacher", 25],
];

这节你要学会的的主要内容是,你要搞清楚元组和数组的区别,在理解后能在项目中适当的时候使用不同的类型。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 07. TypeScript 中元组的使用和类型约束

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们