TypeScript Function Overloading

Function overloading is a mechanism or ability to create multiple methods with the same name but different parameter types and return type. However, it can have the same number of parameters. Function overloading is also known as method overloading.

The Function/Method overloading is allowed when:

The function name is the same
The number of parameters is different in each overloaded function.
The number of parameters is the same, and their type is different.
The all overloads function must have the same return type.

Suppose we have to perform multiplication of the numbers, which has a different number of parameters. We write the two methods such as mul_a(number, number) for two parameters, and mul_b(number, number, number) for three parameters. Now, it may be difficult for us as well as other programmers to understand the behavior of the method because its name differs. In that case, we need to use function overloading, which increases the readability of the program.

Advantage of function overloading

It saves the memory space so that program execution becomes fast.
It provides code reusability, which saves time and efforts.
It increases the readability of the program.
Code maintenance is easy.

Example

//Function with string type parameter
function add(a:string, b:string): string;
//Function with number type parameter
function add(a:number, b:number): number;
//Function Definition
function add(a: any, b:any): any {
    return a + b;
}
//Result
console.log("Addition: " +add("Hello ", "JavaTpoint")); 
console.log("Addition: "+add(30, 20));

In the above example:

The first two lines are the function overload declaration. It has two overloads:
- A Function which accepts a string parameter.
- A Function which accepts a number parameter.
The third line is the function definition, where the data type of the parameters is set to any.
The last two statements invoke the overloaded function.

After compiling the above TypeScript program, we will get the following JavaScript code.

//Function Definition
function add(a, b) {
    return a + b;
}
//Result
console.log("Addition: " + add("Hello ", "JavaTpoint"));
console.log("Addition: " + add(30, 20));

Output:

Function overloading in a class

The following example helps to understand the use of method overloading in a class.

class A
{
    public foo(s: string): number;
    public foo(n: number): string;
    public foo(arg: any): any 
    {
        if (typeof(arg) === 'number')
            return arg.toString();
        if (typeof(arg) === 'string')
            return arg.length;
    }
}
let obj = new A();
console.log("Result: " +obj.foo(101));
console.log("Length of String: " +obj.foo("JavaTpoint"));

After compiling the above TypeScript program, we will get the following JavaScript code.

class A {
    foo(arg) {
        if (typeof (arg) === 'number')
            return arg.toString();
        if (typeof (arg) === 'string')
            return arg.length;
    }
}
let obj = new A();
console.log("Result: " + obj.foo(101));
console.log("Length of String: " + obj.foo("JavaTpoint"));

Output:

Function overloading with a different number of parameters and different types along with the same function name is not supported.

Example

function display(x:number, y:number):void //Compiler Error: Duplicate function implementation
{
    console.log(x + x);
}

function display(x:string): void //Compiler Error: Duplicate function implementation
{
    console.log(x);
}

Next TopicTypeScript Function Parameter

← prev next →