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 () {}
    }

使用typescript后组件的结构是不是看起来更清晰了呢

typescript+vue踩过的坑-常见报错