如何在TypeScript中扩展React函数式组件？

你需要借助TypeScript工具类型和React内置的类型提取能力，自动推导包装组件的Props类型，同时保证对原组件类型变化的兼容性：

步骤1：提取并调整原组件的Props类型 #

使用React.ComponentProps提取TsCode的所有属性类型，再通过Omit工具类型移除你要固定的pretty属性——这样用户使用PrettyTsCode时就无需再传入pretty参数：

import { ComponentProps } from 'react';

// 提取TsCode的Props，排除固定的pretty属性
type PrettyTsCodeProps = Omit<ComponentProps<typeof TsCode>, 'pretty'>;

如果TsCode支持ref传递，可改用ComponentPropsWithRef保留ref相关类型；若无需传递ref，用ComponentPropsWithoutRef会更严谨。

步骤2：定义包装组件 #

将组件的props类型指定为上面定义的PrettyTsCodeProps，内部固定pretty={true}后展开剩余props即可：

const PrettyTsCode = (props: PrettyTsCodeProps) => {
  return <TsCode pretty={true} {...props} />;
};

为什么之前的方式不生效？ #

• const PrettyTsCode: TsCode：TsCode是组件实例的类型，并非组件本身的类型，二者类型不匹配。
• const PrettyTsCode: typeof TsCode：typeof TsCode是原组件的完整类型，它要求接收包含pretty的所有props，但我们的包装组件不需要用户传入pretty，因此会触发类型冲突。

这种方案的核心优势是，当TsCode的Props类型未来更新时，PrettyTsCodeProps会自动同步，无需手动维护类型定义，确保了代码的健壮性。

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