Question

即使VS Code正确解析了模块，Typescript react app也始终无法导入接口定义。

我使用了基于swagger规范的openapi代码生成器，使用create-react-app和REST客户端构建了一个typescript react应用。

然后，我将整个应用程序中生成的接口定义用作类型定义。

但是，由于某种原因，我始终不能一次导入这些定义。

我已经尝试删除node_modules和npm install。

显示问题的文件（ModelProxy.ts）：

import { Model } from '../generated'

生成的模块index.ts文件：

export * from './models'

模型模块index.ts文件：

export * from './Model'

Model.ts文件：

export interface Model {...

简化的文件结构：

| src
| - api
| - - proxies
| - - - index.ts
| - - - ModelProxy.ts
| - - generated
| - - - index.ts
| - - - models
| - - - - index.ts
| - - - - Model.ts

我从React组件导入ModelProxy进行api调用并隔离自动生成的代码。这种模式已经运行了一段时间了。

令我惊讶的是Visual Studio Code很好地解析了类型定义。但是，该应用程序无法生成。

构建失败，并显示错误：

./src/api/proxies/ModelProxy.ts
Attempted import error: 'Model' is not exported from '../api'.

出于机密原因，我更改了文件名。

Answer 1

对于遇到相同问题的任何人，我认为openapi代码生成器版本4.0.0（SNAPSHOT内置01/11/2019）使用命名空间生成打字稿代码，以模拟枚举的接口内部的静态字段，如下所示：

interface Pet {
  status: Pet.StatusEnum
  ...
}

// later in the file ...

export namespace Pet {
  export enum StatusEnum {
    Available = 'available',
    Pending = 'pending',
    Sold = 'sold'
  }
}

That is not supported by Babel，导致错误的原因。

对我来说，解决方法是手动编辑文件以使用其他名称（如示例中的PetStatusEnum）导出枚举，并完全放弃名称空间。像这样：

interface Pet {
  status: PetStatusEnum
  ...
}

// later in the file ...

export enum PetStatusEnum {
  Available = 'available',
  Pending = 'pending',
  Sold = 'sold'
}

OpenAPI维护人员正在尝试在this issue中解决此问题。

Answer 2

在尝试从src构建一些打字稿node_modules时，我遇到了同样的问题。

插件@babel/plugin-transform-modules-commonjs帮助了我。

尝试导入错误：未从“ ../module”导出“模型”

2 个答案: