此文已由作者张汉锐授权网易云社区发布。
欢迎访问网易云社区，了解更多网易技术产品运营经验。
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 集成的时候，成本更低。
更多网易技术、产品、运营经验分享请点击。
相关文章：
【推荐】 如何作缺陷分析