TypeScript中数组类型的定义

news/2024/5/20 4:36:19 标签: 前端, ts, js

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

在这里插入图片描述

这期学习一下 TypeScript 中的数组类型,一般的数组类型定义我们已经接触过了,只是没有单独拿出来讲,所以先来复习一下。

一般数组类型的定义

现在我们可以定义一个最简单的数组类型,比如就是数字类型,那么就可以这么写:

const numberArr = [1, 2, 3];

这时候你把鼠标放在numberArr上面可以看出,这个数组的类型就是 number 类型。这是 TypeScript 通过类型推断自己推断出来的。 如果你要显示的注解,也非常简单,可以写成下面的形式。

const numberArr: number[] = [1, 2, 3];

同样道理,如果你的数组各项是字符串,你就可以写成这样。

const stringArr: string[] = ["a", "b", "c"];

也就是说你可以定义任意类型的数组,比如是undefined

const undefinedArr: undefined[] = [undefined, undefined];

这时候问题来了,如果数组中有多种类型,比如既有数字类型,又有字符串的时候。那我们要如何定义那。 很简单,只要加个(),然后在里边加上|就可以了,具体看代码。

const arr: (number | string)[] = [1, "string", 2];

数组简单类型的定义就是这样了,并不难。

数组中对象类型的定义

如果你作过一些项目,你就会知道真实的项目中数组中一定会有对象的出现。那对于这类带有对象的数组定义就稍微麻烦点了。 比如现在我们要定义一个有很多小姐姐的数组,每一个小姐姐都是一个对象。这是的定义就编程了这样。

const xiaoJieJies: { name: string, age: Number }[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

这种形式看起来比较麻烦,而且如果有同样类型的数组,写代码也比较麻烦,TypeScript 为我们准备了一个概念,叫做类型别名(type alias)。

比如刚才的代码,就可以定义一个类型别名,定义别名的时候要以type关键字开始。现在定义一个Lady的别名。

type Lady = { name: string, age: Number };

有了这样的类型别名以后哦,就可以把上面的代码改为下面的形式了。

type Lady = { name: string, age: Number };

const xiaoJieJies: Lady[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

这样定义是完全起作用的,比如我们下面在对象里再加入一个属性,这时候编译器就会直接给我们报错了。

这时候有的小伙伴就会问了,我用类进行定义可以吗?答案是可以的,比如我们定义一个Madam的类,然后用这个类来限制数组的类型也是可以的。

class Madam {
  name: string;
  age: number;
}

const xiaoJieJies: Madam[] = [
  { name: "刘英", age: 18 },
  { name: "谢大脚", age: 28 },
];

可以看到结果,我们这么写也是完全可以的。

这就是这节课的所有内容了,希望小伙伴们可以学会,并动手练习一下。


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

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

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


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

相关文章

day6 os模块

OS模块 提供对操作系统进行调用的接口 (1)os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 >>> os.getcwd() 获取Python当前脚本工作的目录路径  /home/zhuzhu (2)os.chdir("dirn…

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

码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取。 TypeScript 中提供了元组的概念,这个概念是JavaScript中没有的。但是不要慌张,其实元组在开发中并不常用&#xff0…

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…