React.js中如何从Package C动态修改Package A组件的Props类型？

场景说明 #

我有三个独立发布至NPM的包（Package A、B、C）：

• Package A包含React组件，其组件Props类型导入自Package B，代码如下：

// Package A
import { HeaderProps } from '@package/b'

export const Header: React.FC<HeaderProps> = (props) => <HeaderComponent {...props} />

• Package C中也包含Package A组件的Props类型定义。

问题 #

导入Package C后，如何让Header组件的Props自动变更为Package C中的定义？我曾尝试使用module declaration，但出现报错。

解决方案 #

方案一：给Package A的组件加泛型支持

修改Package A的Header组件，将Props设为泛型并默认使用Package B的类型，这样就能通过传入Package C的类型实现覆盖：

// Package A 修改后代码
import { HeaderProps } from '@package/b';
import type { React } from 'react';

// 定义泛型组件，默认Props为Package B的HeaderProps
export const Header = <T extends HeaderProps = HeaderProps>(props: T) => {
  return <HeaderComponent {...props} />;
};

业务代码中使用时，直接传入Package C的类型即可：

// 业务代码
import { Header } from '@package/a';
import { CustomHeaderProps } from '@package/c';

// 此时Header的Props自动替换为CustomHeaderProps
<Header<CustomHeaderProps> title="测试" customProp="自定义内容" />;

方案二：修正TypeScript模块扩展的写法

如果坚持用module declaration，要注意两个关键前提：

1. 确保Package B中的HeaderProps是**接口（interface）**而非类型别名（type）——TypeScript仅支持扩展接口：

// Package B 中的定义
export interface HeaderProps {
  title: string;
  // 原有属性
}

2. 在Package C中正确扩展该接口：

// Package C 中代码
declare module '@package/b' {
  export interface HeaderProps {
    // 添加或覆盖属性
    customProp: string;
  }
}

3. 业务代码中先导入Package C再导入Package A，类型会自动合并：

// 业务代码
import '@package/c'; // 先加载类型扩展
import { Header } from '@package/a';

// 此时Header的Props已包含customProp
<Header title="测试" customProp="自定义内容" />;

之前报错大概率是因为Package B用了type定义HeaderProps，导致无法扩展。

方案三：让Package A自动识别并切换Props来源

如果希望无需业务代码干预，安装Package C后自动生效，可以让Package A优先尝试导入Package C的Props：

// Package A 入口文件
import type { React } from 'react';

// 优先加载Package C的Props，失败则 fallback到Package B
type HeaderProps = typeof import('@package/c').HeaderProps extends never
  ? import('@package/b').HeaderProps
  : import('@package/c').HeaderProps;

export const Header: React.FC<HeaderProps> = (props) => {
  return <HeaderComponent {...props} />;
};

这种方式下，只要项目安装了Package C，Header的Props就会自动切换为Package C的定义。

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