是否可以使用单spa导入映射+ SystemJS并包含TypeScript声明？

如何解决是否可以使用单spa导入映射+ SystemJS并包含TypeScript声明？

我创建了一些应用程序，它们遵循与react-microfrontend上列出的Single-spa examples page项目相同的模式。但是，这些示例未使用TypeScript。

当App2尝试导入App1中存在的函数时，我收到TS错误，因为App2无法找到App1对象的类型。这对我来说很有意义，因为root-config project的importmap.json文件中引用的index.html仅为每个微前端的.js文件列出了一个URL。我真的不想在各处添加@ ts-ignore语句，也不想在没有类型安全的情况下进行跨应用程序通信。

我所指的例子：

Planets应用程序中的

This file引用了Styleguide应用程序中的Button组件。除非我在import语句之前的行上放置@ ts-ignore，否则无法构建它，因为我的Planets应用无法找到Styleguide的类型声明。

一般来说，我对于导入地图和SystemJS还是陌生的，因此，如果有人可以指出正确的方向，我将不胜感激。实际上，我已经遇到了将Styleguide构造为常规npm库并将其作为依赖项包含在Planets package.json文件中的麻烦……这完全违背了使用Single-spa的全部目的

importmap.json

{
  "imports": {
    "@react-mf/planets": "//localhost:9000/react-mf-planets.js","@react-mf/styleguide": "//localhost:9001/react-mf-styleguide.js"
  }
}

page.component.ts

// @ts-ignore
import { Button } from "@react-mf/styleguide";

...

render() {
  return (
    // Unable to view the available props
    <Button label="Hello World" />
  );
}

解决方法

不幸的是，不能，它们不能通过导入映射共享，因为它在浏览器中运行，并且浏览器不理解TypeScript语法。

您的替代方案是：

• 将模块的类型发布到npm注册表中，并将其npm install发布到每个相关的微前端中
  • 这里有一个警告：您需要在共享模块的每次新发布中进行更新，但是可以使用各种工具（例如renovate
  ）来自动进行更新。
• Mock the utility module's types

有关更多信息，请参见本Github问题：https://github.com/single-spa/single-spa/issues/609#issuecomment-665132965