Vue3选项式API导入外部共享props时required类型推断异常

这个类型推断异常是TypeScript的*类型拓宽（Type Widening）*特性和Vue Options API的props类型推断规则共同导致的：

• 当你直接在组件的props选项里内联写prop定义时，传入的对象字面量处于defineComponent的类型检查上下文里，TypeScript会保留required: true的字面量类型，Vue的类型工具可以识别到该prop为必填，最终推断this.exercise为Exercise类型。
• 当你把prop定义抽离到外部文件作为独立常量导出时，TypeScript默认会对独立对象的属性做类型拓宽：会把required: true的类型从字面量true拓宽为通用的boolean类型。Vue的类型工具无法从required: boolean中识别出该prop是必填项，就会默认给prop值加上undefined类型，最终得到Exercise | undefined的推断结果。
• 给prop配置default时类型正常，是因为Vue的类型规则中只要存在默认值，就会判定prop一定有返回值，不会追加undefined类型，和required配置无关。

最简便的修复方式是给导出的共享props对象添加as const断言，阻止TypeScript的类型拓宽，强制保留所有属性的字面量类型：

import type { PropType } from 'vue'
import type { Exercise } from '@/types/exercise' // 替换为Exercise类型的实际引入路径

export const sharedProps = {
  exercise: {
    type: Object as PropType<Exercise>,
    required: true,
  },
  // 后续其他可复用的共享prop可直接在此处追加
} as const

添加断言后，在组件中正常通过展开运算符...sharedProps引入即可，TypeScript可以正确识别required: true的类型标记，this.exercise会被正确推断为Exercise类型，IDE类型提示报错和构建失败的问题都会直接解决。

注意：不建议通过给必填prop强行添加default默认值的方式绕过类型问题，这种方式会破坏prop的必填语义，后续其他开发者使用组件时，TypeScript不会提示需要传入该必填prop，容易引发线上运行时错误。

如果添加as const后仍然存在类型异常，可以检查项目依赖的Vue版本，升级到Vue 3.3及以上版本即可，该版本对Options API下展开混入的props类型推断做了专项优化，兼容性表现更好。

内容的提问来源于stack exchange，提问作者Samuele B.