从Typescript库导入的符号未定义

Question

我正在使用Typescript开发一个React / Redux应用程序。为了简化开发，我想为每个“域”或“功能”创建库，这些库将封装域的详细信息并将API公开给顶层应用程序。

到目前为止，我已经创建了一个名为@foo/foo的库（使用Typescript）和一个依赖于该库的主应用程序。该库具有一个顶级index.ts文件，如下所示：

export * from "./services/Executor";
export * from "./services/Foo";
export * from "./services/Result";
export * from "./services/listFoo";

文件./services/Executor.ts导出一堆函数，例如：

export const fetchFoo = ...

然后，我使用create-react-app --script react-ts创建了一个应用程序，并在其中一个动作文件中做了一个操作：

import { fetchFoo } from '@foo/foo';
...

但是当我使用npm run start运行React应用程序时，我得到了：

  

TypeError：fetchFoo不是函数

根据我在Web上的研究，我假设我正在弄乱模块导入语义：两个软件包都已配置（在tsconfig.json中，并使用es6编译为esModuleInterop: true。我尝试更改modules字段，但无济于事。

我在做什么错了？

更新：下面的代码演示了该问题：https://github.com/abailly/react-ts-import-module

Answer 1

您应该在package.json的“ main”键下引用构建输出，并在“ types”键下指向主声明文件：

{
  ...
  "main": "build/index.js",
  "types": "build/index.d.ts",
  ...
}

CRA tsc / webpack捆绑时将查找JS文件。默认情况下，导入的模块不会进行转译（虽然可以启用此功能，但是由于您是单独构建库的，因此这不是必需的）

我希望能奏效（如果可以的话，会有所帮助）