Vue3 props: `required: true` 与 vant 的`makeRequiredProp`

为什么直接加 required: true会报错，用了makeRequiredProp就不会了？

makeRequiredProp 源码:

export const makeRequiredProp = <T>(type: T) => ({
  type,
  required: true as const,
});

• 原因

  • 写成 { type: [Number, String], required: true } 时，TS 会把 type 推断为 (NumberConstructor | StringConstructor)[]，在 Vue 的 ExtractPropTypes 推断里，常见情形会丢失“必填”约束，结果在组件里 props.xxx 仍被认为可能是 undefined。
  • makeRequiredProp 把 type 明确成预期的 PropType，并且 required 是字面量 true（true as const）；这样 ExtractPropTypes 才会把该 prop 标记为非可选，消除 “possibly undefined”。

• 简洁可行的两种写法

  • 用 helper（推荐）:

    import { makeRequiredProp, numericProp } from '../utils/props'
    
    optionHeight: makeRequiredProp(Number),
    swipeDuration: makeRequiredProp(numericProp),
    fields: makeRequiredProp(Object as PropType<Required<PickerFieldNames>>),
    

  • 或者手工写到位（注意 as const 与 PropType）:

    optionHeight: { type: Number as PropType<number>, required: true as const },
    swipeDuration: { type: numericProp as PropType<number | string>, required: true as const },
    fields: { type: Object as PropType<Required<PickerFieldNames>>, required: true as const },
    

这两种方式都能让 TS 正确认定为必填，避免 props.xxx 的 undefined 报警。