What is the best way to assign calculations to the appropriate function based on the type of input provided?

Question

What is the best way to assign calculations to the appropriate function based on the type of input provided?

Is there a way in TypeScript to create a function that can automatically determine what action to take based on the type of input it receives?

For instance, let's consider a function that calculates the maximum value.

In scenario A, if the input is a numeric array (i.e., type: number[]), I want the function to return the max value. This can be achieved with:
```
const calcMaxArr = (arr: number[]): number => {
  return Math.max(...arr) 
}
```

In scenario B, if the input data is an object and I want to find the key corresponding to the largest value, the function should do this:

const calcMaxObj = (obj: Record<string, number>): string => {
   return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); 
}

Although calcMaxArr() and calcMaxObj() work well individually, I am interested in combining them into one single function called calcMax(). The challenge is for calcMax() to intelligently decide whether to use calcMaxArr() or calcMaxObj() based on the input type.

If type: number[] -> calcMaxArr()
If type: Record<string, number> -> calcMaxObj()

Does TypeScript offer a feature that supports this kind of functionality?

EDIT

A tweet showcasing a similar concept in Python was brought to my attention. It might serve as a helpful analogy for those familiar with Python.

EDIT 2

I recently discovered that what I'm describing is essentially a generic function. Common Lisp, for example, offers built-in support for defining generic functions and methods.

typescript function

Answer 1

Answer №1

In short: achieving what you desire is not feasible. When TypeScript is compiled to JavaScript, all type information is stripped away and not available at runtime. Therefore, you will need to incorporate runtime checks on your own (as illustrated by @Nalin Ranjan's solution), as TypeScript cannot handle this for you.

Nevertheless, I propose an enhancement to the solution provided by @Nalin Ranjan - utilize overloads. The initial solution faces a major issue where the return type always ends up being a union type, indicating:

let k = calcMax({twelve: 12, ten: 10});
console.log(k.length); // error even though we expect string

This would result in failure because the type of k becomes string | number, and the .length property is exclusive to strings only.

To rectify this, as mentioned earlier, implementing overloads like the following would be beneficial:

function calcMax(arr: number[]): number;
function calcMax(obj: Record<string, number>): string;

function calcMax(arg: any): any {
    if (Array.isArray(arg)) {
        return calcMaxArr(arg);
    }
    return calcMaxObj(arg);
}

Now, the previous example will work correctly. While it might seem verbose in this specific scenario, consider another function like:

const calcMaxSet = (set: Set<number>): number => { 
  return 0; // implementation doesn't matter
}

All you have to do is examine the signatures. Since both calcMaxSet and calcMaxArr produce the same type, you can append it to the existing overload. This holds true if calcMaxObj ultimately returns number (although overdrafts would be unnecessary in that case):

function calcMax(arr: number[] | Set<number>): number;
function calcMax(obj: Record<string, number>): string;

function calcMax(arg: any): any {
    if (Array.isArray(arg)) {
        return calcMaxArr(arg);
    } else if (arg instanceof Set) { // runtime check
        return calcMaxSet(arg);
    }
    return calcMaxObj(arg);
}

let k = calcMax(new Set([1,2,3]));
k.toFixed(); // k is a number so this is legal

Answer 2

In short: achieving what you desire is not feasible. When TypeScript is compiled to JavaScript, all type information is stripped away and not available at runtime. Therefore, you will need to incorporate runtime checks on your own (as illustrated by @Nalin Ranjan's solution), as TypeScript cannot handle this for you.

Nevertheless, I propose an enhancement to the solution provided by @Nalin Ranjan - utilize overloads. The initial solution faces a major issue where the return type always ends up being a union type, indicating:

let k = calcMax({twelve: 12, ten: 10});
console.log(k.length); // error even though we expect string

This would result in failure because the type of k becomes string | number, and the .length property is exclusive to strings only.

To rectify this, as mentioned earlier, implementing overloads like the following would be beneficial:

function calcMax(arr: number[]): number;
function calcMax(obj: Record<string, number>): string;

function calcMax(arg: any): any {
    if (Array.isArray(arg)) {
        return calcMaxArr(arg);
    }
    return calcMaxObj(arg);
}

Now, the previous example will work correctly. While it might seem verbose in this specific scenario, consider another function like:

const calcMaxSet = (set: Set<number>): number => { 
  return 0; // implementation doesn't matter
}

All you have to do is examine the signatures. Since both calcMaxSet and calcMaxArr produce the same type, you can append it to the existing overload. This holds true if calcMaxObj ultimately returns number (although overdrafts would be unnecessary in that case):

function calcMax(arr: number[] | Set<number>): number;
function calcMax(obj: Record<string, number>): string;

function calcMax(arg: any): any {
    if (Array.isArray(arg)) {
        return calcMaxArr(arg);
    } else if (arg instanceof Set) { // runtime check
        return calcMaxSet(arg);
    }
    return calcMaxObj(arg);
}

let k = calcMax(new Set([1,2,3]));
k.toFixed(); // k is a number so this is legal

Answer 3

Answer №2

Is this solution suitable for your needs?

const determineMaximum = (inputs: number[] | Record<string, number>): number | string => {
  if (Array.isArray(inputs)) {
    return findMaxInArray(inputs);
  }
  return findMaxInObject(inputs);
}

const findMaxInArray = (arr: number[]): number => {
  return Math.max(...arr) // https://stackoverflow.com/a/39106546/6105259
}

const findMaxInObject = (obj: Record<string, number>): string => {
  return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); //https://stackoverflow.com/a/27376421/6105259
}

Visualization

"use strict";
const determineMaximum = (inputs) => {
  if (Array.isArray(inputs)) {
    return findMaxInArray(inputs);
  }
  return findMaxInObject(inputs);
};

const findMaxInArray = (arr) => {
  return Math.max(...arr); // https://stackoverflow.com/a/39106546/6105259
};

const findMaxInObject = (obj) => {
  return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); //https://stackoverflow.com/a/27376421/6105259
};

console.log(determineMaximum([10, 8, 12, 3]));
console.log(determineMaximum({
  "10": 10,
  "8": 8,
  "12": 12,
  "3": 3
}));

`WYSIWYG` => `WHAT YOU SHOW IS WHAT YOU GET`

Answer 4

Is this solution suitable for your needs?

const determineMaximum = (inputs: number[] | Record<string, number>): number | string => {
  if (Array.isArray(inputs)) {
    return findMaxInArray(inputs);
  }
  return findMaxInObject(inputs);
}

const findMaxInArray = (arr: number[]): number => {
  return Math.max(...arr) // https://stackoverflow.com/a/39106546/6105259
}

const findMaxInObject = (obj: Record<string, number>): string => {
  return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); //https://stackoverflow.com/a/27376421/6105259
}

Visualization

"use strict";
const determineMaximum = (inputs) => {
  if (Array.isArray(inputs)) {
    return findMaxInArray(inputs);
  }
  return findMaxInObject(inputs);
};

const findMaxInArray = (arr) => {
  return Math.max(...arr); // https://stackoverflow.com/a/39106546/6105259
};

const findMaxInObject = (obj) => {
  return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); //https://stackoverflow.com/a/27376421/6105259
};

console.log(determineMaximum([10, 8, 12, 3]));
console.log(determineMaximum({
  "10": 10,
  "8": 8,
  "12": 12,
  "3": 3
}));

`WYSIWYG` => `WHAT YOU SHOW IS WHAT YOU GET`

Answer 5

Answer №3

Do you require function overload for your solution?

Explore more about function overloads here

const findMinMaxArr = (arr: number[]): number => {
  return Math.min(...arr) // Read more at https://stackoverflow.com/a/39106546/6105259
}

const findMinMaxObj = (obj: Record<string, number>): string => {
   return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); //Refer to this post: https://stackoverflow.com/a/27376421/6105259
}

function findMinMax(arr: number[]): number;
function findMinMax(obj: Record<string, number>): string;
function findMinMax(input: number[] | Record<string, number>) {
  if(Array.isArray(input)) {
    return findMinMaxArr(input);
  }
  else {
    return findMinMaxObj(input);
  }
}

Answer 6

Do you require function overload for your solution?

Explore more about function overloads here

const findMinMaxArr = (arr: number[]): number => {
  return Math.min(...arr) // Read more at https://stackoverflow.com/a/39106546/6105259
}

const findMinMaxObj = (obj: Record<string, number>): string => {
   return Object.keys(obj).reduce((a, b) => obj[a] > obj[b] ? a : b); //Refer to this post: https://stackoverflow.com/a/27376421/6105259
}

function findMinMax(arr: number[]): number;
function findMinMax(obj: Record<string, number>): string;
function findMinMax(input: number[] | Record<string, number>) {
  if(Array.isArray(input)) {
    return findMinMaxArr(input);
  }
  else {
    return findMinMaxObj(input);
  }
}

What is the best way to assign calculations to the appropriate function based on the type of input provided?

Answer №1

Answer №2

Visualization

`WYSIWYG` => `WHAT YOU SHOW IS WHAT YOU GET`

Answer №3

Similar questions

Is it possible to retrieve and display an object from an API using its unique ID?

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

Google's reCAPTCHA issue: systemjs not found

Once an element is focused, the selection range's getClientRects method will result in a list that is void of any elements

Join the nested Observables array

The error message "index.ts is not a module when imported in Typescript"

Express did not cause Jest to exit one second after completing the test run

Meeting the operator does not limit the variable type

Retrieve the property values of `T` using a string key through the `in

You must provide a secret or key in order to use the JwtStrategy

React: Implementing a Method to Reset the Value of a React-Select upon Selection Change

Vue.js is unable to recognize this type when used with TypeScript

Comparing tsconfig.json and tsconfig.build.json: what sets them apart?

Instructions on how to post an array by its ID when the value changes in the form, correspond with the ID

Is there a way to prevent passing the mouseover event to children elements while still allowing the parent element to respond to the event across its entire area?

R code transformed into a powerful function

Can you explain the significance of the additional pipeline in the type declaration in TypeScript?

Troubleshooting a NextJs/TS problem with importing ESM modules

What design should be used for a class with two interconnected attributes?

Unable to execute Nodemon in a TypeScript node project build on Windows

What is the best way to assign calculations to the appropriate function based on the type of input provided?

Answer №1

Answer №2

Visualization

WYSIWYG => WHAT YOU SHOW IS WHAT YOU GET

Answer №3

Similar questions

Is it possible to retrieve and display an object from an API using its unique ID?

How to automatically scroll to the most recently added element in an *ngFor loop using Angular 2

Google's reCAPTCHA issue: systemjs not found

Once an element is focused, the selection range's getClientRects method will result in a list that is void of any elements

Join the nested Observables array

The error message "index.ts is not a module when imported in Typescript"

Express did not cause Jest to exit one second after completing the test run

Meeting the operator does not limit the variable type

Retrieve the property values of `T` using a string key through the `in

You must provide a secret or key in order to use the JwtStrategy

React: Implementing a Method to Reset the Value of a React-Select upon Selection Change

Vue.js is unable to recognize this type when used with TypeScript

Comparing tsconfig.json and tsconfig.build.json: what sets them apart?

Instructions on how to post an array by its ID when the value changes in the form, correspond with the ID

Is there a way to prevent passing the mouseover event to children elements while still allowing the parent element to respond to the event across its entire area?

R code transformed into a powerful function

Can you explain the significance of the additional pipeline in the type declaration in TypeScript?

Troubleshooting a NextJs/TS problem with importing ESM modules

What design should be used for a class with two interconnected attributes?

Unable to execute Nodemon in a TypeScript node project build on Windows

`WYSIWYG` => `WHAT YOU SHOW IS WHAT YOU GET`