TypeScript Function Overloading

In TypeScript, function overloading, or method overloading, is the ability to create multiple methods with the same name and same return type, but a different number of parameters or different parameter types.

So essentially, method overloading is allowed when –

1. Function name is same
2. Number of parameters are different in each overload
3. If number of parameters is same the their type must be different
4. All overloads must have same return type

Function overloading in TypeScript is very different from overloading in few other programming lanaguages where we define multiple methods with different signatures, and based on method parameter number and type, a specific method body is executed.

In TypeScript, we can define multiple method signatures but the method implementation remains only one.

1. Overload and Implementation Signatures

In TypeScript, we can specify a function that can be called in different ways by writing overload signatures.

• When defining a function, we write multiple overload signatures that clients can call to invoke the function.
• After these overload signatures, we write the implementation signature immediately before the function implementation. The client cannot invoke the function using the implementation signature.
• The implementation signature must be compatible with the function implementation as well as the overload signatures.
• The implementation signature should always be the last in the list and can take the any type or a union type as the type of its parameters.

2. Syntax

Let’s understand with an example.

In the given example, we have add() method which has two overload signatures at Line no. 1 and 2. We can call the add() function with either two parameters or three parameters.

If we notice Line No. 3, which is the implementation signature and is compatible with the function implementation as well as both overload signatures.

Even though the implementation signature allows to have four parameters, we cannot invoke the add() function with four parameters as seen in Line no. 13.

function add(first: number, second: number): number;    //Overload signature with two parameters
function add(first: number, second: number, third:number): number;  //Overload signature with three parameters
function add(first: number, second: number, third?: number, fourth?: number): number {  //Implementation signature
  if (first !== undefined && second !== undefined && third !== undefined) {
    return first + second + third;
  } else {
    return first + second;
  }
}

const r1 = add(1, 2, 3);
const r2 = add(1, 2);
const r3 = add(1, 2, 3, 4);

For every non-compatible function overload, we will get the error: This overload signature is not compatible with its implementation signature.

3. Function Overloading Example

Suppose we are creating a function that will return the list of employees in the application by:

• Employee name
• Employee name and age
• Employee name, age and location

Let’s create function overloads and implementation for this requirement.

class Employee {}

function findEmployees(name: string): Employee[]; 					                    //Overload Signature 1
function findEmployees(name: string, age: number): Employee[]; 					        //Overload Signature 2
function findEmployees(name: string, age: number, location: string): Employee[]; 	//Overload Signature 3
function findEmployees(name: string, age?: number, location?: string): Employee[] {   //Implementation Signature

	let employee: Employee[] = [];

  if(age != undefined && location != undefined) {
    //find employees by name, age and location
  } else {
    //find employees by name and age
  }

	return employee;
}

Drop me your questions in the comments section.

Happy Learning !!