为什么 Angular 将 TypeScript 接口编译为函数？答案

【问题标题】：Why does Angular compile TypeScript interfaces to functions?为什么 Angular 将 TypeScript 接口编译为函数？
【发布时间】：2020-04-21 06:19:22
【问题描述】：

我需要在我的 NodeJS 后端和 Angular 前端之间共享一些通用接口。所以我创建了一个只包含一个库的新 Angular 项目。

这是一个接口示例：

export interface EvPageRef {
    page_id: string;
    src_page: string;
}

如果我使用 TypeScript 3.x 编译上述内容，它不会输出任何内容。没有我所期望的 JavaScript 输出，但是如果我将上面的内容添加到 Angular 库中，那么我会得到以下内容。

    /**
     * @record
     */
    function EvPageRef() { }
    if (false) {
        /** @type {?} */
        EvPageRef.prototype.page_id;
        /** @type {?} */
        EvPageRef.prototype.src_page;
    }

这是为dist/example 项目输出中的umd、esm5 和ems2015 源代码文件夹生成的。

除上述之外，还有 TypeScript 类型定义文件，其中包含 interface 声明，正如预期的那样，它们位于 dist/example/lib 文件夹中。

所以我对此有两个问题：

为什么会出现这个问题，有什么意义？
这不会增加使用该库的 Angular 项目的大小吗？

【问题讨论】：

最奇怪的是if (false)所以这个函数真的没用。
@Angular 是的，起初我认为这是在只理解 JsDoc 的 IDE 中添加对类型支持的 hack，但后来我注意到 @type {?} 毫无价值，但 TypeScript 知道类型是string。这对我来说毫无意义。
不要关闭。这不是一个宽泛或自以为是的问题。这必须有一个特定的技术原因。我可以争辩说不应该生成任何 JavaScript 输出。那不是意见。这是因为 JavaScript 没有接口。在Angular中编译接口有副作用，我想知道为什么。
我想这将是 angular github 上的一个好问题

标签： angular typescript interface angular-library

【解决方案1】：

带有接口作为函数的 JavaScript 输出由 tsickle 创建，它是 Angular 模板的编译中间件，可生成对 Google Closure 友好的代码。

https://angular.io/guide/angular-compiler-options#annotateforclosurecompiler

文档中不清楚为什么这是 Angular 构建过程的一部分。它还声明此选项默认为false。

我更新了我的 tsconfig.lib.json 以禁用该选项，现在我的 JavaScript 文件如预期的那样为空。

tsconfig.lib.json：

  "angularCompilerOptions": {
    "annotateForClosureCompiler": false,
  },

这个项目不包含任何组件，所以我很乐意关闭这个功能，但我很困惑为什么 Angular 库生成器会启用它。文档没有解释这样做有什么问题或好处。

我仍然会接受一个可以回答为什么打开它的答案。

【讨论】：