How to use Global extension in Angular?

user_577805 0
Viewed 315

On an Angular 12 application I created the following extension:

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

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

When using in an Angular's component:

var number = stringValue.toNumber();

I get the error:

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

What is the best way to use such extensions in Angular?

Do I need to change the way I am creating the extension?

angular12 angular typescript
1 Answers

You can achieve that like the following:

  • Under src folder create global.d.ts file to define the signature of the extension method, with the following content:
declare global {
  interface String {
    toNumber(): number | null;
  }
}
export {}; // to define this file as a module
  • Add the implementation of the extension method within file string.extension.ts anywhere under src folder, with the following content:
Object.defineProperty(String.prototype, "toNumber", {
  value: function(this: string) {
    return Number(this) || null;
  }
});
export {}; // to define this file as a module
  • Import the string.extension.ts file in app.module.ts:
 import 'PATH_TO_YOUR_FILE/string-extension'
user_151596030
Related