Using promises in TypeScript index signature

Question

Using promises in TypeScript index signature

Can you help me find the correct index signature for this particular class?

class MyClass {
  [index: string]: Promise<void> | Promise<MyType>; // not working

  public async methodOne (): Promise<void> { ... }
  public async methodTwo (): Promise<MyType> { ... }
}

I need to be able to call a method on this class using the string name of the method:

myClassInstance[stringNameOfMethodOne]()

There are two TypeScript errors that I am encountering. The error on the method definition states:

Property 'methodOne' of type '() => Promise<void>' is not assignable to 'string' index type 'Promise<void> | Promise<MyType>'

The error relating to the usage of the method is:

This expression is not callable. No constituent of type 'Promise<MyType> | Promise<void>' is callable.

I have successfully done similar tasks in JavaScript, but TypeScript's index signatures are proving to be more challenging.

typescript index-signature

Answer 1

Answer №1

It seems like you may have overlooked specifying the function type:

class YourClass {
  [key: string]: () => (Promise<void> | Promise<YourType>); // Define a function type that returns a Promise

  public async operationOne (): Promise<void> { ... }
  public async operationTwo (): Promise<YourType> { ... }
}

Answer 2

It seems like you may have overlooked specifying the function type:

class YourClass {
  [key: string]: () => (Promise<void> | Promise<YourType>); // Define a function type that returns a Promise

  public async operationOne (): Promise<void> { ... }
  public async operationTwo (): Promise<YourType> { ... }
}

Answer 3

Answer №2

Consider not using an index signature in this scenario. The following code demonstrates a successful implementation without it:

interface MyType { myType: true }

class MyClass {
  public async methodOne (): Promise<void> {}
  public async methodTwo (): Promise<MyType> { return { myType: true } }
}

const stringNameOfMethodOne = 'methodOne'
const myClassInstance = new MyClass()
myClassInstance[stringNameOfMethodOne]() // executes correctly

The variable stringNameOfMethodOne is declared as a string literal type, allowing TypeScript to accurately determine which property to access.

Answer 4

Consider not using an index signature in this scenario. The following code demonstrates a successful implementation without it:

interface MyType { myType: true }

class MyClass {
  public async methodOne (): Promise<void> {}
  public async methodTwo (): Promise<MyType> { return { myType: true } }
}

const stringNameOfMethodOne = 'methodOne'
const myClassInstance = new MyClass()
myClassInstance[stringNameOfMethodOne]() // executes correctly

The variable stringNameOfMethodOne is declared as a string literal type, allowing TypeScript to accurately determine which property to access.

Using promises in TypeScript index signature

Answer №1

Answer №2

Similar questions

Angular - Unable to access property '$invalid' because it is null

Challenges with passing props to a higher order stateless component in React using Typescript

The traditional function does not have access to a reference to this

Error: React is throwing a SyntaxError because a ")" is missing in the argument list

Is it feasible to amalgamate the states of several child components into a single parent component state in NextJS/React?

The Typescript Decorator is triggered two times

Understanding the functionality of imports within modules imported into Angular

There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

Blob is unable to open the PDF file as it is not

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

The types 'X' and 'string' do not intersect

Error: Oops! The super expression can't be anything other than null or a function in JavaScript/TypeScript

Unable to organize list of entities based on numerical values

Firebase Promise not running as expected

How can I determine which dist folder is utilized during the building of my App if an npm package contains multiple dist folders?

Extending Interfaces Using Keys from an Array in Typescript

Can a substring within a string be customized by changing its color or converting it into a different HTML tag when it is defined as a string property?

Update the header background color of an AG-Grid when the grid is ready using TypeScript

What makes fastify-plugin better than simply calling a regular function?

React TypeScript - Issue with passing props to Hooks causing type errors