TypeScript Writing Good Overloads

In this article, we are going to learn about Writing Good Overloads in Typescript. TypeScript is a popular programming language used for building scalable and robust applications. For writing good overloads, you should always prefer parameters with union types instead of overloads when possible because TypeScript can only resolve a function call to a single overload.

Function Overloading

Function overloading is a feature of object-oriented programming where two or more functions can have the same name but different parameters and the data types of all the parameters in different functions would be different as well. When a function name is overloaded with different jobs/ requirements it is thus referred to as Function Overloading or Method Overloading.

Example: In this example code, we declare function addFun() with string type of parameters and overload that function as a declaration of another second function with the same name with number type parameters and the last function should have function implementation and what type of value this function will return will decide on what values we are passing as a parameter to this function via the function call.

Javascript

function addFun(a: string, b: string): string;

function addFun(a: number, b: number): number;

function addFun(a: any, b: any): any {
    return a + b;
}
console.log(addFun("Geeksfor", "Geeks"));
console.log(addFun(30, 40));

Output:

Problem with Function Overloading

TypeScript can only resolve a function call to a single overload when overloads have the same argument count and same return type.

Example: In this example, we will see that we can invoke leng function with strings or arrays. However, we can’t invoke it with a value that might be a string or an array. It will throw error as both overloads have the same argument count and same return type and TypeScript can only resolve a function call to a single overload.

Javascript

function leng(s: string): number;
function leng(arr: any[]): number;
function leng(x: any) {
    return x.length;
}

leng(""); // OK
leng([0]); // OK
leng(Math.random() > 0.7 ? "GeeksforGeeks" : [0]);

Output:

Solution for that

Let’s say you have a function that accepts either a single string or an array of strings and performs some operation on them. Instead of creating overloads for each case, you can use a union type for the argument to simplify the function signature.

Example: In this example, the processStrings function accepts a parameter named input, which has a union type of string | string[]. This allows the function to handle both cases: when input is a single string and when it’s an array of strings.

Javascript

function processStrings(input: string | string[]): void {
    if (typeof input === "string") {
        // Case: Input is a single string
        console.log(input.toUpperCase());
    } else {
        // Case: Input is an array of strings
        for (const str of input) {
            console.log(str.toLowerCase());
        }
    }
}

// Using the function with a single string
processStrings("Hello, GeeksforGeeks!");

// Using the function with an array of strings
processStrings(["Java", "React", "Typescript"]);

Output:

Conclusion: In this article we have seen how can we make function overload in typescript and what thing or error which we should not make while doing function overloading. When there is same number of argument and same type of retrun type is present for more than two funcitons it shows error for that we can use union symbol for denying that error and a successful function overload.