Typescript 支持 | zKing的学习乐园

摘要

简单介绍在 Vue2.x 中使用 Typescript 辅助开发

# 为什么？

在习惯了无所拘束的 JS 后再来学 TS 的使用确实会感到繁琐，但我觉得这是必要的。一个人写自己项目的时候可以比较随意，但是如果面临团队成员之间需要相互合作，并对某个项目进行长期维护和迭代的情况，更建议使用 Typescript 去写好代码，而不是仅仅靠约定来实现。

关于 Typescript 的学习我自己再简单总结了这篇文章

# 核心编译

为了能让 Typescript 编译 Vue 项目，我们需要先声明几份文件来支持 TS

tsconfig.json
- 需要配置该文件来指定了用来编译这个项目的根文件和编译选项
shims-vue.d.ts
- 声明相关的 vue 模块, 以使 TypeScript 识别.vue 文件, 并将所有导入的.vue 文件都按 VueConstructor<Vue> 处理
shims-tsx.d.ts
- 声明相关的 tsx 模块, 可以 vue 项目中编写 JSX 代码

shims-vue.d.ts

declare module "*.vue" {
  import Vue from "vue";
  export default Vue;
}

shims-tsx.d.ts

import Vue, { VNode } from "vue";

declare global {
  namespace JSX {
    interface Element extends VNode {}
    interface ElementClass extends Vue {}
    interface IntrinsicElements {
      [elem: string]: any;
    }
  }
}

声明文件准备完后，就可以安装核心的编译包 typescript 了，然后再根据脚手架去安装对应的插件包

如果使用 vue-cli4.x 作为脚手架的话，可以安装官方的 typescript 插件来支持编译 @vue/cli-plugin-typescript
如果使用的是 nuxt，那建议按照 nuxt 官方推荐的脚手架进行处理 nuxt-typescript

# 代码编写

# package

Vue 本身就支持使用 Typescript 来编写组件，Vue3 可以很好地进行类型推导，但是 Vue2.x 不行，它本身是使用 Flow 来处理类型，所以需要再依赖其他的库来更便利地使用 TS

vue-property-decorator 支持使用装饰器的写法来组件
vuex-module-decorators 支持使用装饰器和模块化的方式来编写 Vuex

这里就不再赘述怎么使用了，github 上的文档就足够入门了，或者可以看以下推荐的文章

当然这只是方便编写，还需要 ESLint 等规范来更好地约束，至于需要用到的包就看使用的脚手架了

# tsx

加入 TS 支持后，虽然还可以继续使用 template 的方式来编写组件的模板页面，但写久了以后会发现，类型推导，智能提示等在 template 模板上并没能用上，而且又不灵活...于是，使用 jsx 的方式来写组件的模板页面成为了开发的首选。
关于 JSX 的写法可以看这篇官方文档实际上是由 vuejs/jsx这个库去支持 JSX 写法的，本质是借助 Babel 进行了一层代码处理，所以这个库也是 vue 官方的一个 jsx 预设。目前也支持 v-model, v-show 之类的语法糖，所以写起来还是很舒服的
另外推荐一篇相关的文章可以更好地学习 vue jsx 实践

注意

如果项目中使用的 babel@6.x 进行代码转译，则需要使用 babel-plugin-transform-vue-jsx 来处理 jsx 写法

# 总结

写久了会发现，除了 CSS 的写法外，Vue2.x + TSX 的写法和 React 的写法会越来越像(因为 jsx 的写法我记得本来就是由 React 提出的...)，所以习惯这一套写法后很容易再去学习 React，虽然两个框架的原理并不一样，而且很多细微之处也有差异
一旦习惯用 Typescript 写代码后，会发现自己的开发思维变得越来越顺畅了，对业务和需求的把握也更有信心