vue2.x中使用typescript

本文目的在于大家可以快速在vue中使用ts，关于ts的具体的使用方法，大家可以去官网查看。以前各类类型转换的骚写法写习惯了，比如：

const y = '5';
const x = + y;

然鹅在最近的项目中，由于类型判断引发的bug不在少数，比如A页面跳转B页面带的参数是个String类型，但是在B页面会校验这个参数是否是Number类型，由此出现问题，一顿猛找，最后一阵无语。由此觉得vue中引入ts，应该会...真香

下面就简单介绍下vue中引入ts后具体的写法有什么不同了，以便大家可以更为快速的上手。具体更为详细的使用方法大家可以参考vue-property-decorator 和 vuex-module-decorators，至于引入ts的一些配置，这里不多做赘述，有兴趣的同学可以闲暇研究一下。

话不多说，下面就进入正文部分

vue-property-decorator的常用示例

在vue-property-decorator中有以下几个修饰符组成：

@Component
@Prop
@Model
@Emit
@Inject
@Provide
下面以JS写法和TS写法作为对比供大家参考

@Component

js写法



import { compA, compB } from '@/components';
export default {
    components: {
        compA,
        compB
    }
}

ts写法

import {Component,Vue} from 'vue-property-decorator';
import {compA,comptB} from '@/components';
@Component({
    components: {
        compA,
        compB
    }
})

export default class XXX extends Vue {
    ...
}

Prop

js写法

export default {
   props: (
       propA: String,
       propB: [Number, String],
       propC: {
           default: 'default value'
       }
   )
}

ts写法

import {Component, Vue, Prop} from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
    @Prop(String) readonly propA: String | undefined
    @Prop([String, Number]) readonly propB: number | string | undefined
    @Prop({default: 'default value'}) readonly propC!: string   // 注意  这里的!标识这个prop一定是非空的
}

@Model

js写法

<my-comp v-model="checked" />  // 父组件引用
// 子组件
<input type="checkbox" @change="$emit('eventName', $event.target.checked)" :checked="checked">
export default {
    props: {
        checked: {
            type: Boolean
        }
    },
    model: {
        prop: 'checked',
        event: 'eventName'
    }
}

ts写法

import {Vue, Component, Model} from 'vue-property-decorator';
@Component
export default class Myconponent extends Vue {
    @Model('eventName', {type: Boolean}) readonly checked!: boolean
}

@Watch

js写法

export default {
    watch: {
        val1: [{
            handler: 'onValue1Change',
            immediate: false,
            deep: false
        }],
        val2: [{
            handler: 'onValue2Change',
            immediate: true,
            deep: true
        }]
    }
    
    methods: {
        onVal1Change(newVal, oldVal) {},
        onVal2Change(newVal, oldVal) {}
    }
}

ts写法

import {Vue, Component, Watch} from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
    @Watch('val1')
    onVal1Change(newVal, oldVal){}
    
    @Watch('val2', {immediate: true, deep: true})
    onVal2Change(newVal, oldVal){}
}

inject && provide

js写法

import {Vue, Component, Model, Inject} from 'vue-property-decorator'
const symbol = Symbol('baz')

@Component
export default class MyComponent extends Vue {
    inject: {
        foo: 'foo',
        bar: 'bar',
        optional: { from: 'optional', default: 'default' },
        [symbol]: symbol
    },
    
    data() {
        return {
            foo: 'foo',
            baz: 'bar'
        }
    },
    
    provide() {
        return {
            foo: this.foo,
            baz: this.baz
        }
    }
}

ts 写法

import { Component, Inject, Provide, Vue } from 'vue-property-decorator'
 
const symbol = Symbol('baz')
 
@Component
export class MyComponent extends Vue {
  @Inject() readonly foo!: string
  @Inject('bar') readonly bar!: string
  @Inject({ from: 'optional', default: 'default' }) readonly optional!: string
  @Inject(symbol) readonly baz!: string
 
  @Provide() foo = 'foo'
  @Provide('bar') baz = 'bar'
}

@Emit

js写法

export default {
    methods: {
        addNumber(n) {
            this.$emit('eventName', n);
        },
        
        otherEvent(params) {
            this.$emit('other-event', params)
        }
    }
}

ts写法

import {Vue, Component, Emit} from 'vue-property-decorator';
@Component
export default class MyComponent extends Vue {
    @Emit('eventName')
    addNumber(n: Number) {
        return n
    }
    
    @Emit()  // 如果不提供事件名 默认为函数名  驼峰命名会被转化为kebab-case
    otherEvent(params: string) {
        return params
    }

}

计算属性

js写法

export default {
    computed: {
        val: function() {
            ...
            return xx
        }
    }
}

ts写法

// 将该计算属性名定义为一个函数,并在函数前加上get关键字即可
import {Vue, Components} from 'vue-property-decorator'
@Component({})
export default class MyComponent {
    get val() {
        ...
        return xx
    }

}

以上就是vue中引入vue-property-decorator后的常用的一些示例。日常开发中状态管理工具在各模块数据交互传输也起到很重要的作用，下面介绍下vuex-module-decorator

vuex-module-decorator的使用

state中定义namespace为test的模块

import { VuexModule, Module, Action, Mutation } from 'vuex-module-decorators'

// 待实现的state的接口
export interface TestState {
  num: number,
  firstName: string
}

// 
@Module({namespaced: true, name: 'test', stateFactory: true})

export default class Test extends VuexModule implements TestState {
// state
  public num = 0;
  public firstName = '';

  @Action
  public emitAddOne() {
  // action中调用mutation
    this.addOne();
  }

  @Action
  private emitSubstract() {
    this.substract()
  }

  @Mutation
  private addOne() {
    this.num ++;
  }

  @Mutation
  private substract() {
    this.num --;
  }
  
  // getters
  get addNum() {
    return this.num ++
  }

}

store的使用

import { Vue, Component } from 'vue-property-decorator';
import { getModule } from 'vuex-module-decorator';
import test from '@/store/module/Test';
import store from '@/store/index'

const testModule = getModule(test, store)  // 通过getModule()安全访问Store

@Component({});
export default class MyComponent extends Vue {
    public showStateData(): void {
    // 调用state中的data
        console.log(testModule.num)
    }
    // 调用action
    emitAction():void {
          testModule.emitAddOne()
      }
    // 调用mutation  
      emitMutation(): void {
        testModule.substract()
      }
}

优点和不足

优点挺多：

清晰的函数参数/接口属性，增加了代码可读性和可维护性
静态检查
生成API文档
配合现代编辑器，各种提示
活跃的社区
缺点也有：
和某些库结合的不是很完美(没错，说的就是vue 2.x)

这里提到的vue2.x由于ts先天能力的不足，导致vue的ts语法需要使用class风格(运行时会被转换回原本的vue构造函数的语法)，和我们平时熟悉的vue风格有些差异

最后

ts带上vue-property-decorator和vuex-module-decorator，开始愉快的开发吧~