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

fhsWar2025-10-26 18:28

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

makeRequiredProp 源码:

typescript 复制代码

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（推荐）:

ts 复制代码

import { makeRequiredProp, numericProp } from '../utils/props'

optionHeight: makeRequiredProp(Number),
swipeDuration: makeRequiredProp(numericProp),
fields: makeRequiredProp(Object as PropType<Required<PickerFieldNames>>),

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

ts 复制代码

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 报警。