2.6 Function overloading

Function overloading allow us to create two or more functions (in the same scope) with the same name but a different number of parameters or parameters of different types.

Getting Ready

All you need to be able to use function overloading is an installation of TypeScript 2.0 or higher.

How to do it…

We are going to start by declaring three classes, which represent two dimensional geometrical figures:

class Square {
  length: number;
  constructor(length: number) {
    this.length = length;
  }
}

class Rectangle {
  length: number;
  width: number;
  constructor(length: number, width: number) {
    this.length = length;
    this.width = width;
  }
}

class Triangle {
  base: number;
  height: number;
  constructor(base: number, height: number) {
    this.base = base;
    this.height = height;
  }
}

We can then declare a function named calculateArea which can take an instance of the class Square, Rectangle or Triangle as its only parameter.

function calculateArea(shape: Square): number; // overloaded signature
function calculateArea(shape: Rectangle): number; // overloaded signature
function calculateArea(shape: Triangle): number; // overloaded signature
function calculateArea(shape: any): number // implementation signature
{
	if(shape instanceof Square) {
     return shape.length * shape.length;
	}
	else if(shape instanceof Rectangle) {
	  return shape.length * shape.width;
	}
	else if(shape instanceof Triangle) {
	  return (shape.base * shape.height) / 2;
	}
}

How it works…

As you can observe in the previous code snippet we have declared four different function signatures. The first three signatures are known as overloaded signatures and the last signature is known as implementation signature. Note that all the function’s overloaded signatures have the same name and return type. If we compile our TypeScript code into JavaScript code, we will be able to see that only the implementation signature prevails at runtime. This explains why we need to add a specific behavior for each of the overloaded signatures inside the function. If we try to invoke the calculateArea function:

const square = new Square(5); 
const rectangle = new Rectangle(3, 5); 
const triangle = new Triangle(3, 5); 

calculateArea(square);    // 25
calculateArea(rectangle); // 15 
calculateArea(triangle);  // 7.5

We will be able to observe how the IDE displays each of the overloaded signatures:

Fig.1

There’s more…

You can also use a union type instead of of the any type in the implementation signature:

function calculateArea(shape: Square): number;
function calculateArea(shape: Rectangle): number;
function calculateArea(shape: Triangle): number;
function calculateArea(shape: <b>Square | Rectangle | Triangle)</b>: number {
	if(shape instanceof Square) {
		return shape.length * shape.length;
	}
	else if(shape instanceof Rectangle) {
		return shape.length * shape.width;
	}
	else if(shape instanceof Triangle) {
		return (shape.base * shape.height) / 2;
	}
}

This won’t change the behavior of your code but it will help other developers to understand it better.

Source Code

Function overloading


Shiv Kushwaha

Author/Programmer