Enhancing Return Types with Function Overloading in TypeScript

Function overloading allows you to define multiple functions with the same name, but with different parameters. This can be useful if you want to provide different behavior depending on the arguments that are passed to the function.

Contents

• Need for Function Overloading
• Function Overloading in Action
• Video Tutorial

Need for Function Overloading

Without function overloading, you may use a union type to handle input parameters of different formats. While this approach compiles just fine, it will lead to wider return types, as the resulting types will be a union of multiple types.

Example:

function add(a: string | number, b: string | number): string | number {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  } else {
    return `${parseInt(`${a}`, 10) + parseInt(`${b}`, 10)}`;
  }
}
 
const a = add(10, 10); // a is `string | number`
const b = add('10', '10'); // b is `string | number`

Function Overloading in Action

By using function overloading, you can improve the return types of your functions for different input scenarios. To create function overloads in TypeScript, you can use the function keyword followed by the name of the function, and then a list of parameter types in the signature. For example:

function add(a: number, b: number): number;
function add(a: string, b: string): string;

This defines two function overloads for the add function, one that takes two numbers and returns a number, and another that takes two strings and returns a string. Finally, you must provide a function implementation that can handle all input parameters from all the different function signatures you have defined:

function add(a: number, a: number): number;
function add(b: string, b: string): string;
function add(a: string | number, b: string | number): string | number {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  } else {
    return `${parseInt(`${a}`, 10) + parseInt(`${b}`, 10)}`;
  }
}
 
const a = add(10, 10); // a is `number`
const b = add('10', '10'); // b is `string`

Now, when you call the add function, TypeScript will automatically select the correct implementation based on the types of the arguments that you pass.

Video Tutorial