How to Extend String.prototype in TypeScript

Extend String.prototype in TypeScript #

To extend String.prototype in TypeScript:

1. Create a string.extensions.ts file.
2. Extend the String interface and add the extension method.
3. Import the extension method as import './string.extensions' before using it.

Here is the content of string.extensions.ts:

Copied!
interface String {
  prefix(pre: string): string;
}

String.prototype.prefix = function (pre: string) {
  return pre + this;
};

And here is how we import and use the new prefix method on the String prototype:

Copied!
import './string.extensions';

const str = 'world';

console.log(str.prefix('hello ')); // 👉️ "hello world"

If I run my index.ts file, we can see that the prefix method gets successfully invoked.

In the interface, we created a prefix method, which adds leading characters to the original string and returns the result.

You could use this approach to extend String.prototype with any method. Here is an example of a method that adds the passed in strings together.

This is the code in the string.extensions.ts file:

Copied!
interface String {
  add(...strings: string[]): string;
}

String.prototype.add = function (...strings) {
  return this + strings.join('');
};

And here is the index.ts file, which imports string.extensions and makes use of the add method.

Copied!
import './string.extensions';

const str = 'hello';

// 👇️ "hello one two three"
console.log(str.add(' one', ' two', ' three'));

Make sure to specify the correct path when importing the string.extensions.ts module.

Here is an example of how you would override the built-in toLowerCase() method.

Copied!
interface String {
  toLowerCase(): string;
}

String.prototype.toLowerCase = function () {
  return this.toUpperCase();
};

And here is the code in our index.ts file.

Copied!
import './string.extensions';

const str = 'Hello World';

// 👇️ "HELLO WORLD"
console.log(str.toLowerCase());

Note that overriding built-in methods is confusing and should generally be avoided.