<template>
  <div>
    <slot/>
  </div>
</template>

<script>
// @ts-check

/**
 * @typedef {Object} SampleObjectProp
 * @property {number} key1 // mandatory
 * @property {string} [key2] // optional
 *
 * @typedef {Object} MyComponentData
 * @property {boolean} data1
 * @property {number} data2
 * @property {string} data3
 */

export default {
  name: 'MyComponent',
  props: {
    prop1: Boolean,
    prop2: {
      type: Number,
      default: 10
    },
    prop3: {
      type: String,
      default: 'foo'
    },
    prop4: {
      /** @type {{ (): string[] }} */
      type: Array,
      /** @type {{ (): string[] }} */
      default: () => []
    },
    prop5: {
      /** @type {{ (): SampleObjectProp }} */
      type: Object,
      /** @type {{ (): SampleObjectProp }} */
      default: () => ({ key1: 0 })
    }
  },
  /** @type {{ (): MyComponentData }} */
  data () {
    return {
      data1: true,
      data2: 0,
      data3: ''
    }
  },
  computed: {
    /** @returns {number} */
    myDouble () {
      return 2 * this.data2
    },
    /** @returns {string} */
    myHello () {
      return `Hello, ${this.data3}!`
    }
  },
  methods: {
    /** @param {boolean} value */
    setData1 (value) {
      this.data1 = value
    },
    /** @param {number} value */
    setData2 (value) {
      this.data2 = value
    },
    /** @param {string} value */
    setData3 (value) {
      this.data3 = value
    },
    /** @param {string} name */
    greet (name) {
      return `${this.myHello} How are you, ${name}?`
    }
  }
}
</script>

<style>
</style>