Vue2.x中使用ts

范例，HelloWorld.vue

声明文件

使用ts开发时如果要使用第三方js库的同时还想利用ts诸如类型检查等特性就需要声明文件，类
似 xx.d.ts
同时，vue项目中还可以在shims-vue.d.ts中对已存在模块进行补充
npm i @types/xxx

范例:利用模块补充$axios属性到Vue实例，从而在组件里面直接用

 
// main.ts
import axios from 'axios'
Vue.prototype.$axios = axios;
 
// shims-vue.d.ts
import Vue from "vue";
import { AxiosInstance } from "axios";
declare module "vue/types/vue" {
  interface Vue {
    $axios: AxiosInstance;
  }
}

范例:给krouter/index.js编写声明文件，index.d.ts

 
import VueRouter from "vue-router";
declare const router: VueRouter
export default router

装饰器

装饰器用于扩展类或者它的属性和方法。@xxx就是装饰器的写法
常见的有@Prop,@Emit,@Watch
具体使用见文章开头的例子

状态管理推荐使用:vuex-module-decorators

vuex-module-decorators 通过装饰器提供模块化声明vuex模块的方法，可以有效利用ts的类型系
统。
安装

npm i vuex-module-decorators -D

根模块清空，修改store/index.ts

export default new Vuex.Store({})

定义counter模块，创建store/counter

import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-
decorators'
import store from './index'
// 动态注册模块
@Module({ dynamic: true, store: store, name: 'counter', namespaced: true }) class CounterModule extends VuexModule {
count = 1
  @Mutation
  add() {
// 通过this直接访问count
    this.count++
  }
// 定义getters
get doubleCount() {
    return this.count * 2;
  }
  @Action
  asyncAdd() {
setTimeout(() => {
// 通过this直接访问add this.add()
}, 1000);
 
} }
// 导出模块应该是getModule的结果
export default getModule(CounterModule)
使用，App.vue
  
{{$store.state.counter.count}}
{{count}}
 
import CounterModule from '@/store/counter'
@Component
export default class App extends Vue {
  get count() {
    return CounterModule.count
}
  add() {
    CounterModule.add()
}
  asyncAdd() {
    CounterModule.asyncAdd()
} }

装饰器原理

装饰器是工厂函数，它能访问和修改装饰目标。
类装饰器，07-decorator.ts

 
//类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。 function log(target: Function) {
// target是构造函数
console.log(target === Foo); // true target.prototype.log = function() {
      console.log(this.bar);
    }
}
@log
class Foo {
bar = 'bar'

 
}
const foo = new Foo();
// @ts-ignore
foo.log();

方法装饰器

 
function rec(target: any, name: string, descriptor: any) { // 这里通过修改descriptor.value扩展了bar方法
const baz = descriptor.value;
descriptor.value = function(val: string) {
        console.log('run method', name);
        baz.call(this, val);
    }
}
class Foo {
  @rec
  setBar(val: string) {
    this.bar = val
} }
foo.setBar('lalala')

属性装饰器

// 属性装饰器
function mua(target, name) {
    target[name] = 'mua~~~'
}
class Foo {
  @mua ns!:string;
}
console.log(foo.ns);

稍微改造一下使其可以接收参数

function mua(param:string) {
    return function (target, name) {
        target[name] = param
    }
}