在 nextjs 中使用自定义 TypeScript 键入 .d.ts （未找到模块：无法解析...）

Question

我使用的 JS 库不为 TypeScript 提供 @type 定义，所以我创建了自己的.d.ts文件。我们就这样称呼它吧foo.d.ts。我的项目结构如下所示：

...
.next/
pages/
...
typings/
    foo.d.ts
...
tsconfig.json

我的 VS Code 对该定义没有问题，我可以在我的组件中导入，例如：

import {Foo} from "foo";

但在运行时我在浏览器控制台中收到此错误

找不到模块：无法解析“foo”

我尝试添加

“typeRoots”：[“node_modules/@types”，“打字”]

对我来说tsconfig.json但这没有帮助。我还尝试显式添加foo.d.ts到添加的包含部分next-env.d.ts。

foo.d.ts看起来像这样：

declare module 'foo' {
    declare interface ValidationError {
        message?: string;
    }
    declare namespace Foo {
        class Bar {
            constructor(config: any, displayErrorsCallback: (data: ValidationError[]) => void, onSubmitTriggered: () => void);
        }
    }
}

更新（添加了 tsconfig）

{
  "compilerOptions": {
    "target": "es6",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "typeRoots": [
      "node_modules/@types",
      "typings"
    ]
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Answer 1

.d只需在文件名后添加即可，因此将类型定义导入为import {Foo} from "foo.d"; 每当导入时*.d.ts，就这样导入它们，无需编辑配置。