如何编写TypeScript d.ts声明文件同时支持全量导入与子路径导入

你之前的写法存在两个核心问题：

• 声明根模块时，ComponentB、ComponentC的导入路径错误，都指向了ComponentA的路径
• 模块导出语法不符合ES模块规范，默认导入的内容不能直接写export ComponentA导出

你可以直接通过模块重导出的方式实现需求，无需重复定义组件类型，完整声明文件如下：

// 先声明各子路径模块类型
declare module 'internal-js-library/lib/ComponentA/ComponentA' {
  import { FC } from 'react';

  export type ComponentAProps = { /* 你的属性定义 */ };

  const ComponentA: FC<ComponentAProps>;
  export default ComponentA;
}

declare module 'internal-js-library/lib/ComponentB/ComponentB' {
  import { FC } from 'react';

  export type ComponentBProps = { /* 你的属性定义 */ };

  const ComponentB: FC<ComponentBProps>;
  export default ComponentB;
}

declare module 'internal-js-library/lib/ComponentC/ComponentC' {
  import { FC } from 'react';

  export type ComponentCProps = { /* 你的属性定义 */ };

  const ComponentC: FC<ComponentCProps>;
  export default ComponentC;
}

// 根模块直接重导出各子路径的内容
declare module 'internal-js-library' {
  export { default as ComponentA } from 'internal-js-library/lib/ComponentA/ComponentA';
  export { default as ComponentB } from 'internal-js-library/lib/ComponentB/ComponentB';
  export { default as ComponentC } from 'internal-js-library/lib/ComponentC/ComponentC';

  // 如果需要对外导出Props类型也可以在这里同步导出
  export type { ComponentAProps } from 'internal-js-library/lib/ComponentA/ComponentA';
  export type { ComponentBProps } from 'internal-js-library/lib/ComponentB/ComponentB';
  export type { ComponentCProps } from 'internal-js-library/lib/ComponentC/ComponentC';
}

配置完成后两种导入方式都可以正常获得类型提示：

1. 全量具名导入（适合快速开发，需要配合打包工具的tree shaking配置，否则可能全量打入产物）

import { ComponentA, ComponentC, ComponentAProps } from 'internal-js-library';

2. 子路径默认导入（天然支持tree shaking，不需要的组件不会被打包）

import ComponentA from 'internal-js-library/lib/ComponentA/ComponentA';
import type { ComponentAProps } from 'internal-js-library/lib/ComponentA/ComponentA';

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