// 方式1: OptionsAPIs --- Vue.extend
import Vue from 'vue'
export default Vue.extend({
  // 使用 Vue.extend({})的方式才能有类型注解和校验才会有效果
  data() {
    return {
      person: {
        name: 'lelsie',
        age: 18
      }
    }
  },
  methods: {
    handle(): string {
      console.info(this.person.name)
      return this.person.name
    }
  }
})

// 方式2: ClassAPIs: extends Vue
import Vue from 'vue'
import Component from 'vue-class-component'

// Define the component in class-style
@Component
export default class App extends Vue {
  // class properties will be component data
  count = 0
  // methods will be component methods
  handle() {
    console.info(this.count)
  }
}

// 方式3: ClassAPIs + decorator
import { Vue, Component, Prop } from 'vue-property-decorator'
@Component
export default class App extends Vue {
    @Prop(Number) readonly propA: number | undefined
    @Prop({default: 'default value'}) readonly propB!: string
    @Prop([String,Boolean]) readonly propC: string | boolean | undefined
}
/**
 * props: {
    propA: {
      type: Number,
    },
    propB: {
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },
  }
 */