Typescript模块未找到，无法解析。

Question

我正在构建一个React + TypeScript应用程序，在其中创建了一个模块，其中包含在整个项目类中使用的接口。我的IDE可以很好地解析这些接口，但是webpack始终会发送以下错误。我尝试了不同的方法，但无法使其消失。

非常感谢任何帮助。

ERROR in ./assets/src/Pages/Login.tsx Module not found: Error: Can't resolve 'seeyouftp' in 'var/www/app/assets/src/Pages'
 @ ./assets/src/Pages/Login.tsx 43:18-38
 @ ./assets/src/Config/App.tsx
 @ ./assets/entries/bundle.js

这是我的定义文件

|— definitions
     |— types.d.ts
|— entries
|— fonts
|— less
|— src

我的定义文件摘要

declare module 'seeyouftp' {
  interface User {
    admin: boolean;
    roles: string[];
    username: string;
  }

  enum AuthStates {
    success = 'success',
    error = 'error'
  }

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowUnreachableCode": false,
    "baseUrl": "./assets",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "react",
    "lib": [
      "dom",
      "es2019",
      "esnext"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "outDir": "./dist/",
    "resolveJsonModule": true,
    "skipDefaultLibCheck": true,
    "sourceMap": true,
    "strictPropertyInitialization": false,
    "strictNullChecks": true,
    "target": "es5",
    "typeRoots": [
      "./assets/definitions/types.d.ts",
      "./node_modules/@types"
    ],
    "types": [
      "node"
    ]
  },
  "include": [
    "./assets/src/**/*",
    "./assets/definitions/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

我这样导入创建的接口： import { Item, PlayableMedia } from 'seeyouftp'; 其中涉及到的是IT技术相关内容。

- titiyoyo

---

请在导入 seeyouftp 的代码处添加代码。 - Tony Nguyen

seeyouftp 是 npm 包还是你的文件？如果是你的文件，它在哪里？ - Tony Nguyen

seeyouftp is not an npm package. It's only the name of the module contained in my types.d.tsfile. It's declared like so: declare module 'seeyouftp' - titiyoyo

Answer 1

错误消息实际上非常具有误导性，看起来像是 TypeScript 的一个 bug。 似乎 enums 不能直接导出，需要使用 const 才能正确地导出它们。因此，我修改了我的 enum 声明如下：

declare module 'seeyouftp' {

  // exporting a const instead of 
  export const enum AuthStates {
    success = 'success',
    error = 'error'
  }
}

现在一切正常，但那个错误信息非常糟糕，而且耗时很长

- titiyoyo

---

只是一个随机的评论，感谢您跟进并回答了您的帖子。我遇到了同样的问题，并有一种预感枚举是罪魁祸首，因为它是从我的TS项目中唯一无法正确导入的文件。 - Mark

我不认为这是一个 bug，因为它仍然可以解决到一个 types 文件，但这种变化对于我的项目来说是必要的，因为它将 eslint 规则导出为 JavaScript。 - gillyspy

Answer 2

尝试导出声明，看看是否有所改变：

declare module 'seeyouftp' {
export  interface User {
    admin: boolean;
    roles: string[];
    username: string;
  }

export  enum AuthStates {
    success = 'success',
    error = 'error'
  }

- Ivan V.

---

我尝试将模块中的每个接口都导出，但仍然无法工作。 - titiyoyo

Answer 3

你需要在 /definitions 目录下创建一个名为 seeyouftp 的文件夹（我假设 seeyouftp 是你的 JS 模块名称），并在 /definitions/seeyouftp 中放置一个名为 types.d.ts 的文件，其结构如下所示。

|— definitions
 |—seeyouftp
  |— index.d.ts
|— entries
|— fonts
|— less
|— src

并更新你的tsconfig

"typeRoots": [
  "./assets/definitions",
  "./node_modules/@types"
],

- Tony Nguyen

---

当你说“我假设seeyouftp是你的js模块名称”时，你是指package.json中的name字段吗？ - titiyoyo

你通常在js中使用的导入名称。 还有一件事需要在tsconfig文件中更新。请检查我的更新注释并尝试它。 - Tony Nguyen

我不知道你所说的“在js中通常用于导入的名称”的意思。我使用这种类型的导入来导入类型，这是你所指的吗？ import { Item, PlayableMedia } from 'seeyouftp'; - titiyoyo

是的。所以我认为 seeyouftp 是正确的名称。你尝试更新 tsconfig 了吗？ - Tony Nguyen

是的，事实上我的tsconfig已经按照这种方式设置了。 - titiyoyo

Answer 4

因为这是一个webpack问题，您必须更新您的webpack配置。Webpack需要知道在哪里找到模块seeyouftp：

// webpack.config.js
const path = require('path');

module.exports = {
  //...
  resolve: {
    // Add an alias
    alias: {
      'seeyouftp': path.resolve(__dirname, 'definitions/types.d.ts')
    }
  }
};

对于文件路径types.d.ts，我假设您的webpack配置文件位于definitions文件夹旁边。

这里是相关的webpack文档。

- Baboo