Vue-Cli 3 使用 TypeScript 快速探索之旅

在简单的学习了一下 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
npm install -g @vue/cli

// yarn
yarn global add @vue/cli

vue-cli 3.0 的初始化方式也发生了改变。

别忘了先进入你的项目文件夹后再执行

vue create my-project

命名完回车之后千！万！不！要！着！急！！！

找到 Manually select features 这个选项再回车继续。

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 使用差异

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 的方式来进行编写，就是定义 接口、类、继承、装饰器等来进行编写。

可参考：

【vue-class-component】https://github.com/vuejs/vue-class-component

【vue-property-decorator】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

版权声明：

本文版权属于作者 林小帅，未经授权不得转载及二次修改。

转载或合作请在下方留言及联系方式。