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

The ngAfterViewInit lifecycle hook does not get triggered when placed within ng-content

Exploring the use of two different array types in the useState hook with TypeScript

Obtain the function's return type without actually executing the function

React components need to refresh after fetching data from an API

What is the best way to create a case-insensitive sorting key in ag-grid?

Combining existing CSS classes with node labels in Cytoscape JS for Angular: A Guide

Tips for binding to a single input box within an ngFor loop

What could be the reason for TypeScript allowing the injection of an invalid type?

A secure way to perform a deep update on any type, even if it is completely different from the original

Error encountered when transitioning to TypeScript: Unable to resolve '@/styles/globals.css'

Announce enhancements to a Typescript library

React's memo and/or useCallback functions are not functioning as anticipated

Exploring Angular data iteration with Tab and its contentLearn how to loop through Tab elements

Is it possible to import a class from a different project or module in TypeScript?

Can someone point me to the typescript build option in Visual Studio 2019 Community edition?

Guidelines for implementing more rigorous type checks in TypeScript:

An issue with the validation service has been identified, specifically concerning the default value of null in

Encountering a bug in Typescript where a Prisma relation list field fails when provided with an argument

Steps for confirming whether each element in the array includes the specified search string using Typescript and protractor

What sets apart 'export type' from 'export declare type' in TypeScript?