TypeScript泛型实现React条件包装组件的类型错误优化问询

问题描述 #

我实现了一个可提取First、Second组件公共字段的条件包装组件，客户端使用时类型校验正常，但组件内部出现类型错误。错误提示为：is assignable to the constraint of type FirstProps, but FirstProps could be instantiated with a different subtype of constraint Record<string, any>，希望优化类型定义解决commonProps的类型问题。

原组件代码如下：

const ConditionalWrapperWithCommon = <FirstProps extends Record<string, any>, SecondProps extends Record<string, any>>({
    commonProps,
    secondProps,
    Second,
    firstProps,
    First,
    children,
    condition,
}: TComponentWithCommonProps<FirstProps, SecondProps>) => {
    // error here: is assignable to the constraint of type FirstProps, but FirstProps could be instantiated with a different subtype of constraint Record<string, any>
    const mergedFirstProps: FirstProps = {
        ...commonProps,
        firstProps,
    };
    // error here
    const mergedSecondProps: SecondProps = {
        ...commonProps,
        secondProps,
    };
    return (
        <>
            {condition ? <First {...mergedFirstProps}>{children}</First> : <Second {...mergedSecondProps}>{children}</Second>}
        </>
    );
};

type TComponentWithCommonProps<FirstProps, SecondProps> = {
    condition: boolean;
    First: React.FC<FirstProps>;
    Second: React.FC<SecondProps>;
    firstProps: Omit<FirstProps, Extract<keyof FirstProps, keyof SecondProps>>;
    secondProps: Omit<SecondProps, Extract<keyof FirstProps, keyof SecondProps>>;
    commonProps: Pick<FirstProps & SecondProps, Extract<keyof FirstProps, keyof SecondProps>>;
    children?: React.ReactNode;
};

错误原因 #

TypeScript无法确保commonProps与firstProps/secondProps合并后完全匹配FirstProps/SecondProps的具体类型。因为泛型FirstProps和SecondProps可以被实例化为带有额外约束的子类型，合并后的对象结构无法被TS自动推断为完全符合泛型定义的类型。

解决方案 #

方案1：拆分泛型参数（推荐） #

将公共props、First组件独有props、Second组件独有props拆分为独立泛型，从根源上明确类型结构，让TS能准确推断合并后的props类型：

import React from 'react';

// 重新定义组件props类型，拆分公共/独有部分
type ConditionalWrapperProps<CommonProps, FirstOnlyProps, SecondOnlyProps> = {
  condition: boolean;
  First: React.FC<CommonProps & FirstOnlyProps>;
  Second: React.FC<CommonProps & SecondOnlyProps>;
  firstProps: FirstOnlyProps;
  secondProps: SecondOnlyProps;
  commonProps: CommonProps;
  children?: React.ReactNode;
};

const ConditionalWrapperWithCommon = <
  CommonProps extends Record<string, any>,
  FirstOnlyProps extends Record<string, any>,
  SecondOnlyProps extends Record<string, any>
>({
  commonProps,
  secondProps,
  Second,
  firstProps,
  First,
  children,
  condition,
}: ConditionalWrapperProps<CommonProps, FirstOnlyProps, SecondOnlyProps>) => {
  // 合并公共props与First独有props，类型自动匹配First组件的props要求
  const mergedFirstProps = {
    ...commonProps,
    ...firstProps,
  };
  // 合并公共props与Second独有props，类型自动匹配Second组件的props要求
  const mergedSecondProps = {
    ...commonProps,
    ...secondProps,
  };

  return (
    <>
      {condition ? <First {...mergedFirstProps}>{children}</First> : <Second {...mergedSecondProps}>{children}</Second>}
    </>
  );
};

这种方式的优势是类型边界清晰，TS无需额外推断即可确认合并后的props完全符合组件要求，同时客户端使用时的类型体验也保持一致。

方案2：类型断言（快捷但需谨慎） #

如果不想调整泛型结构，可以使用类型断言跳过TS的类型检查，但需确保业务逻辑中合并后的props确实符合要求：

const mergedFirstProps = {
    ...commonProps,
    ...firstProps,
} as FirstProps;

const mergedSecondProps = {
    ...commonProps,
    ...secondProps,
} as SecondProps;

这种方式虽然快速解决错误，但会跳过TS的类型校验，若后续props结构变更可能引入隐性问题，仅建议在明确类型安全的场景下使用。

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