使用 typescript ，提升 vue 项目的开发体验（2）

此文已由作者张汉锐授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

vuex-class

提供了和 vuex 相关的全部装饰器，从而解决了上面 Vue.extend + vuex 的 「代码提示」「代码重构」两个问题，然后再通过手动添加类型声明，使得「类型检查」的工作也能生效

全部装饰器有：

• @State

• @Getter

• @Action

• @Mutation

还有一个辅助函数：

• namesapce  (用得比较少)

具体用法也很明确，看例子：

import Vue from 'vue'import Component from 'vue-class-component'import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'const ModuleGetter = namespace('path/to/module', Getter)
 
@Component
export class MyComp extends Vue {  // 声明 state，getter, action, mutation等，并手动添加类型
  @State('foo') stateFoo: number 
  @State(state => state.bar) stateBar: string
  @Getter('foo') getterFoo: number  
  @Action('foo') actionFoo: () => void
  @Mutation('foo') mutationFoo: () => void
  @ModuleGetter('foo') moduleGetterFoo: number  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux
 
  created () {    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

vue-mixin

这个库提供的装饰器，专门用于处理 vue 使用 mixin 的情况。装饰器如下：

• @Mixin

• @Mixins

• @Component : 对 vue-class-component 的封装。在结合 vue-class-component 的时候，请使用这个 component

按照文档的例子，看下面 gif

另外，也支持多个 mixin ，详情查看文档介绍 vue-mixin-decorator

小结

介绍到这里，通过加入几个装饰器，已经能够保证 vue + ts 有了最基础的开发体验了。

虽然代码形式上有很大的变化，实际上还是 vue 的模样（穿了马甲，23333）。

其他：插件类型声明， Store.state 类型声明

插件类型声明

vue 文档在 typescript 那一节已经有介绍，这里就不再介绍，看 gif 吧

Store.state

为了更好的开发体验，在访问 this.$store.state 的时候有代码提示和类型检查。目前版本(3.0.1) vuex 的类型声明还不允许这么做，需要 hack 下才能实现。

具体的 hack 方式是，通过  tsconfig.json 屏蔽官方的 vuex.d.ts 文件，拷贝一份到 typings/vuex.d.ts，然后对 vuex 的 Store 声明成自己的类型。

// tsconfig.json
{
  ...
  "paths": {
    "vuex": ["typings/vuex.d.ts"], // 这里
  }
  ...}

// typings/vuex.d.ts import { RootState } from '../src/store';
 
declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {      // 这里声明成自己的类型就行
      store?: Store<RootState>;
  }
}
 
declare module "vue/types/vue" {
  interface Vue {
      $store: Store<RootState>;
  }
}

详细的前因后果，参考 Write Stores in Typescript  的讨论

总结

到这里，基本上 vue + ts 的体验就会非常的好了，能够利用到「代码提示」「类型检查」「代码重构」等非常便利的工具，代码质量会在一定程度上有提升。期望在 vue 未来的版本上，能够对 ts 有更好的支持，使得在 vue 全家桶和 ts 集成的时候，成本更低。

免费体验云安全(易盾)内容安全、验证码等服务

更多网易技术、产品、运营经验分享请点击。

相关文章：
【推荐】 数据库路由中间件MyCat - 源代码篇（1）
【推荐】 Omad群组部署、依赖部署一键解决
【推荐】 客户端SDK测试思路