A function that accepts a type parameter and returns an instance of that specific type

Question

A function that accepts a type parameter and returns an instance of that specific type

My goal is to implement a factory method for all my Axios API classes that are generated by the OpenAPI generator.

The Open-API tool creates a BaseAPI class with a constructor, and then generates several API classes that extend this BaseAPI based on my Backend Controllers.

I attempted to create the following function:

import { BaseAPI } from "@/api/base";

abstract class AbstractControllerHandler {
  protected createApi<T extends typeof BaseAPI>(clazz: T)  {
    return new clazz(
      undefined,
      "",
      AxiosInstanceHolder.getInstance().getAxiosInstance(),
    );
  }

This function is then utilized by another class:

import { CrudCapitalsourceControllerApi } from "@/api";

class CapitalsourceControllerHandler extends AbstractControllerHandler {
  private api: CrudCapitalsourceControllerApi;

  public constructor() {
    super();

    this.api = super.createApi(CrudCapitalsourceControllerApi);
  }
}

The CrudCapitalsourceControllerApi is defined as a subclass of BaseAPI and is automatically generated by OpenAPI.

When attempting to use the createApi function, I encountered a ts(2739) error which indicates that the returned type is BaseAPI, but it cannot be assigned to a variable of type CrudCapitalsourceControllerApi.

To resolve this issue, I believe I need to specify a return type for the createApi method. However, simply using T as the return type resulted in a ts(2322) error because I am returning an instance, not a type. Any suggestions on how I can address this problem? Perhaps something along the lines of "instanceof T" for the return type declaration?

typescript axios openapi-generator

Answer 1

Answer №1

Let's focus on the core issue in your code, as it lacks essential details needed for execution.

class Foo { baseAPI!: true }
class Bar extends Foo { foo!: true }

function createApi<T extends typeof Foo>(clazz: T) {
  return new clazz();
}

const bar: Bar = createApi(Bar) // encountering a type error because Foo cannot be assigned to Bar

The main concern lies in what is being constructed, not the constructor itself. Thus, that should be your generic parameter T.

If you modify createApi like this:

function createApi<T extends Foo>(clazz: new () => T) {
  return new clazz();
}

You will no longer face a type error here:

const bar: Bar = createApi(Bar) // works fine now

Check playground

Answer 2

Let's focus on the core issue in your code, as it lacks essential details needed for execution.

class Foo { baseAPI!: true }
class Bar extends Foo { foo!: true }

function createApi<T extends typeof Foo>(clazz: T) {
  return new clazz();
}

const bar: Bar = createApi(Bar) // encountering a type error because Foo cannot be assigned to Bar

The main concern lies in what is being constructed, not the constructor itself. Thus, that should be your generic parameter T.

If you modify createApi like this:

function createApi<T extends Foo>(clazz: new () => T) {
  return new clazz();
}

You will no longer face a type error here:

const bar: Bar = createApi(Bar) // works fine now

Check playground

A function that accepts a type parameter and returns an instance of that specific type

Answer №1

Similar questions

Setting up Oauth2 OIDC in an Angular 8 application

Unable to fetch data from API in React post-build

What is the process for exporting a TypeScript function so that it can be accessed from the command line in a web browser?

What could be the reason for my function throwing a TypeError with the message "<function> is not a function"?

React.js: You cannot call this expression. The type 'never' does not have any call signatures

Tips for creating an onClick event for a React Component that is passed as a prop to another component

Utilizing Angular for Select Options with Objects as Values

Enhance Tuple in Angular Component Properties

What steps can be taken to ensure the visibility and accessibility of two vertically stacked/overlapped Html input elements in HTML?

Ways to extract information from nested JSON arrays in objects?

Updating the value of a dropdown in React Testing Library

The String retrieved from the API response does not support displaying line breaks, whereas a hard-coded string can successfully display line breaks

Steps for clearing the chosen input data

Enhancing Vue prop with TypeScript typing

What is the proper way to utilize this xd-file package?

What is the method for retrieving the second type of property from an array of objects?

Encountering a Typescript error when defining a curried function after an uncurried function

Issue with the functionality of Angular 2 router not functioning correctly

Creating a spy object in Jest just got easier with the `

Leveraging IF conditions on part of the worksheet title