10. 将JS组件改写为TS组件

改为TS组件

type组件的JS代码

export default {
  name: 'Types',
  props:['xxx'],
  data(){
    return {
      type: '-'  // - 表示支出 + 表示收入
    }
  },
  mounted() {
    console.log(this.xxx)
  },
  methods:{
    selectType(type){
      if(type !== '-' && type !== '+'){
        throw new Error(`${type} is unknown`)
      }
      this.type = type
    }
  }
}

改写为TS

<script lang="ts">
import Vue from 'vue'
import {Component} from 'vue-property-decorator';
@Component
export default class Types extends Vue {
  // data
  type = '-'  // - 表示支出 + 表示收入
  // method
  selectType(type: string) {
    if (type !== '-' && type !== '+') {
      throw new Error('type is unknown')
    }
    this.type = type
  }
}
</script>

必须引入Component, 官方文档 https://github.com/kaorun343/vue-property-decorator

@Prop

使用Vue Class Component的prop

官方文档：https://class-component.vuejs.org/guide/props-definition.html

import Vue from 'vue';
import {Component} from 'vue-property-decorator';
const GreetingProps = Vue.extend({
  props: {
    name: String
  }
})
@Component
export default class Types extends GreetingProps {
  type = '-';  // - 表示支出 + 表示收入
  selectType(type: string) {
    if (type !== '-' && type !== '+') {
      throw new Error('type is unknown');
    }
    this.type = type;
  }
  mounted(){
    console.log(this.name);
  }
}

使用Vue Property Decorator的prop

文档：https://github.com/kaorun343/vue-property-decorator#Prop

import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator';
@Component
export default class Types extends Vue {
  @Prop(Number) readonly xxx: number | undefined
  // @Prop告诉Vue xxx不是data是prop
  // Number 告诉 Vue xxx的类型，运行时检查
  // number | undefined告诉 TS xxx的类型， 编译时检查
  type = '-';  // - 表示支出 + 表示收入
  selectType(type: string) {
    if (type !== '-' && type !== '+') {
      throw new Error('type is unknown');
    }
    this.type = type;
  }
  mounted(){
    // 当类型有undefined需要判断
    if (this.xxx !== undefined) {
      console.log(this.xxx.toString());
    }
  }
}

tips: 获取TS最新版本号

npm info typescript version

Vue单文件组件的三种写法

1. 用JS对象

   export default {data, props, methods, created, ...}

2. 用TS类 (推荐)

   <script lang="ts">
   @Component
   export default class xxx extends Vue {
   xxx: string = 'hi';
   @Prop(Number) xxx: number | undefined;
   }

3. 用JS类

   @Component
   export default class xxx extends Vue {
   xxx = 'hi';
   }

   修改Vue默认模板