React高阶组件添加默认Props的TypeScript类型定义问题

想要实现一个React高阶组件（HOC）为目标组件添加默认Props，但TypeScript类型定义不符合预期——添加默认值的属性依然被标记为必填项。

原代码 #

const withDefaultProps = <componentProps extends object>(
    Component: React.ComponentType<componentProps>,
    defaultProps?: componentProps | object
) => {
    return function (props: componentProps) {
        return <Component {...(defaultProps || {})} {...props} />;
    };
};

function A(props : { value1: string; value2: string }) {
    return <div></div>;
}

const B = withDefaultProps(A, { value1: 'test' });

出现的错误 #

调用组件B时，即使已给value1设置默认值，TypeScript仍要求必须传入该属性：

<B value2='Hello' />;
// Property 'value1' is missing in type '{ value2: string; }' but required in type '{ value2: string; value1:string; }'

预期行为 #

• 给value1设置默认值后，B组件仅传入value2不报错
• 仅给value2设置默认值时，B组件不传value1则报错

修复后的代码 #

import React from 'react';

const withDefaultProps = <P extends object, DP extends Partial<P>>(
    Component: React.ComponentType<P>,
    defaultProps: DP
) => {
    // 定义返回组件的Props类型：移除默认Props的键，再将这些键转为可选
    type Props = Omit<P, keyof DP> & Partial<Pick<P, keyof DP>>;

    return function (props: Props) {
        return <Component {...defaultProps} {...props} />;
    };
};

function A(props : { value1: string; value2: string }) {
    return <div></div>;
}

// 情况1：给value1设默认值，B的props中value1变为可选
const B = withDefaultProps(A, { value1: 'test' });
<B value2='Hello' />; // 无错误

// 情况2：给value2设默认值，B的props中value1仍为必填
const C = withDefaultProps(A, { value2: 'test' });
<C value2='Hello' />; // 报错：Property 'value1' is missing

关键说明 #

1. 泛型约束：用两个泛型P（原组件Props类型）和DP（默认Props类型，必须是P的子集），明确默认Props与原Props的类型关联，避免类型宽泛导致的校验失效。
2. Props类型重构：通过Omit移除原Props中已被默认值覆盖的键，再用Partial将这些键转为可选，让TypeScript自动识别哪些属性无需强制传入。
3. 默认Props必填化：移除defaultProps的可选标记，确保传入的默认值结构与原Props匹配（若需支持不传默认Props，可将DP改为DP extends Partial<P> | undefined，并在组件内处理defaultProps || {}）。

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