emitDecoratorMetadata 及其在转译代码中的重要性

Posted 2023-02-23

【中文标题】emitDecoratorMetadata 及其在转译代码中的重要性

【英文标题】：emitDecoratorMetadata and its importance in transpiled code

【发布时间】：2018-04-01 10:20:54

【问题描述】：

我很好奇 emitDecoratorMetadata 选项在将 TypeScript 转换为 javascript（在 Angular 2 上下文中）的重要性。如果设置为false，结果代码中不会包含元数据，会有什么影响？

【问题讨论】：

当我更改为 "emitDecoratorMetadata":false 时，我的 Angular 12 构建从 9 分钟缩短到了 3 分钟。小袋鼠的表现也有类似的提升。所以除非我能找到一个绝对必要的理由，否则它将保持这种状态。

【参考方案1】：

如果您想在运行时反映元数据，则需要装饰器元数据。

如果您不这样做，例如使用Reflect.metadata，则排除输出没有影响。默认情况下，emitDecoratorMetadata 是 false。装饰器仍然可以工作，但设计时信息在运行时不可用。

【参考方案2】：

这是我读到的一个场景……

注入器使用 TypeScript 编译器输出的元数据来确定组件请求的服务类型。元数据输出有关方法上声明的参数的数量和类型的信息。

依赖注入系统然后可以查看构造函数参数元数据来确定要注入的类型。

所有这些都由名为

的特殊 TypeScript 编译器选项启用

"emitDecoratorMetadata":true

通常在tsconfig.json 文件中配置。

如果 emitDecoratorMetadata 未设置为 true，Angular 将无法找出要在您的应用中注入的内容。

如果您使用 Angular CLI 创建应用程序。该选项默认开启（设置为true）。

只有在以下情况下才会为服务或组件发出元数据 类上有一个装饰器。哪个装饰器无关紧要。任何 装饰器将导致发出元数据。这就是为什么我们添加 Injectable() 装饰器到服务中，我们不必将它添加到 组件，因为它们已经有了组件装饰器

因此，注入系统会计算出要注入到组件构造函数中的类型。

【讨论】：

从 Angular 8+ 开始，“emitDecoratorMetadata”:true 至少在我的使用场景中导致“在初始化之前无法访问”问题，而不是使用 AOT 进行开发构建。见：github.com/angular/angular-cli/issues/15077