TS return type based on arguments

When working with TypeScript, it is often necessary to define the return type of a function based on its arguments. This can be useful in scenarios where the return type depends on the specific values or types of the arguments passed to the function. In this blog post, we will explore different approaches to achieve this in TypeScript.

Approach 1: Function Overloading

One way to define the return type based on arguments is by using function overloading. Function overloading allows us to define multiple function signatures with different parameter types and return types. TypeScript will then infer the correct return type based on the arguments passed to the function.


function calculateArea(width: number): number;
function calculateArea(width: number, height: number): number;
function calculateArea(width: number, height?: number): number {
  if (height) {
    return width * height;
  }
  return width * width;
}

const area1 = calculateArea(5); // Returns 25
const area2 = calculateArea(5, 10); // Returns 50

In the above example, the calculateArea function is overloaded with two different function signatures. The first signature takes only the width argument and returns the area of a square. The second signature takes both width and height arguments and returns the area of a rectangle. TypeScript will infer the correct return type based on the arguments provided.

Approach 2: Conditional Types

Another approach to define the return type based on arguments is by using conditional types. Conditional types allow us to define types that depend on a condition. We can use conditional types to create a type that represents the return type based on the arguments passed to the function.


type AreaReturnType = T extends [number] ? number : T extends [number, number] ? number : never;

function calculateArea(...args: T): AreaReturnType {
  if (args.length === 1) {
    return args[0] * args[0] as AreaReturnType;
  }
  return args[0] * args[1] as AreaReturnType;
}

const area1 = calculateArea(5); // Returns 25
const area2 = calculateArea(5, 10); // Returns 50

In the above example, we define a conditional type AreaReturnType that represents the return type based on the arguments passed to the function. The calculateArea function takes a rest parameter args which can be either a tuple with one number or a tuple with two numbers. TypeScript will infer the correct return type based on the length of the args array.

Conclusion

Defining the return type based on arguments can be achieved in TypeScript using function overloading or conditional types. Function overloading is a simpler approach that allows us to define multiple function signatures with different return types. On the other hand, conditional types provide more flexibility and can handle more complex scenarios. Choose the approach that best suits your specific use case.

TS return type based on arguments