🌟 写在前面

专栏介绍：
凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下 Vue框架背后的故事、尤大大对前端生态是这样看的，随着 Vue 框架不断的被认可，现如今的 Vue 框架已经是前端工程师必备的技能了，记得尤大大开发 Vue 的初衷，为了让自己的开发工作更加便捷，也希望这个框架能让更多人的开发工作变得轻松；现如今 Vue 框架做到了，尤大大做到了，当然在 20 年的 9 月 18 日，Vue 又向前端同僚们报告了一次大的突破 Vue3.0 版本正式发布！如今已经过去了两年多的时间，更多的公司选择了Vue3技术，所以凉哥也在这个时候为大家出这份专栏，本专栏将帮助大家掌握Vue3+TS技术，提升自己竞争力！

温故知新：
上篇文章中我们了解了TS中的一些简单类型的讲解，对我们变量的还有函数的一些类型指定能够让我们在项目开发中规避很多以后可能因为因为转变造成的一些坑，除了我们的一些简单类型呢，其实在我们的TS中还有一些比较常用的复杂类型，这篇文章我们就来一期学习几个比较常用的复杂类型吧！

🌟 对象类型

object 故名思意他就是我们对象类型，但是本类型在TS中运用的并不多，为什么呢？主要还是因为我在JS中的对象非常广泛，我们看下面代码中的例子，我们声明一个变量a指定类型为object，我们赋值时发现赋值一个空对象是可以的，当我们赋值一个函数竟然也是可以的，赋值一个空数组竟然也可以，所以我们这种类型的限制其实意义并不大；

let a:object

a={}
a=function(){}
a=[]

其实我们的开发中比较常用的是下面这种，我们变量后面指定类型为一个花括号，let a : {}他一样指定的类型就是一个对象，但是有啥区别么？区别很大，看下面代码我们可以在对象中去指定属性和属性的类型；如果我们制定了属性，我们再次进行赋值的时候格式就要与指定的类型保持一致；看下面代码：

let a:{name:string,yardageAge:number}

a={} //报错
a={name:'几何'} //报错
a={name:'几何',yardageAge:3} 
a={name:'几何',yardageAge:3,penName:'心凉'} //报错

我们可以看到上面我们为变量a指定为对象类型并且两个属性姓名、码龄分别为字符串跟数字格式，下面赋值中属性少了也不行多一个也不行，但是这样在我们开发中如果我们遇到一个比如我们的码龄yardageAge属性就是会出现没有的时候怎么办呢？在这里我们可以在属性名的后面加上?是这个属性是可有可无的，我们看下面代码有无yardageAge属性都不会报错。

let a:{name:string,yardageAge?:number}

a={} //报错
a={name:'几何'}
a={name:'几何',yardageAge:3} 
a={name:'几何',yardageAge:3,penName:'心凉'} //报错

我们接着考虑上面的情况，我们说到了如果对象中有字段不确定有无我们可以通过在属性名的后面加上?，那其实在开发中还有一种情况就是我们在一个对象中只知道一个字段，其余的都是可有可无并且不知道有多少个字段，所以我们TS还未我们提供了[prop:string]:any，也就是说在我们对象指定类型的时候添加上它就意味着我们任意字段任意类型的的添加，我们来看一下例子：我们可以添加任意类型的属性。

let a: { name: string, [prop: string]: any }

a = {}//报错
a = { name: '几何' }
a = { name: '几何', age: 18, a: true }

🌟 函数结构类型

跟我们上面的对象类型声明类似，我们可以为变量声明一个函数类型很简单就是 let a : function 但是也是没有意义的，我们的如果期望通过函数的类型指定我们函数的参数和函数的返回值类型，我们上篇文章中讲解到了，但是如果直接在变量声明的时候直接赋予函数结构的类型指定呢，我们看下面的代码：声明变量a然后指定的hi函数类型并且接收两个参数均为数字类型，返回的值也是数字类型。我们鼠标悬浮到形参上也能看到展示的是number类型。

let a: (num1: number, num2: number) => number

a = function (a, b) {
  // return a + 'b'//报错
  return a + b
}

🌟 数组类型

其实提及到数组类型，我们可以想一下我们在JS的开发中我们的数组中什么类型的内容都可以放，比如我们的字符串、数字、布尔、对象等等类型的数据，其实我们可以为数组指定一项内容，比如下面的我们的可以指定变量的类型为数组并且是只为字符串类型的数据，或者只为数字类型内容的数组：

let a: string[]
a = ['q', 'w', 'z']
a = [true, 33]//报错


let b: number[]
b = [2, 4, 5]
b = ['aa', false]//报错


//等同于上方
let c: Array<number>
c = [2, 4, 5]
c = ['aa', false]//报错

可以通过上面的代码发现我们数组类型的定义方式有两种，一种是通过类型[]还有一种是通过Array<类型>都是可以实现相同的类型指定，如果在第二种中的类型我们设置为any呢也是表示任意类型的数组不过我们不建议使用any，原因上篇文章中我们讲解过了，如果想了解可以回顾一下上一篇文章哦！

🌟 元组

何为元组？大家都知道在我们的数组中元素的个数是可以变化的，那么元组呢其实就可以理解为有了个数限制的数组，或多或少都不行，限制长度的数组，元组的效率是高于数组的，因为长度固定不可变所以效率会高一些；如果需求中我们可以知道数组的长度我们尽量去使用元素，我们下面来看一下他的使用吧，我们声明变量a，指定类型为元组并且是两个数据 一个是string一个是number：

let a: [string, number]

a = ['几何', 3]
a = ['几何']//报错
a = ['几何', '心凉']//报错
a = [3, '几何']//报错

🌟 枚举

这个可能作为前端工程师的我们前面在JS开发过程中，基本上没有涉及到过，我们现在了解一下枚举是做什么的？比如我们我们的用户信息中，有姓名、年龄、角色等等其他很多字段，我们都知道我们的角色在系统中肯定是固定的一批角色名称，可能是比如 领导、管理员、检察员、班导、学生等等，但是在系统中他也一定是固定的定义好的，但是大家去想一下我们在用户信息中会直接存储这些文字么？字符串其实在存储的时候是比较占内容的，所以一般我们会通过指定一些数字来代替，比如管理员=》1，领导=》0，检查员=》3，这种后面的数字编号来关联进行存储，但是项目中又不是我们自己在用，我自己知道还不行，还要让别人用的时候知道对应关系，这时候我们就可以通过定义一个枚举类来进行关联；我们可以通过下面代码来进行理解，比如我们来声明一个变量a，里面有三个字段，一个name，一个是age，还有一个是role角色，我们的角色字段的类型我们就引用定义的枚举类roleList；我们看一下使用方式：

//通过enum来定义枚举类roleList
enum roleList {
  '领导' = 0,
  '管理员' = 1,
  '检察员' = 3,
}

let a: { name: string, age: number, role: roleList }

a = { name: '几何', age: 20, role: roleList.领导 }

当我们鼠标悬浮到领导上会出现我们枚举类中的赋值 0，其实我们在上面定义枚举类的时候进行了赋值，其实我们完全可以不用赋值，枚举类也会为我们按照填写顺序进行赋值，小伙伴可以讲赋值删掉然后尝试一下！

🌟 类型别名

let a: 1 | 2 | 3 | 4 | 5 | 6

let b: 1 | 2 | 3 | 4 | 5 | 6

我们目前已经掌握了一些类型的指定，但是有时候我们想复用类型的指定就比较麻烦，如上面代码中我们变量a是1-6的数字类型，变量b呢也是如此，我们还需要复制一份完全相同的类型指定，有没有其他的办法呢？其实我们可以通过类型别名为类型的指定规则添加上一个名称，然后通过名称来为变量设置对应的类型：通过type设定类型别名

type myType = 1 | 2 | 3 | 4 | 5 | 6
let a: myType
let b: myType

a = 1
a = 9//报错

b = 9//报错
b = 3

🌟 写在最后

我们通过两篇文章来讲解了我们TS中常用的类型，包括我们对变量的、函数的、对象的、数组等等，各种类型的指定呢和联合使用会比较枯燥，但是还是希望大家能够按照案例将代码敲一敲，因为我们后面还会跟这些类型一直打交道，当然也会有一些类型的高级用法，我们后面涉及到的时候会为大家啊讲解，各位小伙伴让我们 let’s coding！

本期推荐 点击这里查看详情

✨$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$