无TypeScript时，如何为Vue3 Props使用JSDoc指定类型？

核心解决方案 #

要在不使用TypeScript的情况下，通过JSDoc为Vue3组件的Props标注Color对象类型和函数类型，关键是正确关联类型定义并使用符合JSDoc规范的类型语法：

1. 确保Color类型可访问

如果Color接口定义在单独的.d.ts或.ts文件中，先通过JSDoc导入类型：

/** @typedef {import('./types/Color').Color} Color */

2. 标注selectedColor（对象类型）

直接用@type {Color}标注props字段，无需使用{new(): Color}（这是构造函数类型，而我们需要的是实例类型）：

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

3. 标注composable（函数类型）

直接用JSDoc的函数类型语法标注，比如如果你的composable是返回number的无参函数：

const props = defineProps({
  // ...其他props
  composable: {
    /** @type {() => number} */
    type: Function,
    required: true
  }
})

如果函数有参数，比如接收Color类型参数并返回boolean：

/** @type {(color: Color) => boolean} */

为什么之前的写法无效？ #

• 无效写法1：如果Color类型未正确导入（比如没有用@typedef引入外部类型），TypeScript无法识别Color，导致标注失效。
• 无效写法2：{new(): Color}表示构造函数类型（即可以用new创建Color实例的函数），但selectedColor是已经创建好的Color实例，所以这个类型不匹配。

内容的提问来源于stack exchange，提问作者sbakht