How to use Global extension in Angular?

Question

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?

Answer 1

You can achieve this with the following:

• You need to define the signature of the extension method in the global interface. Either put it in a separate file, e.g. under the src folder create a global.d.ts file. Or add it to the file of the implementation of the method further below:

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(this: string) {
    return Number(this) || null;
  }
});
export {}; // to define this file as a module

• Import the string-extension.ts file into app.module.ts to make the extension available globally:

 import 'PATH_TO_YOUR_FILE/string-extension'