Tuesday, July 24, 2018

Learn Overloading in typescript with examples

Typescript overloading is a  different approach unlike many other programming languages provides. Every Object-oriented language provides an implementation of Inheritance, polymorphism and overloading etc. Typescript also provides this concept, but with a different implementation.

Usually, as per any programming language, we will write the code as below
class OverloadDemo {
    constructor() {

    }
    method(num: number) {
        console.log('method with number argument');
    }
    method(message: string) { 
        console.log('method with string argument');
    }
}
let demo = new OverloadDemo();
console.log(demo.method(12));
This will not work and gives compilation error and throws Duplicate function implementation. During compilation of this code into javascript, Both functions definitions look same. So javascript doesn't understand overloading.
To Fix Duplicate function implementation, provide a single function to have variable arguments.

Overloading can be applied to functions and constructor in typescript

Function overload in typescript

Function overloading is to provide the same function name with different arguments. We are providing a simple implementation function which arguments might be different

In any overloaded functions, there are different things to be noted
1. Arguments count might be different
2. Argument type is a different type
3. The return type is variable

How can overload works in typescript?. Typescript allows the programmer to write a single function to behave differently based on the number of variable arguments and data type.

We can achieve these many ways with limitations

Using Any data type:


Any data type in typescript is predefined data type in typescript. a variable declared with Any data type can assign any value. It can be the string, number.

The same above code can be rewritten with below things

We are providing the only function with a single parameter of type any, We can pass string or number here. This method we are providing overload functionality with different arguments, but arguments count is same

class OverloadAnyDemo {
    constructor() {
    
    }
    method(num: any) {
        console.log('method ', typeof num);
    }

}
let demo = new OverloadAnyDemo();

console.log(demo.method(12));// returns number
console.log(demo.method({}));// returns object
console.log(demo.method(true));// returns boolean

Using Union Type 

We are going to provide the implementation for an additional function which adds the numbers. numbers passed to this function might two or three or more numbers Typescript provides UnionType which is the union of multiple types under one data type.
class OverloadAnyDemo {
    constructor() {
    
    }
    method(message: string | any) {
        console.log('method ', typeof message);
    }
}
let demo = new OverloadAnyDemo();
console.log(demo.method(12));// returns number
console.log(demo.method({}));// returns object
console.log(demo.method(true));// returns boolean

Functional Using Optional Parameter 

Using optional parameter (symbol is a question mark ) in functional arguments

method(message?: string | any) {
        console.log('method ', typeof message);
    }
String argument here is optional, So this function accepts zero or one string as an argument. This is another way to achieve overloading.

Constructor Overloading 

Like function overload, we can have only one constructor with different arguments. This is valid overload as it will work for the new operator as well as new object(1,3) Example

 contructor() { 
    }
    constructor(param1: any, param2: any) { 
    }
We can achieveConstructionn overload using optional parameters, Any data type or Union TYpe

Related article