Creating asynchronous JavaScript constructors using a static method called "create" presents challenges when dealing with TypeScript types

I've been diving into the world of asynchronous constructors and have successfully implemented them in JavaScript.

However, I'm facing a challenge with TypeScript types. Here's how it should ideally work:

const a: AnyClass = await AnyClass.create();

While this setup works perfectly in JavaScript, the TypeScript types are currently missing.

Let's consider the example of a similar class named DbConnection:

class DbConnection extends AsyncConstructor<[serverId: number, url: string]> {
    #serverId: number;
    #connection: Connection;

    protected constructor(serverId: number, url: string) {
        super(serverId, url);
        this.#serverId = serverId;
    }

    protected override async constructorAsync(serverId: number, url: string): Promise<void> {
        this.#connection = await DB.connect(url);
    }
}

The foundation class is as follows:

class AsyncConstructor<CtorParams extends any[]> {
    protected constructor(...args: CtorParams) {}

    protected async constructorAsync(...args: CtorParams): Promise<void> {
        return Promise.resolve();
    }

    // =-->>> MISSING TYPES FOR THE NEXT METHOD: <<<--=
    static async create(...args: CtorParams) {
        const res = new this(...args);
        await res.constructorAsync(...args);
        return res;
    }
}

My question is, what type should be specified for the return value of the create method?

Answer №1

It is currently not possible in 2024 due to the limitations of TypeScript (specifically version 5.3 or lower).


  • According to @KernelDeimos, there is an unresolved issue in the TypeScript repository regarding polymorphic "this" for static members - Issue #5863
  • Additionally, as mentioned by @jonrsharpe, a similar problem has been discussed here - Using `this` as a generic type on a static method

The only potential partial solution at present is:

class DbConnection  {
    #serverId: number;
    #connection: Connection;

    static async create(serverId: number, url: string): Promise<DbConnection> {
        const connection = await DB.connect(url);
        const res = new DbConnection(serverId, url, connection);        
        return res;
    }

    protected constructor(serverId: number, connection: Connection) {        
        this.#serverId = serverId;
        this.#connection = connection;
    }
}

However, this approach comes with its drawbacks:

  • Inability to enforce consistent implementation across classes
  • Resulting in each class having its own unique name and creation process
  • Potential complications during inheritance within complex class structures, particularly in large codebases

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue: The initial parameter should be a File or Blob object

Hey there! I'm currently utilizing the compressorjs plugin for compressing images, but I'm encountering an issue when selecting images. You can find out more about the plugin here. Here is my code snippet: window.resolveLocalFileSystemURL( ...

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

I am seeking assistance with implementing a Javascript onclick Dropdown Menu. The current issue I am facing is that when one menu is opened and another menu is clicked, the previous menu remains open. My desired solution is to have the previously open menu ...

jQuery technique for loading images

Here is the issue at hand: I am attempting to utilize jQuery to accelerate image loading on my webpage. To achieve this, I have a code snippet specifying an initial image that should be replaced with another image once the page has finished loading. < ...

What could be causing the response data from an AJAX request to be in error instead of success?

My JSON data is securely stored on , and I can access it through a unique URL. Here is the specific URL: The JSON data found at the above URL is: { "glossary": { "title": "Suyog", "GlossDiv": { ...

When configuring the Redux logger, the type 'Middleware<{}, any, Dispatch<UnknownAction>>' is not compatible with type 'Middleware<{}, any, Dispatch<AnyAction>>'

In my React project, I have defined the redux logger with the package version "redux-logger": "^3.0.6" in the file store.ts as shown below: import { configureStore } from '@reduxjs/toolkit'; import rootReducer from '@/re ...

Guide to implementing the HttpOnly flag in a Node.js and Express.js application

Hey there! I'm currently working on a project using node.js and I need to ensure that the HttpOnly flag is set to true for the header response. I've written this code snippet in my app.js file but it doesn't seem to be affecting the respons ...

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...

Changing Image Size in Real Time

Trying to figure out the best way to handle this situation - I need to call a static image from an API server that requires height and width parameters for generating the image size. My website is CSS dynamic, adapting to different screen sizes including ...

Comparing Two Items between Two Arrays

I have a scenario where I need to compare values in two arrays by running a condition. The data is pulled from a spreadsheet, and if the condition is met, I want to copy the respective data. For instance, I aim to compare two cells within a spreadsheet - ...

What is the most secure approach for defining the file path of an HTML file within an express.js application?

In my directory setup, I have the index.js file located at: path/to/home-page/src/routes This is also where you can find the __dirname. The html file resides at: path/to/home-page/public/bootstrap/Homepage/page.html To serve the html document by relati ...

React doesn't properly display JSON data

I am facing an issue with the code below that is supposed to display data from a JSON file. Instead of showing the desired data, it only displays the h1 with curly braces. Here is the faulty code: import prod from "../../data/produtos.json"; exp ...

The meaning behind a textual representation as a specific type of data

This snippet is extracted from the file lib.es2015.symbol.wellknown.d.ts interface Promise<T> { readonly [Symbol.toStringTag]: "Promise"; } The concept of readonly seems clear, and the notation [Symbol.toStringTag] likely refers to "'toStr ...

Having trouble with the click button flip function? It seems to be working in one section but not in

Currently, I am facing an issue with a card section that contains two buttons and a description. The first button adds an image which is working perfectly fine, as well as the description section. On the other hand, the second button adds a video and when ...

What is the best way to transfer XML file information using AJAX to a Webmethod?

I'm encountering an issue when attempting to send XML via an ajax call to my Webmethod (C# Webforms): Previously, I successfully tested the ajax call with JSON and was able to send JSON to the Webmethod. Although the response status code returns as ...

Tips for generating an ecosystem.json file for a node.js express app with pm2 that launches with npm start command

I am looking to utilize pm2 for my node.js express app. Although I can successfully start the server using npm start, I want to set it up in the ecosystem.json file so that I can manage it with pm2 and run it in cluster mode. One thing to note is that I c ...

Populate an array using a callback function within an async.series operation

I have a callback function within 'async.series' that generates multiple values and creates various outputs from 'elements'. Is there a way to save these return values into an array using 'forEach'? async.series( { ...

Executing intricate MongoDB collection queries using Node.js

I have a vast collection of records stored in MongoDB structured like the following example: { "key" : "a" ,"data" : "value1" , "lastname" : "Doe" }<br> { "key" : "ab" , "data" : "value1" , "lastname" : "Doe" }<br> { "key" : "abc" , "data" : ...

Experiencing difficulty in successfully updating a React child component when the prop passed from the parent component is

In the backend implementation, I have successfully set up a socket.io, Node, Express configuration that has been tested to work correctly. It is emitting the right number of broadcasts to the appropriate client using socket.emit("team_set", gameI ...

Issue encountered while working with PostgreSQL and Sequelize when using the array_append function

I'm encountering issues with the following code snippet let user = req.user.id; await MyTable.update( {'interested': Sequelize.fn('array_append', Sequelize.col('interested'), user)}, {'where ...

I am finding my program to be lacking efficiency. Is there a more concise method for solving this issue?

Starting off with my journey in Javascript, I am eager to tackle problems and enhance my skills. One challenge that came my way is the following question. Despite my efforts to solve it step by step, I feel like there might be room for improvement in my co ...