Is there a way to create a tuple property that can be called like a

Question

Is there a way to create a tuple property that can be called like a

I have a specific function in my code:

function test(cb: Function | number) {
  let item = { height: 0}
  if(typeof cb === 'number') {
    item.height = cb;
  }
  if(typeof cb === 'object') {
    item.height = cb();
  }
}

This function accepts either a number or a callback function as an argument. If it's a number, the height is set directly. If it's a function, the function is called and its return value (a number) is used for the height.

function getNumber() {
   return 2;
}

test(getNumber);

However, I keep encountering an error when I try to do item.height = cb();

 No constituent of type 'number | Function' is callable.

How can I resolve this issue without resorting to using any? Using any would make the error disappear but it's not a recommended solution.

typescript tuples

Answer 1

Answer №1

When I test this in the TypeScript playground, I don't encounter the error mentioned. However, you could experiment with replacing typeof cb === 'object' with cb instanceof Function and Function | number with () => number | number.

Answer 2

When I test this in the TypeScript playground, I don't encounter the error mentioned. However, you could experiment with replacing typeof cb === 'object' with cb instanceof Function and Function | number with () => number | number.

Answer 3

Answer №2

This solution has proven successful in my case:

function evaluate(callback: Function | number) {
  let data = { value: 0 }
  if(typeof callback === 'number') {
    data.value = callback;
  }
  if(typeof callback === 'function') {
    data.value = callback();
  }
}

function retrieveNumber() {
   return 5;
}

evaluate(retrieveNumber);

Ensure that callback is a function, not an object. This approach helps TypeScript recognize callback as callable under such conditions.

Answer 4

This solution has proven successful in my case:

function evaluate(callback: Function | number) {
  let data = { value: 0 }
  if(typeof callback === 'number') {
    data.value = callback;
  }
  if(typeof callback === 'function') {
    data.value = callback();
  }
}

function retrieveNumber() {
   return 5;
}

evaluate(retrieveNumber);

Ensure that callback is a function, not an object. This approach helps TypeScript recognize callback as callable under such conditions.

Answer 5

Answer №3

Here are a couple of important points to ensure everything runs smoothly:

It's not necessary to specifically check for both potential outcomes of the union since there are only two possibilities.

Specify a more accurate function type than Function, which means the caller must provide a function that takes no parameters and returns a number. This type is denoted as () => number.

function test(cb: (() => number) | number) {
   const item = { height: 0 };
   if (typeof cb === 'number') {
       // In this case, cb is a `number`
       item.height = cb;
   }
   else {
       // In this scenario, cb represents a `() => number`, based on process of elimination
       item.height = cb();
   }
}

Answer 6

Here are a couple of important points to ensure everything runs smoothly:

It's not necessary to specifically check for both potential outcomes of the union since there are only two possibilities.

Specify a more accurate function type than Function, which means the caller must provide a function that takes no parameters and returns a number. This type is denoted as () => number.

function test(cb: (() => number) | number) {
   const item = { height: 0 };
   if (typeof cb === 'number') {
       // In this case, cb is a `number`
       item.height = cb;
   }
   else {
       // In this scenario, cb represents a `() => number`, based on process of elimination
       item.height = cb();
   }
}

Is there a way to create a tuple property that can be called like a

Answer №1

Answer №2

Answer №3

Similar questions

Saving a group of selected checkboxes as an array in Ionic: a step-by-step guide

Changing the appearance of a specific child component in React by referencing its id

Developing a search feature using Angular 6 with Observable subscription for the FrontEnd application

Ways to ensure that when changes occur in one component, another component is also updated

Changing the Image Source in HTML with the Power of Angular2

What is causing the malfunction in this overloaded function signature?

A Vue object with dynamic reactivity that holds an array of objects

Efficient method for iterating through three arrays that have matching values and satisfy specified conditions in TypeScript

Why aren't the child route components in Angular 6 loading properly?

I've been stuck for hours, is there anything I should include?

Leverage Springs with TypeScript

Encountering a 404 error while attempting to test a contact form on a Next.js website using a local server

challenges with template inheritance: when one template takes precedence over another

When attempting to change a Component's name from a string to its Component type in Angular 9, an error is thrown stating that the passed-in type is

Angular 2: Enhancing User Experience with Pop-up Dialogs

Tips for validating an object with unspecified properties in RunTypes (lowercase object type in TypeScript)

The exportAs property for matAutocomplete has not been specified

Angular TypeScript test checking file size with Jasmine

There seems to be an issue with the React Native FlatList: It appears that there is no overload matching this call and some

Identifying data types of objects through generic value recognition