Vue-Cli 3 使用 TypeScript 快速探索之旅
- 2019 年 10 月 7 日
- 筆記
在简单的学习了一下 TypeScript 之后，觉得还是可以尝试一下的。
从书写方式上，类型定义、类、抽象类、接口、构造函数、构造器、装饰器、继承等等的一系列语法糖都在向着 C#、Java 等后端语言的面向对象的编程方式发展，也拥有了严格的静态类型检查。
当然在他的官网上也写到：
TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript。 TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。
【TypeScript中文网】 https://www.tslang.cn/
关于 TS 的历史我就不写了，感兴趣的小伙伴们可以自己去查一查，还是有点意思的。
在开始动手之前，我还是需要吐槽逼逼一下的。关于 Vue-Cli 3 使用 TypeScript 的资料，网上一查在咋一看之下非常多啊，当时还有点小兴奋有这么多人已经踩坑了，可以参考参考。
燃鹅……非常失望，真正有用的并且可以正确运行的却没几个，东一块西一块拼不到一起，或者关键内容丢失，又或者需要引用哪些额外的库都没写。
当然不能一竿子打翻一船人，还是有些文章是认真写的，只是如果用来入门尝试的话还不合适。
虽然 Vue 的官网上也有提供关于使用 TypeScript 的内容，但是也不是很详细。
所以还是得靠自己来探索一下。
01 – 快速构建 Vue + TypeScript
废话就不多说了，我们直接上手干一番。当然不能盲目上手就干，还是得简单梳理一下。
环境：
- node 10+
- npm 5.8+
- vue-cli 3+
小伙伴们自己看着更新吧。
先安装 vue-cli 3.0 支持，前提是要先卸载之前的 vue-cli 2.0+
npm install -g @vue/cli # OR yarn global add @vue/cli
vue-cli 3.0 的初始化方式也发生了改变。
别忘了先进入你的项目文件夹后再执行
vue create my-project
命名完回车之后千！万！不！要！着！急！！！
找到 Manually select features 这个选项再回车继续。
然后回车继续
我选择了 Babel + Vuex + Router + TypeScript + 代码检查工具 + sass，如果不喜欢的话只用勾选 Babel、TypeScript 这两项即可，一样可以快速体验 TypeScript。
这里不研究的话，一路回车就好，然后等待构建就可以看到 Vue + TypeScript 的项目脚手架了。
02 – 项目差异
在构建完成后我们可以来看一下两个版本之间的差异（这里所指均由 Vue-Cli 构建出来的项目，JavaScript 版本与 TypeScript 版本）。
先来说项目结构
这一看，怎么还是感觉 JavaScript 方式的目录简洁一些啊。
（我这里因为引用了一些额外的测试和PWA的库可以忽略）
在根目录中还主要还是多了一些对 TypeScript 的配置文件，tslint.json、tsconfig.json、babel.config.js 等，之外也并无太多额外的东西。
src 文件就稍微有些变动了，新增了一个 views 文件夹用于存放页面以及 shims-*.d.ts 文件。
关于 shims-*.d.ts 文件的疑问可以去搜索 “.d.ts”关键字。
Package 使用差异
我把相同的或者额外的部分擦掉后就是 TypeScript 所需的部分了。
（看起来有点乱？）
运行时所需
- core-js
- vue-class-component
- vue-property-decorator
编译时所需
- @vue/cli-plugin-typescript
- lint-staged
- typescript
语法形式
目前可以使用两种形式的语法进行编写代码。
一种是 Vue.extend ，这是在 Vue 官网中提到的
要让 TypeScript 正确推断 Vue 组件选项中的类型，您需要使用 Vue.component 或 Vue.extend 定义组件
一种是使用 TypeScript 的方式来进行编写，就是定义 接口、类、继承、装饰器等来进行编写。
可参考：
https://github.com/vuejs/vue-class-component
https://github.com/kaorun343/vue-property-decorator
03 – 错误与建议
在第一次构建完成尝试自己写的一个 demo 页面的时候，也配置了一下 TSlint 的规则，启动后出现了这样一个错误
vue.runtime.esm.js?2b0e:4478
Uncaught Error: Decorating class property failed.
Please ensure that proposal-class-properties is enabled and set to use loose mode.
To use proposal-class-properties in spec mode with decorators, wait for the next major version of decorators in stage 2.
这是一个运行时的错误，当时在全网查了一下，发现居！然！没！人！碰！到！过！
我的天！我是第一人？然后我就各种查各种找哪怕单词沾边一点点的文章我也去看。2个小时过去了真的没有找到解决过这个问题的答案。
隔天我和朋友说起这个事，然后当场复现了一下当时的操作过程，TSlint 的规则就没有配置，直接使用的默认规则。
npm run serve
启动项目后，居然没有报错！！！
然后我思考了一下，没有配置 TSlint 就不会报错。而错误信息里提示的却是装饰器的问题，肯定还是哪里有遗漏。
然后我又新建了一个项目来进行对比，发现：
- TSlint 规则不是导致报错的主要原因，而是影响了报错的结果输出。
- 影响此结果输出的规则是 "member-access": false,
- 主要影响导致报错的是 script 标签，需要添加语言支持属性 lang="ts"。
总而言之，言而总之，是我自己在写的时候疏忽了这一点，最终导致了这个奇葩问题。
建议
当然如果对于 TypeScript 不熟悉的小伙伴们，还是建议使用 Vue.extend({}) 的方式来编写代码，这个方式的编写习惯想必大家还是很熟悉的，使用上也没有什么问题。
如果想使用 TypeScript 方式的话，还是建议去好好看一看 TypeScript 的语法和相关特性，以便能够使用装饰器等方式，这样更符合这个 Vue + TypeScript 脚手架的预期。
这只是一次简单的快速探索，其中的一些东西并未说明清楚，还望见谅！当然你也有兴趣尝试的话，可以将你尝试中的问题留言给我，我尽可能的进行解答。
最后
在编码时难免会碰到一些奇葩问题，不要急躁，网上也许没有答案，但是你可以对自己的代码进行多次对比和审查，有时候就恰好是自己疏忽了一点而已。
参考来源：
【TypeScript中文网】： https://www.tslang.cn/ 【Vue Cli 官网】： https://cli.vuejs.org/ 【Vue 官网 – TypeScript 支持】： https://cn.vuejs.org/v2/guide/typescript.html
感谢大家的喜欢！
欢迎 关注、留言、分享、转发、在看。
