如何在没有 typescript 的情况下在 vue3 props 上使用 jsdoc？

Question

const props = defineProps({
items: {
    /** @type {{new(): Color[] }} */
    type: Array,
    required: true,
  },
  selectedColor: {
    type: Object,
    required: true,
  },
  composable: {
    type: Function,
    required: true
  }
})

我们不使用 typescript，所以我尝试仅使用 jsdoc 和 typescript 接口文件添加类型。

项目正确输入为颜色数组。 如何将 selectedColor 的类型指定为 Color？ 另外我如何指定可组合项的类型？

这些都不起作用

const props = defineProps({
  selected: {
    /** @type {Color} */
    type: Object,
    required: true,
  },
  composable: {
    /** @type {function(): number} */
    type: Function,
    required: true
  }
})

const props = defineProps({
  selected: {
    /** @type {{ new(): Color}} */
    type: Object,
    required: true,
  },
  composable: {
    /** @type {{ new(): number}} */
    type: Function,
    required: true
  }
})

Answer 1

我找到了可行的解决方案。

const props = defineProps({
  selectedColor: {
    /** @type import('vue').PropType<Color> */
    type: Object,
    required: true
  },
  setColor: {
    /** @type import('vue').PropType<(color: Color) => void> */
    type: Function,
    required: true,
  }
})

自动完成功能在这种情况下有效，但 VSC 抱怨 Function 类型。

Type 'FunctionConstructor' is not assignable to type 'PropType<(color: Color) => void>'.
  Type 'FunctionConstructor' is not assignable to type '() => (color: Color) => void'.ts(2322)

用对象替换函数修复了错误，但道具不太具体。

const props = defineProps({
  setColor: {
    /** @type import('vue').PropType<(color: Color) => void> */
    type: Object,
    required: true,
  }
})