Chapter 1: Introduction to Function Overloading

Have you ever encountered the need to create a function in TypeScript capable of processing various types of input parameters?

Function overloading is a remarkable capability that can assist you in achieving this goal. It enables you to define multiple functions that share the same name but differ in their parameter types and/or return types. This feature proves invaluable when you aim to write functions that can accommodate diverse types of input.

To illustrate how function overloading operates in TypeScript, consider the scenario where we need to craft a function that adds two numbers together. This could be implemented as follows:

function add(a: number, b: number): number {

return a + b;

}

This implementation works seamlessly for adding two numbers. However, what if we also want the function to concatenate two strings? We can adjust the function in this manner:

function add(a: number | string, b: number | string): number | string {

if (typeof a === "number" && typeof b === "number") {

return a + b;

} else if (typeof a === "string" && typeof b === "string") {

return a + b;

} else {

throw new Error("Invalid arguments");

}

}

console.log(add(3, 5)); // 8

console.log(add("3", "5")); // 35

console.log(add("3", 5)); // Invalid arguments

In this implementation, we utilize a union type that permits the add function to accept both numbers and strings. Additionally, an if/else structure checks the parameter types and returns either a number or a string based on their types.

This straightforward example demonstrates the utility of function overloading when writing functions that can accommodate various input types.

To define an overloaded function in TypeScript, you simply declare the function signature without providing an implementation, followed by specific function implementations, each with its own signature. We can redefine our previous example as follows:

function add(a: number, b: number): number; // signature 1

function add(a: string, b: string): string; // signature 2

function add(a: any, b: any): any {

return a + b;

}

console.log(add(3, 5)); // 8

console.log(add("3", "5")); // 35

console.log(add("3", 5)); // No overload matches this call.

Here, we've established two distinct function signatures for add: one for two number arguments and another for two string arguments. The implementation is represented by the third function declaration, which accepts any two arguments and returns their sum or concatenation based on their type.

Let's examine another scenario. Suppose we wish to create a function that determines the length of a string. This could be implemented as follows:

function getLength(str: string): number {

return str.length;

}

console.log(getLength("If you have any questions")); // 25

This function performs well when we want to calculate the length of a string. However, if we also want to measure the length of an array, we can employ function overloading to manage all these instances:

function getLength(arr: any[]): number;

function getLength(str: string): number;

function getLength(arg: any): number {

if (Array.isArray(arg)) {

return arg.length;

} else if (typeof arg === "string") {

return arg.length;

} else {

throw new Error("Invalid argument");

}

}

console.log(getLength("If you have any questions")); // 25

console.log(getLength(["tuple", "array"])); // 2

console.log(getLength(["If", "you", "have", "any", "questions"])); // 5

console.log(getLength(3)); // Invalid argument

In this case, we define two function signatures for getLength: one for arrays and one for strings. The implementation leverages if/else statements to evaluate the types of input parameters and return the appropriate length.

Advanced Example: Creating Rectangles with Function Overloading

type Coordinates = { x: number; y: number };

type Size = { width: number; height: number };

// Function Signatures

function createRectangle(options: Coordinates & Size): {

x1: number;

y1: number;

x2: number;

y2: number;

}

function createRectangle(

x: number,

y: number,

width: number,

height: number

): { x1: number; y1: number; x2: number; y2: number };

// Function Implementation

function createRectangle(

arg1: number | Coordinates,

arg2?: number,

arg3?: number,

arg4?: number

): { x1: number; y1: number; x2: number; y2: number } {

if (typeof arg1 === "object") {

const { x, y, width, height } = arg1 as Coordinates & Size;

return { x1: x, y1: y, x2: x + width, y2: y + height };

} else if (typeof arg1 === "number") {

return { x1: arg1, y1: arg2!, x2: arg1 + arg3!, y2: arg2! + arg4! };

}

throw new Error("Invalid arguments!");

}

const rectangle1 = createRectangle(0, 0, 100, 50);

console.log(rectangle1); // { x1: 0, y1: 0, x2: 100, y2: 50 }

const rectangle2 = createRectangle({ x: 10, y: 10, width: 20, height: 30 });

console.log(rectangle2); // { x1: 10, y1: 10, x2: 30, y2: 40 }

In this example, we develop a function named createRectangle that generates a rectangle object based on the coordinates and size supplied through the arguments. The function can be invoked in two ways: either with an object containing the properties x, y, width, and height or with four separate arguments that represent these values. The function then returns an object detailing the rectangle's coordinates.

To ensure proper utilization, we verify the type of the first argument to determine which signature has been employed. If the argument is an object, we extract the relevant properties and utilize them to compute the rectangle's coordinates. If the argument comprises four distinct numbers, we perform calculations accordingly. However, since TypeScript cannot confirm if the object conforms to the Coordinates & Size type, we use a type assertion to guide the compiler.

Finally, we invoke the createRectangle function with both argument sets and log the resulting objects to the console.

If you have any questions, feel free to leave a comment below.

If you enjoy this type of content and wish to support me, consider buying me a coffee or clicking the clap 👏 button below a few times to show your support. Your encouragement is vital for me to continue creating valuable content — thank you!

Chapter 2: Function Overloading Explained

Discover the nuances of function overloading in TypeScript through this insightful video that covers various scenarios and examples.

Learn what function overloads are in TypeScript and how to effectively implement them in your programming projects with this detailed tutorial.