TS4023报错：Bit组件库构建时ProviderProps无法命名如何解决

报错根因 #

TS在构建生成组件库的对外类型声明（.d.ts）时，需要将你导出的NotificationProvider的类型写入声明文件，但该组件的类型依赖第三方库react-notification-provider未导出的内部接口ProviderProps，导致TS无法完成类型命名。开发、测试阶段无需生成对外声明文件，因此不会触发该错误。

可行解决方案 #

• 方案1：手动声明导出组件类型，绕开未导出接口
  你可以自行定义和ProviderProps结构完全一致的接口，再将导出的NotificationProvider断言为该类型，无需修改第三方库代码：

import { createNotificationContext } from "react-notification-provider";
import { NotificationProps } from "@cannabitrx/ui.notification";
import type { ReactNode } from "react";

// 自行定义和第三方库结构一致的Props接口
// 如果项目中找不到ImmutableQueue类型，可直接将queue字段类型写为unknown
interface NotificationProviderProps<T> {
  queue?: unknown;
  children: ReactNode;
}

const { NotificationProvider: RawNotificationProvider, useNotificationQueue, createMockNotificationQueue } =
  createNotificationContext<NotificationProps>();

// 手动声明类型后导出
export const NotificationProvider = RawNotificationProvider as React.FC<NotificationProviderProps<NotificationProps>>
export { useNotificationQueue, createMockNotificationQueue };

• 方案2：补充第三方库的模块声明，补全缺失的导出
  在项目中新增一个全局类型声明文件（如global.d.ts），为react-notification-provider补充缺失的类型导出：

declare module 'react-notification-provider' {
  // 导出原本未对外暴露的ProviderProps
  export interface ProviderProps<Notification> {
    queue?: unknown;
    children: React.ReactNode;
  }
  // 保留库原本的导出类型
  export * from 'react-notification-provider/dist/index';
}

TS会自动合并模块声明，后续就能正常识别ProviderProps类型，编译即可通过。

• 方案3：临时关闭类型校验（应急使用，不推荐）
  如果不需要对外暴露精准的类型，你可以在报错行上方添加注释忽略该错误：

// @ts-ignore
const { NotificationProvider, useNotificationQueue, createMockNotificationQueue } =
  createNotificationContext<NotificationProps>();

也可以在组件对应的tsconfig.json中开启skipLibCheck: true，跳过对第三方库的类型校验，也能解决该报错。

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