React TS中为何AddOn需传全量Props？PickAddOns却无报错

我定义了如下TypeScript类型与接口：

export type Plan = 'arcade' | 'advanced' | 'pro'
export type PlanDuration = 'monthly' | 'yearly'
export type AddOn = 'onlineService' | 'largerStorage' | 'customizableProfile'
export type AddOns = Record<AddOn, boolean>

export interface FormItems {
    name: string
    email: string
    phone: string
    selectedPlan: Plan
    planDuration: PlanDuration
    pickedAddOns: AddOns
}

export type DefaultProps = FormItems & {
    updateFormData: (fieldsToUpdate: Partial<FormItems>) => void
}

同时我有PickAddOns组件，内部包含AddOn子组件：

export const PickAddOns: FC<DefaultProps> = ({
    pickedAddOns,
    planDuration,
    updateFormData
}) => {
    return (
        <>
            {(Object.keys(addOnsData) as AddOn[]).map(addOn => (
                <AddOn
                    key={addOn}
                    addOn={addOn}
                    pickedAddOns={pickedAddOns}
                    planDuration={planDuration}
                    updateFormData={updateFormData}
                />
            ))}
        </>
    )
}

可见PickAddOns使用DefaultProps作为Props类型，仅接收部分Props仍能正常运行。但AddOn组件的Props类型定义为DefaultProps & { addOn: AddOn }，在PickAddOns中传递部分Props给AddOn时，出现错误：

Type '{ key: AddOn; addOn: AddOn; pickedAddOns: AddOns; planDuration: PlanDuration; updateFormData: (fieldsToUpdate: Partial) => void; }' is missing the following properties from type 'FormItems': name, email, phone, selectedPlan

作为TS新手，我无法理解为何DefaultProps在PickAddOns中可用，在AddOn中却报错？是否存在无需使用Pick工具类型的解决方案？

• PickAddOns的类型要求并未放松：PickAddOns声明接收DefaultProps类型的props，意味着父组件必须传入完整的DefaultProps（包括name、email等所有FormItems字段）。你在组件内部只解构了部分字段，只是没用到其他字段而已——TS不会因为组件内部没用到就报错，因为父组件已经提供了完整的props。
• AddOn的类型要求是严格匹配：AddOn的props类型是DefaultProps & { addOn: AddOn }，这要求传入的props必须包含DefaultProps的所有字段（也就是FormItems全部字段+updateFormData），再加上addOn。但你在PickAddOns里只传递了部分字段，缺少name、email等，所以TS直接抛出类型不匹配的错误。

方案1：拆分类型为基础字段+回调 #

把通用类型拆分成独立模块，让组件按需组合，从根源上避免冗余字段要求：

// 定义AddOn组件需要的核心字段类型
export type AddOnCoreFields = {
    pickedAddOns: AddOns
    planDuration: PlanDuration
}
// 定义通用的表单更新回调类型
export type FormUpdateHandler = {
    updateFormData: (fieldsToUpdate: Partial<FormItems>) => void
}

// PickAddOns的props类型：核心字段+回调
export type PickAddOnsProps = AddOnCoreFields & FormUpdateHandler
// AddOn的props类型：核心字段+回调+专属addOn字段
export type AddOnProps = AddOnCoreFields & FormUpdateHandler & { addOn: AddOn }

之后修改组件的类型声明：

export const PickAddOns: FC<PickAddOnsProps> = ({
    pickedAddOns,
    planDuration,
    updateFormData
}) => {
    // 原有逻辑不变
}

export const AddOn: FC<AddOnProps> = ({
    addOn,
    pickedAddOns,
    planDuration,
    updateFormData
}) => {
    // 组件逻辑
}

方案2：用Omit精简DefaultProps #

如果不想拆分类型，可以用Omit移除DefaultProps中不需要的字段（虽然用到工具类型，但比Pick更直观，当不需要的字段数量较少时）：

export type AddOnProps = Omit<DefaultProps, 'name' | 'email' | 'phone' | 'selectedPlan'> & { addOn: AddOn }

这样AddOn的props类型就只保留需要的字段，传递时不会再报错。

内容的提问来源于stack exchange，提问作者j-0-n-e-z