vue組件 Javascript 換成 TypeScript 寫法模板參考

vue組件寫法

Vue組件模版來看：
import {componentA,componentB} from '@/components';
export default {
 components: { componentA, componentB},
 props: {
     propA: { type: Number },
     propB: { default: 'default value' },
     propC: { type: [String, Boolean] } 
 }
 // 組件數據
 data () {
     return {
         message: 'Hello'
     }
 },
 // 計算屬性
 computed: {
     reversedMessage () {
         return this.message.split('').reverse().join('')
     }
     // Vuex數據
     step() {
         return this.$store.state.count
     }
 },
 methods: {
     changeMessage () {
         this.message = "Good bye"
     },
     getName() {
         let name = this.$store.getters['person/name']
         return name
     }
 },
 // 生命週期
 created () { },
 mounted () { },
 updated () { },
 destroyed () { }
}

vue使用TypeScript模板寫法

以上模版替換成typescript修飾符寫法則是：
import { Component, Vue, Prop } from 'vue-property-decorator'
import { State, Getter } from "vuex-class"
import { count, name } from "@/person"
import { componentA, componentB } from "@/components"
@Component({
    components: { componentA, componentB  }
})
export default class HelloWord extends Vue{
    @Prop(Number) readonly propA!: number | undefined
    @Prop({default: "default value"}) readonly propB!:string
    @Prop([String, Boolean]) readonly propC!: string | boolean | undefined
    // 原data
    message = "Hello"
    // 計算屬性
    private get reversedMessage (): string[]{
        return this.message.split('').reverse().join('')
    }
    // Vuex數據
    @State ((state: IPootState) => state.booking.currentStep) step!:number
    @Getter("person/name") name!:name
    //methods
    public changeMessage():void{
        this.message = "Good bye"
    }
    public getName(): string{
         let storeName = name
         return storeName
    }
    // 生命週期
    private created():void{},
    private mounted():void{},
    private updated():void{},
    private destroyed():void{}
}