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