Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 & Typescript: How to add string extension method/prototype

I want to add extension method format() to String. So my expectation is that I can use String.format wherever in my project. I had followed the guideline of this topic but this not help. I got this error: enter image description here

Can anyone help me?

Thanks in advance.

p.s: I want to add the extension method like I did in angular 1.xx

enter image description here


Edit

use declare global won't get error.

declare global {
interface String {
    format(): string;
}}

String.prototype.format = function () :string {
var result = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
    var reg = new RegExp("\\{" + i + "\\}", "gm");
    result = result.replace(reg, arguments[i + 1]);
}
return result;}

How we use String.format('<img alt="{0}" title="{0}" src="{1}" />', name, id); Since format does not require parameters

like image 268
jack.pop Avatar asked Apr 27 '17 02:04

jack.pop


People also ask

Should I learn AngularJS or Angular 2?

Angular 2 is more useful for developing mobile applications and includes higher performance speeds than AngularJS. JavaScript is easier to understand than TypeScript, making Angular 2 a more advanced and challenging framework for developers to use.

How old is Angular 2?

Angular 2 moved to Beta in December 2015, and the first release candidate was published in May 2016. The final version was released on September 14, 2016.

What is Angular 2 architecture?

Architectural Overview Angular is designed to be modular, an Angular 2 app comprises of several components, which are connected via routing or selectors, these components may have templates attached to it which may display component properties and attach events to interact with the properties.


2 Answers

For me the following worked in an Angular 6 project using TypeScript 2.8.4.

In the typings.d.ts file add:

interface String {
  format(...args: string[]): string;
}

Note: No need to 'declare global'.

In a new file called string.extensions.ts add the following:

interface String {
  format(...args: string[]): string;
}

String.prototype.format = function (...args: string[]): string {
  var s = this;
  return s.replace(/{(\d+)}/g, function (match, number) {
    return (typeof args[number] != 'undefined') ? args[number] : match;
  });
};

To use it, first import it:

import '../../string.extensions';

Obviously your import statement should point to the correct path. Inside your class's constructor or any method:

console.log("Hello {0}".format("world"));
like image 136
Jacques Avatar answered Sep 25 '22 05:09

Jacques


Based on this playground it works just fine.

It probably doesn't work for you because you're probably using modules (import/export), in that case you need to do that in the global augmentation:

declare global {
    interface String {
        foo(): number;
    }
}

Then you won't get an error when adding foo to the prototype.


Edit

Seems like you want a static function on String, so you need to do this:

declare global {
    interface StringConstructor {
        format(): string;
    }
}

String.format = function (...args: string[]) {
    ...
}

I also added the ...args: string[] to the signature which tells the compiler that the function expects any number of strings as arguments.

like image 21
Nitzan Tomer Avatar answered Sep 23 '22 05:09

Nitzan Tomer