typescript+vue踩过的坑-typescript在.vue中的写法

typescript在.vue中的写法

使用typescript会让你的代码结构看起来更明朗

原vue写法

import {mapGetters, mapActions} from 'vuex'

import tree from './components/all/tree/tree.vue'

export default{

data () {

return {

a: 1,

b: '2',

c: true,

d: {

a: 'qi',

b: 77

}

}

},

components: {},

computed: {},

methods:{

funA () {},

funB () {}

},

watch: {},

mounted () {},

created () {}

}

使用typescript后的写法

import Vue from 'vue'

import Component from 'vue-class-component'

import {mapGetters, mapActions} from 'vuex'

import tree from './components/all/tree/tree.vue'

interface obj {

a: string;

b: number;

}

@Component({

props: [],

components: {},

computed: {},

watch: {},

mounted () {},

created () {}

})

export default class a extends Vue {

// data

a:number = 1

b:string = '2'

c:boolean = true

d:obj = {

a: 'qi',

b: '77'

}

// methods

funA () {}

funB () {}

}