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

news/2024/5/20 0:50:13 标签: 前端, ts, js

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。

在这里插入图片描述

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

元组的基本应用

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

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

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

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

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

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

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

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

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

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

元组的使用

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

"dajiao", "teacher", 28;
"liuying", "teacher", 18;
"cuihua", "teacher", 25;

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

const xiaojiejies: [string, string, number][] = [
  ["dajiao", "teacher", 28],
  ["liuying", "teacher", 18],
  ["cuihua", "teacher", 25],
];

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


有微信小程序课设、毕设需求联系个人QQ:505417246

关注下面微信公众号,可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号,请大家多多关注,谢谢

关注公众号后,回复前端面试题,领取大量前端面试题汇总pdf资料
在这里插入图片描述


http://www.niftyadmin.cn/n/1576439.html

相关文章

mysql改动默认的环境的字符集为utf-8

mysql改动环境的默认字符集为utf-8(当然你也能够设置成别的,国际点还是utf-8好) 假设不把mysql字符集统一下。后面还是有点麻烦的 首先得在服务里关掉mysql的服务(一定要先关掉mysql服务再改动) 然后到你的mysql的安装路径。假设是自己定义就找到自己定义的路…

在vue+node环境下实现对数据以excel形式导出并下载

首先业务需求,就是在后台管理系统中可以查询当前数据表,现在要加一个功能,可以把当前查询到的数据以excel形式导出,并供管理员下载。 需求明确之后,我们就要进行功能的实现,这个需求主要内容在后端接口的编…

关于事件冒泡和事件代理,看这一篇就够了!(上篇)

Hello,最近又准备面试了,通过前几次面试经历,有很深刻的感受,一定要注重基础,注重基础,注重基础! 不要觉得自己用了一些轮子写了一些看起来很不错的项目和功能,就一定能找到好工作。…

Java Type详解

2019独角兽企业重金招聘Python工程师标准>>> 错误可分为两种:编译时错误与运行时错误。编译时错误在编译时可以发现并排除,而运行时错误具有很大的不确定性,在程序运行时才能发现,造成的后果可能是灾难性的。 泛型的引…

关于事件冒泡和事件代理,看这一篇就够了!(下篇)

接着上篇的节奏走,上篇文章我们介绍了事件冒泡的过程及解决方法。 这期带来事件代理~~ 事件代理这个名词其实经常出现,在面试的时候,有一个高频问题,假如现在有需求,需要操作10000个DOM节点,你会怎么做&a…

learngitbranching.js过关记录

为什么80%的码农都做不了架构师?>>> http://learngitbranching.js.org/是个学习git的网站,以游戏的模式一步步教会新手如何使用git,本文是记录我在玩的过程中,复习和学习到的git命令。 --------分割线-------- 提交&a…

JS迭代器函数大全

有时,我们需要迭代数组中的元素。可以使用循环语句来处理,例如for语句。 JavaScript内置了很多数组可用的迭代方法。 我们先写一点基础代码: function isEven(x) {// 如果x是2的倍数,就返回trueconsole.log(x);return x % 2 0; } let nu…

一个CPO的心得分享:搭建风控系统道路上踩过的坑04-风险分析

风控系统和大部分的产品项目一样,最终需要对领导层汇报这个项目为公司带来了什么价值,这是评估项目成功与否的要素; 另外是哪里做的不够好,如果改善了能带来更多的价值,给出了预期才有后续资源的补充,整个项…