如何让Vue组件的FormType Prop仅接受预配置值并提示开发者？

我有一个业务场景，需要表单组件的FormType Prop仅接受“New”或“Update”作为有效值，其他值会触发错误提示。我使用script setup语法定义Props如下：

defineProps({
  FormTitle: {
    type: String,
    required: true,
  },
  FormType: {
    type: String,
    required: true,
    validator: (val) => {
      return ["New", "Update"].includes(val);
    },
  },
});

目前的问题是，其他开发者使用该组件时，必须查看代码才能知道允许的取值，鼠标悬停组件时无法在预览窗口看到“New”或“Update”选项。

请问：

1. 如何告知其他开发者FormType Prop仅接受“New”或“Update”？
2. 如何让鼠标悬停组件标签时，在预览窗口显示这些可选值？

1. 明确传递有效值范围 #

可以通过两种方式直接告知开发者FormType的允许取值：

• 添加JSDoc注释：在FormType的Prop定义上方添加清晰的注释，直接说明可选值，同时保留原有验证逻辑：

defineProps({
  FormTitle: {
    type: String,
    required: true,
  },
  /**
   * 表单类型，仅允许取值："New" 或 "Update"
   */
  FormType: {
    type: String,
    required: true,
    validator: (val) => {
      return ["New", "Update"].includes(val);
    },
  },
});

• 用TypeScript联合类型约束：如果项目支持TS，直接用联合类型定义FormType的取值范围，编写代码时就能得到类型校验，同时保留运行时的validator验证：

import type { PropType } from 'vue';

defineProps({
  FormTitle: {
    type: String,
    required: true,
  },
  FormType: {
    type: String as PropType<'New' | 'Update'>,
    required: true,
    validator: (val) => {
      return ["New", "Update"].includes(val);
    },
  },
});

2. 实现悬停时的可选值提示 #

要让IDE（如VS Code）在悬停组件时显示可选值，核心是让Prop的类型信息被IDE识别：

• TypeScript联合类型方案：上面的TS写法会让IDE自动识别'New' | 'Update'的联合类型，悬停时直接展示所有可选值，编写代码时还会有自动补全提示。
• 增强JSDoc注释：如果项目不使用TS，在JSDoc里明确标注取值范围，配合Vue插件的IDE会识别注释内容并在悬停时展示：

defineProps({
  FormTitle: {
    type: String,
    required: true,
  },
  /**
   * 表单类型
   * @type {'New' | 'Update'}
   */
  FormType: {
    type: String,
    required: true,
    validator: (val) => {
      return ["New", "Update"].includes(val);
    },
  },
});

内容的提问来源于stack exchange，提问作者Nishant S Vispute