When attempting to define a property in a Typescript interface as either a string or a function that returns a string, an error stating "expression cannot be invoked" is encountered

Question

When attempting to define a property in a Typescript interface as either a string or a function that returns a string, an error stating "expression cannot be invoked" is encountered

Recently, I created an interface following the guidelines mentioned in this thread Defining TypeScript variable type function or string

The interface definition is as follows:

type displayWithFn<T> = (value: T) => string;
export interface Value<T> {
  value: T,
  displayValue: string | displayWithFn<T>;
}

Within my codebase, there's a function being used:

getDisplayValue(item: Value<T>): string {
    
    if (typeof item.displayValue === 'string') {
      return item.displayValue  as string;
    } else {
      return item.displayValue(item.value);
    }
  }

However, on executing the line item.displayValue(item.value), an error is thrown stating "TS2349 cannot invoke an expression whose type lacks a call signature. Type string | displayWithFn has no compatible call signatures."

I am currently using TypeScript version 3.5.3.

Could anyone offer a solution to this problem?

javascript typescript

Answer 1

Answer №1

I have tested the code in the TypeScript playground and did not encounter the reported issue.

type displayWithFn<T> = (value: T) => string;

export interface Value<T> {
  value: T,
  displayValue: string | displayWithFn<T>;
}

function getDisplayValue<T>(item: Value<T>): string {
    if (typeof item.displayValue === 'string') {
        return item.displayValue  as string;
    } else {
        return item.displayValue(item.value);
    }
}

Please confirm if this resolves your problem.

Answer 2

I have tested the code in the TypeScript playground and did not encounter the reported issue.

type displayWithFn<T> = (value: T) => string;

export interface Value<T> {
  value: T,
  displayValue: string | displayWithFn<T>;
}

function getDisplayValue<T>(item: Value<T>): string {
    if (typeof item.displayValue === 'string') {
        return item.displayValue  as string;
    } else {
        return item.displayValue(item.value);
    }
}

Please confirm if this resolves your problem.

When attempting to define a property in a Typescript interface as either a string or a function that returns a string, an error stating "expression cannot be invoked" is encountered

Answer №1

Similar questions

Is there a way to conceal the article container?

A guide on validating an array of literals by leveraging the power of class-validator and class-transformer through the methods plainToInstance or plainTo

Working with jQuery conditionals to manipulate JSON data

Selecting from a variety of options presented as an array of objects

Node.js and the concept of handling null values

Turn off spellcheck for all material-ui elements

Issue encountered while generating dynamic Routes using the map function

Strategies for determining the direction of a slide event within a Bootstrap carousel

The API results are able to be displayed in the console, but unfortunately cannot be shown on the user interface. Any efforts to map the results will result in an Un

Execute code if the element is present on the page

GraphQL failing to communicate with WP API

What could be causing AngularJS to fail to send a POST request to my Express server?

Troubleshooting Query Param Problems in EmberJS Route Navigation

Encountering RangeError with the Number() function on my express.js server

Guide on displaying JSON data from a server on a webpage using Google Charts in real-time

Unlocking the intricacies of navigating through nested arrays of objects in JavaScript

Difficulty Sorting Dates in Material UI DataGrid

A guide on utilizing ClassName to insert new items into a DIV

Using Browserify to fetch external JSON data

Combining two geometries with indexes into a BufferGeometry