React Monorepo中TS组件类型推断的泛型适配问题

场景背景 #

Monorepo结构如下：

...仓库相关文件
packages /
    package-a
    package-b
    package-c
   ...其他包

• package-a：全仓通用基础React组件库，无外部包依赖（避免循环依赖）
• package-b：对接特定外部库的组件库，依赖package-a
• package-c：业务组件库，依赖package-a和package-b

核心需求：package-a中的Breadcrumbs组件需支持传入package-a的BaseLink或package-b的ExtendedLink作为linkComponent属性，但两者Props类型存在差异——ExtendedLink的to属性为IDestToken对象类型（无法改为string，否则会引入额外校验问题）。

解决方案 #

通过泛型约束+通用类型抽象实现跨包组件的类型兼容，同时保证package-a的独立性。

1. 在package-a中定义通用类型与Breadcrumbs组件 #

先抽象出通用的Link属性约束，再用泛型绑定Breadcrumbs的item数据与linkComponent的类型：

// package-a/src/types.ts
import type { ReactNode } from 'react';

// 通用Link属性约束：仅要求必须具备to和children属性，不限制to的具体类型
export type GenericLinkProps<TTo = unknown> = {
  to: TTo;
  children: ReactNode;
  // 可添加其他跨Link组件的公共属性
};

// BaseLink专属Props
export interface IBaseLinkProps extends GenericLinkProps<string> {
  target?: '_blank' | '_self';
}

// package-a/src/components/BaseLink.tsx
import { FC } from 'react';
import { IBaseLinkProps } from '../types';

export const BaseLink: FC<IBaseLinkProps> = ({ to, children, target = '_self' }) => {
  return <a href={to} target={target}>{children}</a>;
};

// package-a/src/components/Breadcrumbs.tsx
import { FC, ReactNode } from 'react';
import { GenericLinkProps } from '../types';

// Breadcrumb项类型：与Link组件的to类型绑定
export type BreadcrumbItem<TTo> = {
  label: ReactNode;
  to: TTo;
  isActive?: boolean;
};

// Breadcrumbs组件Props：通过泛型TTo统一item与linkComponent的to类型
export interface BreadcrumbsProps<TTo> {
  items: BreadcrumbItem<TTo>[];
  linkComponent: FC<GenericLinkProps<TTo>>;
}

export const Breadcrumbs = <TTo,>({ items, linkComponent: Link }: BreadcrumbsProps<TTo>) => {
  return (
    <div className="breadcrumbs">
      {items.map((item, index) => (
        item.isActive ? (
          <span key={index}>{item.label}</span>
        ) : (
          <Link key={index} to={item.to}>
            {item.label}
          </Link>
        )
      ))}
    </div>
  );
};

2. 在package-b中实现ExtendedLink组件 #

通过Omit覆盖继承自IBaseLinkProps的to类型，同时整合react-router的属性：

// package-b/src/types.ts
import type { IBaseLinkProps } from 'package-a';
import type { LinkProps as RouterLinkProps } from 'react-router-dom';

export interface IDestToken {
  path: string;
  params?: Record<string, string>;
}

// ExtendedLink专属Props：覆盖to类型为IDestToken，保留其他公共属性
export interface IExtendedLinkProps extends Omit<IBaseLinkProps, 'to'>, RouterLinkProps {
  to: IDestToken;
}

// package-b/src/components/ExtendedLink.tsx
import { FC } from 'react';
import { Link as RouterLink } from 'react-router-dom';
import { IExtendedLinkProps } from '../types';

export const ExtendedLink: FC<IExtendedLinkProps> = ({ to, children, ...rest }) => {
  // 将IDestToken转换为react-router可识别的路径格式
  const resolvedPath = Object.entries(to.params || {}).reduce(
    (path, [key, value]) => path.replace(`:${key}`, value),
    to.path
  );

  return <RouterLink to={resolvedPath} {...rest}>{children}</RouterLink>;
};

3. 在package-c中使用组件 #

此时传入BaseLink或ExtendedLink都能获得完整的类型校验：

// package-c/src/App.tsx
import { Breadcrumbs, BaseLink } from 'package-a';
import { ExtendedLink, IDestToken } from 'package-b';

// 使用BaseLink的场景
const baseBreadcrumbItems = [
  { label: '首页', to: '/' },
  { label: '商品列表', to: '/products', isActive: true },
];

// 使用ExtendedLink的场景
const extendedBreadcrumbItems = [
  { label: '控制台', to: { path: '/dashboard' } },
  { label: '订单详情', to: { path: '/orders/:id', params: { id: '123' } }, isActive: true },
];

export const App = () => {
  return (
    <div>
      <Breadcrumbs items={baseBreadcrumbItems} linkComponent={BaseLink} />
      <Breadcrumbs items={extendedBreadcrumbItems} linkComponent={ExtendedLink} />
    </div>
  );
};

核心优势 #

• 避免循环依赖：所有通用类型定义在package-a中，无需引入package-b的类型，符合package-a的独立性要求。
• 类型严格兼容：通过泛型TTo确保Breadcrumbs的item数据与linkComponent的to类型完全匹配，消除类型不兼容错误。
• 扩展性强：后续新增其他Link组件时，只需实现GenericLinkProps<TTo>约束即可无缝接入Breadcrumbs。

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