Using a class constructor as an argument for a function that requires a specific function type

Question

Using a class constructor as an argument for a function that requires a specific function type

Let's consider a scenario where we have a function defined as

(fooMaker: (_: string) => Foo): void

, in which Foo represents a class. Is there a way to directly pass the constructor of Foo to this function without needing to encase it like so: (s: string) => new Foo(s)?

typescript

Answer 1

Answer №1

There's no chance.

Just because the constructor for Bar requires a single string parameter, it doesn't automatically make it compatible with type (_: string) => Bar.

Answer 2

There's no chance.

Just because the constructor for Bar requires a single string parameter, it doesn't automatically make it compatible with type (_: string) => Bar.

Answer 3

Answer №2

After some thought, I crafted a wrapper code block as follows:

type ConstructorToFunction<C extends {new (...args: any[])}>=
    C extends { new (): infer Output } ? () => Output
    : C extends { new (arg1: infer Arg1): infer Output } ? (Arg1) => Output
    : C extends { new (arg1: infer Arg1, arg2: infer Arg2): infer Output } ? (Arg1, Arg2) => Output
    // and so on
    : never

const constructorToFunction = <C extends {new (...args: any[]): any}>(constructor: C): ConstructorToFunction<C> =>
     (...args: []) => new constructor(...args)

The ConstructorToFunction type transforms the constructor into a function with a matching structure, and constructorToFunction acts as the actual intermediary passing arguments from the outer function to the constructor.

In practice, this can be applied like: constructorToFunction(Foo). It might not be the most elegant solution, but it certainly beats manually creating the wrapper, especially for constructors with multiple parameters.

Answer 4

After some thought, I crafted a wrapper code block as follows:

type ConstructorToFunction<C extends {new (...args: any[])}>=
    C extends { new (): infer Output } ? () => Output
    : C extends { new (arg1: infer Arg1): infer Output } ? (Arg1) => Output
    : C extends { new (arg1: infer Arg1, arg2: infer Arg2): infer Output } ? (Arg1, Arg2) => Output
    // and so on
    : never

const constructorToFunction = <C extends {new (...args: any[]): any}>(constructor: C): ConstructorToFunction<C> =>
     (...args: []) => new constructor(...args)

The ConstructorToFunction type transforms the constructor into a function with a matching structure, and constructorToFunction acts as the actual intermediary passing arguments from the outer function to the constructor.

In practice, this can be applied like: constructorToFunction(Foo). It might not be the most elegant solution, but it certainly beats manually creating the wrapper, especially for constructors with multiple parameters.

Using a class constructor as an argument for a function that requires a specific function type

Answer №1

Answer №2

Similar questions

Utilizing TypeScript's dynamic class method parameters

React Hook: Child Component's onComplete Callback Cannot Call Parent Component's Dispatch

Error message: Angular - global is not defined when using Firebase

Can a mapped union type be created in TypeScript?

How can I make TypeScript's http.get Observable wait for the inline parameter to be returned?

Creating dynamic data-automation-ids for each option may be achieved by utilizing a method that

React.js - Issue with table not being redrawn after data filtering

Referring to a component type causes a cycle of dependencies

The correct way to subscribe to an Observable within Angular:

What is causing the error "has no properties in common with" in this wrapped styled-component?

Ways to modify a mongoose find query to return null instead of throwing a CastError in case of incompatible types

I'm curious about what exactly happens when the NextJS Link component is triggered and how we can effectively capture and respond

Is there a way to convert TSX source code into regular TS code?

Array of colors for Wordcloud in Angular Highcharts

Deactivate specific choices from a dynamically generated dropdown menu in Angular 8

Setting the selected value of a radio button in an edit form: a step-by-step

How to retrieve a value from an Angular form control in an HTML file

The argument labeled as 'State' cannot be assigned to a parameter labeled as 'never'

What is the proper way to add additional properties to an array object when initializing it in TypeScript?

Getting a specific array from the API with fetch in Angular: A step-by-step guide