如何在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

在 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'

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

How to use Global extension in Angular?

angular

typescript

angular12