How to extend String Prototype and use it next, in Typescript?

Question

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);
}

Answer 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:

1. String.prototype instead of just String, which is the String constructor, rather than its prototype.
2. I use an explicit function instead of an arrow function, because a function will correctly receive the this parameter from where it's invoked. An arrow function will always use the same this as the place it's declared in. The one time we don't want that to happen is when extending a prototype.
3. The explicit this, so the compiler knows the type of this we expect. This part is only available in TS 2.0+. Remove the this annotation if you're compiling for 1.8-. Without an annotation, this may be implicitly typed any.

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.

Answer 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 {}

Answer 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

Answer 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));

Answer 5

2022 typescript 4.9

The solution is pretty simple but getting to that solution was not. Ignore the top voted answer; most of that isn't needed and doesn't work any more.

index.d.ts

Not needed!

strings.ts

interface String {
    toProperCase(): string;
    bool(): boolean;
}

String.prototype.toProperCase = function (): string {
    return this.toLowerCase().replace(/\b\w/g, (c: string) => c.toUpperCase())
}

String.prototype.bool = function (): boolean {
    return this.toLowerCase() == 'true';
};

using it

import './lib/strings'

var a = 'hello'
var b = a.toProperCase()

outputs:

Hello

Answer 6

A slight modification on toddmo's answer: I needed to declare the interface via declare global {}:

declare global {
    interface String {
        repeatAction: (action: (str: string) => string) => string;
    }
}

String.prototype.repeatAction = function(this: string, action: (str: string) => string) {
    let str = this;
    do {
        var tempStr = str;
        str = action(str);
    } while (tempStr != str);

    return str;
};