A Typescript interface designed for a higher-order function that returns another function

Question

A Typescript interface designed for a higher-order function that returns another function

I am working with a StoryOptions object that includes a property called actionFn. This property, when invoked, will return a function utilizing function currying.

The actionFn function must accept an object of type

ActionBundle</code and should return a function that takes a <code>Payload

as an argument and produces a ReduxAction as a result.

How should I define the StoryOptions interface in TypeScript?

I attempted the following:

interface StoryOptions {
    baseName: string; 
    actionFn(actions: ActionBundle): ((payload: Payload): ReduxAction); 
}

However, this resulted in the error:

'ReduxAction' only refers to a type, but is being used as a value here.ts(2693)

typescript currying

Answer 1

Answer №1

Demonstrating that it functions properly can be achieved in the following manner:

interface StoryOptions {
    baseName: string; 
    actionFn(actions: ActionBundle): ((payload: Payload) => ReduxAction); 
}

Answer 2

Demonstrating that it functions properly can be achieved in the following manner:

interface StoryOptions {
    baseName: string; 
    actionFn(actions: ActionBundle): ((payload: Payload) => ReduxAction); 
}

Answer 3

Answer №2

It ought to be

interface StoryOptions {
  actionFn(actions: ActionBundle): (payload: Payload) => ReduxAction; 
}

There are two methods to define a callable interface in TypeScript.

type Callable = { (...args: any[]): any }
// or
type Callable = (...args: any[]) => any

When using the first syntax, the enclosing { } is necessary. This is what you overlooked.

Answer 4

It ought to be

interface StoryOptions {
  actionFn(actions: ActionBundle): (payload: Payload) => ReduxAction; 
}

There are two methods to define a callable interface in TypeScript.

type Callable = { (...args: any[]): any }
// or
type Callable = (...args: any[]) => any

When using the first syntax, the enclosing { } is necessary. This is what you overlooked.

A Typescript interface designed for a higher-order function that returns another function

Answer №1

Answer №2

Similar questions

Aliases in Typescript are failing to work properly when used alongside VSCode Eslint within a monorepository

Angular - Automatically update array list once a new object is added

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

Can Material UI be defined as a peerDependency while maintaining its types as a DevDependency?

The error message "better-sqlite3 TypeError: o.default is not a constructor" indicates that

Implementing OTP input using Material UI textfield

Issue with Angular ngFor binding. What could be causing this error to occur?

The VueJS function is not defined

Creating a universal wrapper function to serve as a logging tool?

What steps are necessary to integrate barrel file imports with my Angular 2 application?

The variable 'React' is defined but not utilized in the code

What is the best way to make a class available in the global namespace within a TypeScript module?

Inform the component of an error detected in the Angular service

I am unable to utilize ts-node-dev for launching a TypeScript + Express + Node project

Retrieving values from an array in a JSON response using Angular 4

Using Typescript for AngularJS bindings with ng.IComponentController

Seamless Navigation with Bootstrap Navbar and SmoothScroll

Nativescript encountered an issue while attempting to generate the application. The module failed to load: app/main.js

Using the Ngclass function with a pair of objects

Establish a connection with MongoDB and make changes to the data