打字稿模块增强应该如何正确导入/包含到角度库或应用程序中？答案

【问题标题】：How should typescript module augmentations be properly imported/included into an angular library or application?打字稿模块增强应该如何正确导入/包含到角度库或应用程序中？
【发布时间】：2020-01-20 23:35:27
【问题描述】：

我找到了很多关于如何设置模块扩充文件以向 node_module 添加功能的示例，但我对如何将它们包含在 typescript 编译中有点困惑。我是否应该像这样导入在main.ts（或库的public_api.ts）顶部进行扩充的文件：

import './moduleaugmentationfile';

或者是否有其他标准方法可以使这个附加功能在整个应用程序中可用。

编辑：
This 是一个示例应用。示例模块扩充位于moduleaugmentation.ts。我在main.ts 中添加了一条评论，解释了我对如何最好地包含模块扩充的困惑。

【问题讨论】：

您能否详细说明一下 - 您的具体问题和代码是什么？
@ford04 我添加了一个似乎可行的示例，但由于我没有找到任何有关最佳方法的文档，因此我不确定这是推荐的方法。

标签： angular typescript node-modules

【解决方案1】：

您的示例看起来不错，这也是augment a module 的正确方法。

模块扩充 = 已经有一个由包维护者提供的给定 npm 包的类型声明，您想要扩展它。这里重要的是在顶层有一个export/import 将文件分配给模块范围，否则编译器会期望ambient module declaration（不存在包的类型定义）。

应该不需要手动手动包含类型定义（我认为过去可以使用triple slash directives 来完成，您不要使用import 进行全局声明）。现在编译器使用Automatic inclusion（虽然我不确定不同的Angular配置）：

如果“files”和“include”都未指定，编译器默认包含包含目录和子目录中的所有 TypeScript（.ts、.d.ts 和 .tsx）文件，除了那些使用“exclude”排除的文件" 属性。

关于 RxJS 使用的最后一点提示：您可以直接从包根目录导入 Observable（参见 here 以获取 RxJS v6 文档中的示例），例如

import { Observable } from "rxjs"

，因此您不必依赖包内部结构。

import {Observable} from "rxjs"

declare module "rxjs" {
  interface Observable<T> {
    subscribeAndLog: (a: string) => void
  }
}

干杯，希望对您有所帮助。

【讨论】：

所以在我的示例中，我将导入放在 main.ts 中，但是对于 Angular 库来说呢
我正在考虑将导入放在库的 public-api.t 顶部，而不是应用程序的 main.ts 将起作用。
Vanilla TS 会自动收集由tsconfig.json 指示的项目根目录中的所有全局声明/增强，因此无需在此处手动导入任何内容。虽然我不是 Angular 专家，但如果我在 Angular 示例的 main.ts 中删除 import './moduleaugmentation'，它仍然可以编译，这表明自动包含 moduleaugmentation.ts 会起作用。
如果您查看控制台，当您注释掉导入时，它会在运行时引发错误，因此它会自动收集该扩充。另外，我在我的本地机器上创建了一个类似的项目，它甚至没有构建，所以我不确定为什么它看起来是在 stackblitz 上构建的。我猜我忽略了构建配置中的一些差异。
我最终只是从 stackblitz 下载了项目。如果我取出 moduleaugmentation 的导入，那么它会在本地编译，并且它有同样的问题，它只是在运行时抛出一个错误。