如何在TypeScript微前端React应用中从SingleSpa工具模块导入共享类型？

背景 #

基于SingleSpa搭建微前端架构，所有子应用均采用TypeScript开发。为复用公共类型/接口，计划通过SingleSpa的Utility modules实现共享，但目前面临类型导入冗余、智能感知失效的问题，暂不考虑发布私有npm包的方案。

当前困境 #

按照现有方案，每个子应用需单独创建declaration.d.ts声明文件来识别工具模块@organization/types-utility的类型，示例代码如下：

// 子应用内的declaration.d.ts
declare module '@organization/types-utility' {
   export type SomeType;
}

这种方式完全违背了共享类型的初衷，造成大量冗余代码。

尝试两种类型导入方式：

// 方式1
import { type SomeType } from '@organization/types-utility';
// 方式2
import type { SomeType } from '@organization/types-utility';

后续使用时遇到两种问题：

• 方案1（直接作为类型标注）

  const someVariable: SomeType;
  

  抛出错误：Cannot use namespace 'SomeType' as a type.

• 方案2（类型断言）

  const someVariable = {} as typeof SomeType;
  

  错误被抑制，但VSCode无法提供SomeType的属性智能提示。

参考问题（翻译自Stack Exchange） #

如何将SingleSpa浏览器端工具模块导入到TypeScript+Parcel项目中？

可行解决方案 #

1. 让Utility模块自带完整类型声明 #

在@organization/types-utility工具模块的源码中直接导出完整的类型定义，同时开启TypeScript的声明文件生成：

• 在工具模块的tsconfig.json中设置：

  {
    "compilerOptions": {
      "declaration": true,
      "declarationDir": "./dist/types"
    }
  }
  

• 在工具模块的package.json中指定类型入口：

  {
    "types": "./dist/types/index.d.ts"
  }
  

  这样所有子应用在加载该工具模块时，TS会自动识别类型，无需手动编写声明文件。

2. 配置TS路径映射直接指向源码 #

在每个子应用的tsconfig.json中添加路径映射，将工具模块的包名指向其源码位置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@organization/types-utility": ["../types-utility/src/index.ts"]
    }
  }
}

这种方式让TS直接读取工具模块的源码类型，无需编译即可获得完整的智能提示，同时避免了冗余的声明文件。

3. 正确的类型导入与使用方式 #

完成上述配置后，直接使用标准的类型导入语法即可正常使用：

import type { SomeType } from '@organization/types-utility';

// 正常标注类型，可获得完整智能提示
const someVariable: SomeType = {
  id: '123',
  name: 'demo'
};

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