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

Question

在 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 中使用此类扩展的最佳方法是什么？
我是否需要更改创建扩展的方式？

Answer 1

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

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

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

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

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'