Vue2中带默认值的Prop出现undefined类型问题求助

问题原因 #

Vue2的TypeScript类型系统默认会给非required的Prop自动添加undefined类型，哪怕你设置了default值。你子组件里的search Prop虽然默认值是null，但TS还是会推断它的类型为string | undefined，导致父组件传递string | null类型的value时出现类型不匹配错误。

解决方案：显式声明Prop类型（最佳实践） #

通过vue提供的PropType工具，手动指定Prop的精确类型，覆盖默认的推断逻辑。修改子组件代码如下：

import { PropType } from 'vue'

export default {
  props: {
    search: {
      // 用PropType显式指定类型为string | null
      type: String as PropType<string | null>,
      default: null, // 这里不需要箭头函数，直接返回null即可（箭头函数适合返回引用类型如对象）
    },
  }
}

这样修改后，TS就能正确识别search Prop的类型是string | null，父组件传递value（类型string | null）时就不会再出现类型错误，同时也保留了你需要的null值场景。

不推荐的临时方案（治标不治本） #

如果暂时不想修改子组件，也可以在父组件中通过类型断言绕过检查，但这会掩盖类型定义的问题，不建议长期使用：

<ChildComponent :search="value as string | undefined" />

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