Vue3 SFC <script setup>如何提取公共props且被DevTools识别

问题根因 #

你之前使用跨文件TypeScript接口继承的方式无法被DevTools识别，是因为Vue SFC编译器目前无法从跨文件导入的纯类型中提取运行时的props元数据，这些类型仅在编译阶段做类型校验使用，不会生成运行时配置，因此Vue DevTools无法读取到这部分props信息。

最优解决方案（Vue 3.3+ 原生支持） #

采用运行时公共props定义 + 自动类型推导的方式，既可以实现props抽离复用，也能让DevTools正常识别，同时保留完整的TypeScript类型提示，和Options API时代的公共props复用体验完全一致。

步骤1：编写公共props定义文件

// common-props.ts
// 定义运行时公共props配置，为真实存在的JS对象，可被编译器正常识别
export const commonProps = {
  enabled: Boolean,
  readonly: Boolean,
} as const

// 自动推导公共props对应的TS类型，可按需用于业务组件的类型扩展
export type CommonPropsType = typeof commonProps

步骤2：在业务组件中使用

<script setup lang="ts">
import { commonProps } from './common-props'

// Vue 3.3+ 原生支持在defineProps的对象语法中展开外部导入的props配置
const props = withDefaults(defineProps({
  // 混入公共props
  ...commonProps,
  // 定义组件自有props
  visible: Boolean,
  text: {
    type: String,
    default: ''
  }
}), {
  // 统一配置默认值，公共props和自有props的默认值都可在此处定义
  visible: false,
  enabled: false
})
</script>

补充说明 #

这种写法下，所有props（包括commonProps里的enabled、readonly和组件自有的visible、text）都会被正常提取到组件的运行时配置中，Vue DevTools可以完整显示所有props，同时TypeScript的类型校验和代码提示完全正常。

如果你使用的是低于3.3版本的Vue，建议优先升级到Vue 3.3+，该版本是Vue官方的长期稳定版本，向下兼容性良好。如果暂时无法升级，也可以使用社区的unplugin-vue-define-options插件手动补充props元数据实现相同效果。

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