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

How can one define a getter within an interface?

What are the steps to implement a Bottom Navigation bar in iOS and a Top Navigation bar in Android using NativeScript Angular?

You cannot call this expression. The type 'String' does not have any call signatures. Error ts(2349)

The specified type 'ListRenderItem<IPhotos>' cannot be assigned to type 'ListRenderItem<unknown>'

Attempting to utilize a namespace-style import for calling or constructing purposes will result in a runtime failure

What is the process for marking a form field as invalid?

Insert an HTML element or Angular component dynamically when a specific function is called in an Angular application

Ways to enhance the type definitions for a built-in HTML element in Vue.js?

How do I add a new module to an existing one using Angular-CLI?

Typescript compiler: Unable to locate the definition for 'Map' data type

Building a continuous timer loop in Angular using RxJS that adapts to changing durations within an array's objects

calculate the difference between two dates and then add this difference to a new date

Sending properties via react router link in TypeScript

Set an interface to null within Angular 4

A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

The issue with functions not executing when triggered by HammerJS

Tips for preventing <v-layouts> from impacting one another

Workspace Settings cannot be saved due to an unregistered configuration

What could be causing Typescript Intellisense to not display Object extensions?

Angular and WEB API experiencing issues with the update function synchronization