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