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，开始愉快的开发吧~