如何在 Angular 中使用全局扩展？

【问题标题】：How to use Global extension in Angular?如何在 Angular 中使用全局扩展？
【发布时间】：2021-10-30 08:42:14
【问题描述】：

在 Angular 12 应用程序上，我创建了以下扩展：

declare global {
  interface String {
    toNumber(): number | null;
  }
}

Object.defineProperty(String.prototype, "toNumber", {
  value: function(this: string) {
    return Number(this) || null;
  }
});

在 Angular 的组件中使用时：

var number = stringValue.toNumber();

我得到错误：

Property 'toNumber' does not exist on type 'string'.

在 Angular 中使用此类扩展的最佳方式是什么？

我需要改变创建扩展的方式吗？

【问题讨论】：

我刚刚在 Stackbliz 中快速测试了它 ==> stackblitz.com/edit/…。但它看起来工作正常。
@Unknown Strange。在我的应用程序中，它仅在使用 Amer Yousuf 实现时才有效

标签： angular typescript angular12

【解决方案1】：

您可以通过以下方式实现：

在src文件夹下创建global.d.ts文件，定义扩展方法的签名，内容如下：

declare global {
  interface String {
    toNumber(): number | null;
  }
}
export {}; // to define this file as a module

在src文件夹下的文件string.extension.ts中添加扩展方法的实现，内容如下：

Object.defineProperty(String.prototype, "toNumber", {
  value: function(this: string) {
    return Number(this) || null;
  }
});
export {}; // to define this file as a module

将string.extension.ts文件导入app.module.ts：

 import 'PATH_TO_YOUR_FILE/string-extension'

【讨论】：