How to extend String Prototype and use it next, in Typescript?
I am extending String prototype chain with a new method but when I try to use it it throws me an error: property 'padZero' does not exist on type 'string'. Could anyone solve this for me?
The code is below. You can also see the same error in Typescript Playground.
interface NumberConstructor {
padZero(length: number);
}
interface StringConstructor {
padZero(length: number): string;
}
String.padZero = (length: number) => {
var s = this;
while (s.length < length) {
s = '0' + s;
}
return s;
};
Number.padZero = function (length) {
return String(this).padZero(length);
}
Solution 1:
This answer applies to TypeScript 1.8+. There are lots of other answers to this sort of question, but they all seem to cover older versions.
There are two parts to extending a prototype in TypeScript.
Part 1 - Declare
Declaring the new member so it can pass type-checking. You need to declare an interface with the same name as the constructor/class you want to modify and put it under the correct declared namespace/module. This is called scope augmentation.
Extending the modules in this way can only be done in a special declaration .d.ts files*.
//in a .d.ts file:
declare global {
interface String {
padZero(length : number) : string;
}
}
Types in external modules have names that include quotation marks, such as "bluebird".
The module name for global types such as Array<T> and String is global, without any quotes. However, in many versions of TypeScript you can forego the module declaration completely and declare an interface directly, to have something like:
declare interface String {
padZero(length : number) : string;
}
This is the case in some versions pre-1.8, and also some versions post-2.0, such as the most recent version, 2.5.
Note that you cannot have anything except declare statements in the .d.ts file, otherwise it won't work.
These declarations are added to the ambient scope of your package, so they will apply in all TypeScript files even if you never import or ///<reference the file directly. However, you still need to import the implementation you write in the 2nd part, and if you forget to do this, you'll run into runtime errors.
* Technically you can get past this restriction and put declarations in regular .ts files, but this results in some finicky behavior by the compiler, and it's not recommended.
Part 2 - Implement
Part 2 is actually implementing the member and adding it to the object it should exist on like you would do in JavaScript.
String.prototype.padZero = function (this : string, length: number) {
var s = this;
while (s.length < length) {
s = '0' + s;
}
return s;
};
Note a few things:
-
String.prototypeinstead of justString, which is theStringconstructor, rather than its prototype. - I use an explicit
functioninstead of an arrow function, because afunctionwill correctly receive thethisparameter from where it's invoked. An arrow function will always use the samethisas the place it's declared in. The one time we don't want that to happen is when extending a prototype. - The explicit
this, so the compiler knows the type ofthiswe expect. This part is only available in TS 2.0+. Remove thethisannotation if you're compiling for 1.8-. Without an annotation,thismay be implicitly typedany.
Import the JavaScript
In TypeScript, the declare construct adds members to the ambient scope, which means they appear in all files. To make sure your implementation from part 2 is hooked up, import the file right at the start of your application.
You import the file as follows:
import '/path/to/implementation/file';
Without importing anything. You can also import something from the file, but you don't need to import the function you defined on the prototype.
Solution 2:
If you want to augment the class, and not the instance, augment the constructor:
declare global {
interface StringConstructor {
padZero(s: string, length: number): string;
}
}
String.padZero = (s: string, length: number) => {
while (s.length < length) {
s = '0' + s;
}
return s;
};
console.log(String.padZero('hi', 5))
export {}
*The empty export on the bottom is required if you declare global in .ts and do not export anything. This forces the file to be a module. *
If you want the function on the instance (aka prototype),
declare global {
interface String {
padZero(length: number): string;
}
}
String.prototype.padZero = function (length: number) {
let d = String(this)
while (d.length < length) {
d = '0' + d;
}
return d;
};
console.log('hi'.padZero(5))
export {}
Solution 3:
Here is a working example, a simple Camel Case string modifier.
in my index.d.ts for my project
interface String {
toCamelCase(): string;
}
in my root .ts somewhere accessible
String.prototype.toCamelCase = function(): string {
return this.replace(/(?:^\w|[A-Z]|-|\b\w)/g,
(ltr, idx) => idx === 0
? ltr.toLowerCase()
: ltr.toUpperCase()
).replace(/\s+|-/g, '');
};
That was all I needed to do to get it working in typescript ^2.0.10.
I use it like str.toCamelCase()
update
I realized I had this need too and this is what I had
interface String {
leadingChars(chars: string|number, length: number): string;
}
String.prototype.leadingChars = function (chars: string|number, length: number): string {
return (chars.toString().repeat(length) + this).substr(-length);
};
so console.log('1214'.leadingChars('0', 10)); gets me 0000001214
Solution 4:
For me the following worked in an Angular 6 project using TypeScript 2.8.4.
In the typings.d.ts file add:
interface Number {
padZero(length: number);
}
interface String {
padZero(length: number);
}
Note: No need to 'declare global'.
In a new file called string.extensions.ts add the following:
interface Number {
padZero(length: number);
}
interface String {
padZero(length: number);
}
String.prototype.padZero = function (length: number) {
var s: string = String(this);
while (s.length < length) {
s = '0' + s;
}
return s;
}
Number.prototype.padZero = function (length: number) {
return String(this).padZero(length)
}
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:
var num: number = 7;
var str: string = "7";
console.log("padded number: ", num.padZero(5));
console.log("padding string: ", str.padZero(5));