前端之路(拖更博主持续更新ing-12.16)-JavaScript项目转TypeScript项目的一些对比

原始模版

import {componentA,componentB} from '@/components';

export default {
    components: { componentA, componentB},
        //父组件向子组件传参props
        props: {
        propA: { type: Number },
        propB: { default: 'default value' },
        propC: { type: [String, Boolean] },
    }
    // 组件数据
    data () {
        return {
            message: 'Hello'
        }
    },

    watch: {
        visible(val) {
            if (val) {
                this.closed = false;
                this.$emit('open');
                this.$el.addEventListener('scroll', this.updatePopper);
                this.$nextTick(() => {
                    // this.$refs.dialog.scrollTop = 0;
                });
                if (this.appendToBody) {
                    document.body.appendChild(this.$el);
                }
            } else {
                this.$el.removeEventListener('scroll', this.updatePopper);
                if (!this.closed) this.$emit('close');
            }
        }
    }

    // 计算属性
    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 () {}
}

转换成 TS 模版

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 HelloWorld 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('')
    }

    // watch
    @Watch('visible')
    onVisibleChanged(val) {
        if (val) {
          this.closed = false;
          this.$emit('open');
          this.$el.addEventListener('scroll', this.updatePopper);
          this.$nextTick(() => {
            // this.$refs.dialog.scrollTop = 0;
          });
          if (this.appendToBody) {
            document.body.appendChild(this.$el);
          }
        } else {
          this.$el.removeEventListener('scroll', this.updatePopper);
          if (!this.closed) this.$emit('close');
        }
    }

    // Vuex 数据
    @State((state: IRootState) => state.booking.currentStep) step!: number
    @Getter( 'person/name') name!: name

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