🌟 写在前面

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

温故知新：
上篇文章带大家熟悉了TS中的类型声明，一个是变量中，一个是函数中的参数与返回值的类型声明，通过类型的校验我们都知道这样对我们的大型项目的搭建会更加严谨，减少我们因为类型产生一系列的bug，我们从学习TS到现在好像我们接触了 数字、字符串、布尔三种类型，那还有没有其他的类型呢？其实TS中还有不少其他的类型，我们本篇文章就来带大家学习一些其他TS中的类型。

🌟 TS中的简单类型

字面量声明类型

let a : '几何'

上面这种写法就是字面量声明类型，意思呢就是我声明了一个变量a，类型是字面量，作用就是限制变量的值就是字面量的值，也就是说这里的a我们进行赋值的时候只能是a=几何，否则就会报错；

let a : '几何'a='心凉'//报错
a=true//报错
a=0//报错
a='几何'

这样的话其实我们的字面量声明类型有点类似于JS常量的感觉了，不能去改变它的值，其实差不太多，可以这样粗暴的理解，那我们要这种有何用呢？其实我们的常用方式是下面这种，我们来看我们字面量不仅仅可以是一个，还可以是多个，比如下面的代码中我们用了一个 | 符号，他的意思是或者，看下面的代码，意思就是说我们的类型是字面量几何或者字面量心凉，那我们赋值的话可以是几何可以是心凉，其他的就会报错；

let a : '几何' | '心凉'a='心凉'
a=true//报错
a=0//报错
a='几何'

联合类型

另外我们的 | 是支持类型的，下面就来展示他最大的作用吧~！我们要知道哈，前面我们说到的类型一个变量中只能有一个类型是不是有点过于苛刻，那如果我们想让一个变量拥有更多的类型的条件我们如何做呢？这是不是就能联合我们刚刚使用的 | 符号呢？我们的 | 符号不仅仅可以链接字面量，还可以链接类型，这种就称之为联合类型联合类型，就如下面这样：

let a: string | boolean | '几何'a = '心凉'
a = true
a = 0//报错
a = '几何'

any

下面给大家介绍的是我们的any类型，这个类型是什么呢？我们现在看一段代码，下面的代码中我们声明了变量a并声明类型为any，然后我们在下面为a赋值的时候，任何类型的赋值都么有报错。

let a: anya = '心凉'
a = true
a = 0
a = '几何'

所以any表示的就是任意类型，类似于我们的JS一样的效果，所以我们可以理解为一个变量设置了any后就相当于对该变量关闭了TS的类型检测。当然我们上面的写法是显式的为变量设置为any，那么其实如果我们声明变量的时候没有赋值也没有指定类型，就是隐式any；就像如下代码，其实我们的a变量的类型也是any，虽然我们没有写。

let aa = '心凉'
a = true
a = 0
a = '几何'

unknown

相信大家从这个类型的名字上就知道他是表示不知道，当然在我们开发中我们不可能知道所有变量的类型，总归有一些是我们不清楚的，所以我们可以将变量的类型指定为unknown，我们来看下面的代码，将变量a的类型指定为unknown以后我们发现任何类型的值都可以赋值给a变量了：

let a:unknowna = '心凉'
a = true
a = 0
a = '几何'

看到这里大家有没有疑问，那我们的unknown和any的效果是一样的呀，那有什么区别么？是不是用哪个都可以呢？其实并不是，我们接着往下看，比如说我们有一个变量b然后指定类型为any，作为any类型的b竟然可以赋值给其他的变量，看下面的代码，这是不是也是一种隐患呢，相当于我们可以把any类型通过赋值的方式指定到别的变量中，但是我们的unknown类型的a在为c赋值的时候就会报错；所以我们要慎用any类型。可以把unknown理解为是安全的any；

let a: unknown
a = 5
let b: any
let c: number
c = b
c = a//报错

类型断言

我们借助上面的小例子，如果我不知道a是unknown格式是什么，如果他是字符串我就进行赋值呢？如何做？其实我们可以如同JS中去写一个if语句判断如果a的类型为number就进行赋值，但是如下代码是不是过于麻烦，我只是想进行赋值就需要一个if语句，这个时候呢我们就可以使用我们TS中的类型断言as，我们看下代码：

let a: unknown
a = 5
let c: number
c = a//报错//通过if
if (typeof a == "number") {c = a
}//类型断言（语法两种，下面都可以）
c = a as number
c = <number>a

void

void 用来表示空，在函数中，表示没有返回值，我们在上篇文章中介绍了我们的函数也可以设置参数类型和返回值类型的，那如果我们的函数返回值并没有设置返回值类型，那TS会根据函数中的return返回的类型来自己添加上，那如果我们为函数返回值设置为void时，我们在去写返回值会报错，我们可以来看一下下面的代码：

function fun1 ():void{return 123 //报错return true //报错return '几何' //报错return undefined
}

🌟 写在最后

本篇文章我们了解了字面量、联合类型声明、any、unknown、类型断言、void类型等知识，有些是常用的，有些呢可能用的比较少，但是大家要按照实例自己敲写一下代码哦，建议大家不仅仅是简单的看看文章，更重要的是动起我们的手进行一些扩展练习，才能帮助我们更好的掌握，好啦，各位小伙伴让我们 let’s coding！

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

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

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

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