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:

• How to parse a JSON string in TypeScript
• How To Check If Two Strings Are Equal In Typescript

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js