前端之路(拖更博主持续更新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 {
      }
}