How to extend String.prototype in TypeScript

How to Extend String.prototype in TypeScript

In this tutorial, we will show you how to extend String.prototype in TypeScript. Follow the instructions below for detailed information.

Extend String.prototype in TypeScript

We use the interface to define a structure that any Class using it must conform to the variables and methods contained in the interface. You can follow the steps below for the instruction to extend String.prototype in TypeScript:

  • Initiate a new file containing the extension
  • Extend the String interface and define the extension method
  • Use the import statement to embed the extension into the file you need to use

To illustrate, you can check out the example below to see how we implement this method.

First, we need to create a new TypeScript file in the project. For instance, we create the ‘demostring.extension.ts‘ file as below:

interface String {
    capitalizeMessage(message: string): string;
}

String.prototype.capitalizeMessage = function (message: string) {
    return (message + this).toUpperCase();
};

In the interface, we create a method named ‘capitalizeMessage‘. This method takes a string as an argument and returns a string as a result. It allows us to concatenate two strings and convert all characters to uppercase.

Then, import the extension method into the ‘index.ts‘ file.

import "./demostring.extensions";

const myMessage = "LeARnShareIT comMunITy";
console.log(myMessage.capitalizeMessage("WeLCoMe tO "));

If you execute the file ‘index.ts‘, after successful execution, you will get the following output:

WELCOME TO LEARNSHAREIT COMMUNITY

With this approach, you can define any method you want to manipulate strings. However, there are a few caveats that you should pay attention to:

  • Make sure you enter the correct file path when importing files.
  • When declaring a new method, you should avoid naming the same as the built-in methods.

Here is an example of how this situation happened:

interface String {
    toUpperCase(): string;
}

// Overriding the toUpperCase() method
String.prototype.toUpperCase = function () {
    return this.toLocaleLowerCase();
};

Importing the extension into the ‘index.ts‘ file:

import "./demostring.extensions";

const myMessage = "LeARnShareIT comMunITy";
console.log(myMessage.toUpperCase());

Output:

learnshareit community

As you can see, the toUpperCase() method is easily overridden, and the result is completely changed.

Overriding the built-in methods may be required in some exceptional cases. However, we do not recommend this as it will cause a lot of confusion for your project. It would be best to avoid doing so.

Summary

In summary, we have shown you how to extend String.prototype in TypeScript. That’s the end of this article. Hopefully, with the detailed instructions mentioned above, you can apply the method easily without any difficulty.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *