TypeScript中数组类型的定义
码字不易,有帮助的同学希望能关注一下我的微信公众号: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资料
相关文章
- [Typescript] Create a Union of Strings with All Possible Permutations of Two Unions
- [Typescript] 107. Medium - FindIndex
- [Typescript] Get a TypeScript package ready for release to NPM
- [TypeScript] Make typescript stick - 2
- [Typescript] asserts tips
- [Typescript] Use the Optional Chaining Operator in TypeScript
- [Typescript] Simplify iteration of custom data structures in TypeScript with iterators (backwards iteration with for ... of.. loop)
- [TypeScript] Type check JavaScript files using JSDoc and Typescript 2.5
- [Typescript] Defining exclusive properties with TypeScript
- [Typescript] 94. Hard - Get Optional
- [Typescript] 41. Medium - IsUnion
- [Typescript] 38. Medium - Diff
- [Typescript] Convert a js project to typescript
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [React Typescript 2022] Type a Radio Button Component in React using TypeScript
- [Typescript] Make your optional fields required in TypeScript
- [Typescript] Exclude Properties from a Type in TypeScript (Omit)
- [TypeScript] Dynamically Allocate Function Types with Conditional Types in TypeScript
- [Typescript] Improve Readability with TypeScript Numeric Separators when working with Large Numbers
- [TypeScript] Represent Non-Primitive Types with TypeScript’s object Type
- [TypeScript] Typescript Interfaces vs Aliases Union & Intersection Types
- 能否直接在Visual Studio Code里查看TypeScript的数据类型定义
- TypeScript里数组foreach和map操作的区别