TypeScript 7. Vue3 整合 TypeScript（一）

一、Vue Cli 中引入 TypeScript

这里是需要大家自己去创建一个 Vue Cli 的脚手架项目，可以在创建项目的时候引入 ts，这样就省的后期再去引入了。如果没有引入，我们可以通过命令进行引入

vue add @vue/typescript

当然，这里还有一些问题，就是引入 ts 后，vue 原本的项目有很多东西需要和 ts 进行结合。

这里的话是希望大家不要在创建好项目后，去引入 ts。

二、创建一个带有 ts 的项目

唯一注意的是，这里一定要选择上 TypeScript ！！！！（其他的根据需求进行引入即可）

然后出去这个，我们还有要注意的是：

这里是问我们是否使用 class 的模式来写vue的组件，我们选择是（主要是来感受一下 ts 和 vue 的结合用法）

这里还问我们：是否使用babel做转义，我们这里同样选择 yes

三、项目结构介绍

创建好项目之后，我们来看一下现在的项目结构和之前的有什么区别！

不难发现，很多之前 js 文件，变成了 ts，我们一个一个来看。

main.ts 这个是主要的文件， 除去名称修改了，其他的没有改变。

router/index.ts 与 index.ts 也是一样，只改变了文件的后缀名称，其他的没有变。

除去之前被改变的，还有新增的几个文件

registerServiceWorker.ts

service worker 是在后台运行的一个线程，可以用来处理离线缓存、消息推送、后台自动更新等任务。

registerServiceWorker 就是为 vue 项目注册了一个 service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。

但有一点要注意，registerServiceWorker 注册的 service worker 只在生产环境中生效（process.env.NODE_ENV === 'production'），所以开发的时候，是没有的~~~

当然了，在生产环境中，你也可以选择使用或者不适用这个功能。

shims-vue.d.ts

shims-vue.d.ts是为了 typescript 做的适配定义文件，因为.vue 文件不是一个常规的文件类型，ts 是不能理解 vue 文件是干嘛的，

加这一段是是告诉 ts，vue 文件是这种类型的。

这一段删除，会发现 import 的所有 vue 类型的文件都会报错。

tsconfig.json

这个 ts 配置文件是我们项目中 ts 的一个核心配置，我们学习的话，主要去 ts 官网进行一边看一边学习。

https://www.tslang.cn/docs/handbook/tsconfig-json.html

四、Vue 组件

我们再来看组件中的变化（我们来看一下这个 Home.vue 组件）

可以看到最大的特点其实就是 script 中进行了改变。

首先是 lang 的改变，之前我们没有引入 ts 的时候，这里是没有写的，现在我们改成了 ts。

这里我们是引入了两个组件，一个是 vue-class-component 中的 Options 与 Vue，还有一个是 HelloWorld。

这个 @Options 就是我们之前在创建项目的时候，它问我们是否使用 class 的模式来写vue的组件，我们当时选择的是。

这个 @Options 和之前的 @component 装饰器是一个作用，用来标识这个Typescript类是一个vue组件，我们可以在@options装饰器中可以填写vue组件内包含的属性。

详细可以去看 Vue Class Component 的官网：https://class-component.vuejs.org/

除去 @Options 这个装饰器，还有很多其他的装饰器：https://github.com/kaorun343/vue-property-decorator

这一讲先了解项目结构，下一篇我们说一下怎么去开发。

有问题可以联系我：QQ 2100363119，欢迎大家访问我的个人网站：https://www.lemon1234.com

最近网站已经做好，并且已经上线，欢迎各位留言~~