Post
Ask Question

Learn About Extension Methods In TypeScript

Introduction to Extension-method

 
Extension-method gives you the power to add new methods to existing types. You don’t have to create a new derived-type. You can write an extension-method of any data-type you want. It’s just like writing a simple function of a specific class. These are static methods. We can extend any class or interface to write our own extension-method but remember, we cannot override the existing ones. Even if we have the same name and signature of our own extension-method as of the existing one, then our method cannot be called in any case. So, make sure that whenever you write your extension-method, name and signature should differ from the existing ones.
 
Examples
 
Extension Methods In TypeScript
 

Reason to use Extension-method

 
If your application requires some task that you have to perform repeatedly on certain specific data type then writing extension-method for that is the best way to do it. For example, if your application is managing some accounts then the best practice to write value is through thousands of separator. So, now you know that amount will always be of specific data-type, let’s say ‘float’ and you always have to show amount through thousands operator. Now, it’s the best way to extend the ‘interface’ of ‘float’ and write a method for it and once you do that, that method will be accessible in your whole application and you can utilize it wherever you want.
 

Utilizing your Extension-method

 
It’s too simple to call your extension method. Just declare a variable of a type for which you have written extension-method. After variable, put a dot (.) and then you can see your extension-method appearing in IntelliSense. I will show you an example later on.
 

Benefits of Extension-method

 
There are a couple of advantages if we write our extension method.
  1. If you are using any third-party library and you want to add a method to that, then you can do it without recompiling the original code with the help of extension-method.
  2. Your code remains clean and readable with an extension-method. It’s very easy, not only for you but for everyone to read and understand your code. Because after variable you just place a dot and your method starts appearing.

Implementing Extension-method

 
Some of us already have an experience of writing extension methods in C# but in this article, I will show you how to write extension-methods in typescript. It’s very easy and simple.
 
There are a few things you have to do for it. Firstly, you define the interface of the type for which you want to write the extension-method. In that interface, you declare the definition of extension-method which includes two things; 1) name, 2) return type. These steps can be illustrated as,
 
Extension Methods In TypeScript 
  1. interface Number {    
  2.     thousandsSeperator(): String;    
  3. }    
After that, below the interface, you start writing your own extension-method.
  1. Number.prototype.thousandsSeperator = function(): string {  
  2.  return Number(this).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');  
  3. }   
As you can see, I have written a very simple extension-method in which I have used a regular expression to determine if 3 digits have passed through. If yes, then I just replace the comma after that and this is achieved using ‘replace’ function which is pre-defined in the ‘String’ type.
 
Now, you have written your own extension-method. To utilize it, you just use it like the other built-in functions like.
  1. number: Number;  
  2. result: String;  
  3. this.number = 123456789;  
  4. this.result = this.number.thousandsSeperator();   
You can see the result yourself after running this.
 
This solution worked if you are writing the function and utilizing it in the same file. What if, you have to make a separate file in which you define all your extension-methods and then use any of them in any other file you want?
 
For that, you have to first declare the interface globally and then export your all extension-methods. And when you want to use them, just import the file of extension-methods and you can use any function from that.
 
Extension Methods In TypeScript
 
Let’s take the same example as above.
  1. declare global {  
  2.  interface Number {  
  3.   thousandsSeperator(): String;  
  4.  }  
  5. }  
  6. Number.prototype.thousandsSeperator = function(): string {  
  7.  return Number(this).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');  
  8. }  
  9. export {};   
So, what does the ‘declare global’  and ‘export{};’ do?
 
In simple words, it declares your file globally i.e. throughout the application. And export makes this function importable in any file so you have to make these two changes to use your extension-methods in any file of your application.
 
In another file, where you want to import this. Import it like this,
  1. import './extension-method/extension-method.component'  
  2. number: Number;  
  3. result: String;  
  4. this.number = 123456789;  
  5. this.result = this.number.thousandsSeperator();   
When this code will be executed, we can see the value of the result will be: 123,456,789
 
So, this is how you can write and use your own extension-methods in your application. This was a basic example to do it. It’s really easy and simple but once you do it, your code remains clean and readable.


Similar Articles