为什么 .d.ts 文件模块声明在 Angular 应用程序中不起作用？答案

【问题标题】：Why .d.ts file module declaration doesn't work in angular app?为什么 .d.ts 文件模块声明在 Angular 应用程序中不起作用？
【发布时间】：2021-10-11 02:33:57
【问题描述】：

我在 src 文件夹中创建了名为 global.d.ts 的文件，内容如下：

declare module 'ol-contextmenu';

我也尝试将它定位在 root 中，在 node-modules/@types 中，但它不起作用。

我的组件像这样导入 ol-contextmenu（没有类型）：

import ContextMenu from 'ol-contextmenu';

我尝试以多种方式编辑 tsconfig.json 以找到 .d.ts 文件。例如：

"include": [
  "src/global.d.ts"
]

但我总是出错：

错误 TS7016：找不到模块的声明文件 'ol 上下文菜单'。 'C:/dev/nis/NIS/ClientApp/node_modules/ol-contextmenu/dist/ol-contextmenu.js' 隐含地具有“任何”类型。尝试npm install @types/ol-contextmenu（如果存在）或添加新声明 (.d.ts) 包含declare module 'ol-contextmenu';的文件

5 从 'ol-contextmenu' 导入 ContextMenu； ~~~~~~~~~~~~~~~~~~~

我也尝试将文件复制到 node-modules/@types 但错误始终相同。

【问题讨论】：

标签： angular typescript

【解决方案1】：

您可以采用声明 here in the Typescript's official docs 的方式之一，以使您的 Typescript 知道您将使用 ECMAScript 模块格式而不是 CommonJs 模块格式。

在我的例子中，我遇到了创建 index.d.ts 文件在我的 Angular 应用程序的 src 文件夹下 的方式，并在其中声明所有您需要声明为 ECMAScript 模块的 js 文件，例如在您的情况下：

declare module 'ol-contextmenu';

为什么？好吧，根据文档：

TypeScript 复制模块中的节点解析 package.json，还有一个用于查找 .d.ts 文件的附加步骤。大致来说，解析会首先检查可选的“类型”字段，然后是“main”字段，最后会在根目录下尝试index.d.ts。

【讨论】：