Steps for generating an instance of a concrete class using a static method within an abstract class

Trying to instantiate a concrete class from a static method of an abstract class is resulting in the following error:

Uncaught TypeError: Object prototype may only be an Object or null: undefined

This error occurs on this line in ConcreteClass.js: return extendStatics(d, b);

var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };

Related project files:

Program.ts

import { AbstractClass } from "./AbstractClass";

class Program
{
    public static Main()
    {
        let instance = AbstractClass.CreateObject();
        instance.Method();
    }
}
Program.Main();

AbstractClass.ts

import { ConcreteClass } from "./ConcreteClass";

export abstract class AbstractClass
{
    public static CreateObject()
    {
        return new ConcreteClass();
    }

    public abstract Method(): void;
}

ConcreteClass.ts

import { AbstractClass } from "./AbstractClass";

export class ConcreteClass extends AbstractClass
{
    public Method() : void
    {
        console.log("Method of ConcreteClass");
    }
}

Answer №1

The issue arises from a circular import scenario between `AbstractClass` and `ConcreteClass`, where each is importing the other and their definitions depend on one another. The crux of the problem lies in the fact that when `ConcreteClass` extends `AbstractClass`, the latter is still undefined because it is waiting for `ConcreteClass` to finish loading. This results in runtime encountering a situation similar to the following:

import { AbstractClass } from "./AbstractClass";

// at runtime AbstractClass has not finished loading yet so it is undefined
export class ConcreteClass extends undefined
{
    public Method() : void
    {
        console.log("Method of ConcreteClass");
    }
}

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

Steps for displaying the appended string on a web page using React hooks

Check out this code snippet: const Gauge = (props) => { const points = 100; const radius = 257; const max = 100; const peaks = [ 10, 50, 90 ]; const step = (max + 1) / points; const realPeaks = peaks.map((peak) => Math.floor(p ...

The "shape" property is not available while utilizing generics with toZod

Short version: I encountered a type error, and here is the link to the TS PLAYGROUND I am looking to ensure type safety when creating zod schemas. To achieve this, I define the data type like so: type Option = { id: number }; Using this type definition ...

JavaScript and TypeScript: Best practice for maintaining an Error's origin

Coming from a Java developer background, I am relatively new to JavaScript/TypeScript. Is there a standard approach for handling and preserving the cause of an Error in JavaScript/TypeScript? I aim to obtain a comprehensive stack trace when wrapping an E ...

What is the best way to link function calls together dynamically using RXJS?

I am seeking a way to store the result of an initial request and then retrieve that stored value for subsequent requests. Currently, I am utilizing promises and chaining them to achieve this functionality. While my current solution works fine, I am interes ...

What is the best way to merge two different types in TypeScript?

JavaScript is struggling to merge two objects with identical properties. During development, there's a need to combine two configurations. if (mode === 'development') { return merge(productionConfig, Configuration); } The interfaces ...

What are some ways to conceal methods within a class so that they are not accessible outside of the constructor

I am a newcomer to classes and I have written the following code: class BoardTypeResponse { created_on: string; name: string; threads: string[]; updated_on: string; _id: string; delete_password: string; loading: BoardLoadingType; error: Bo ...

Is there a way to specify the sequence in which Observables are subscribed to in Angular?

Working with API calls in a service.ts file has brought me some challenges. Here is the code snippet: //code getCars() { this.car = this.http.get(car_url) return this.car; } getTires() { this.tires = this.http.get(tires_url) return this.tires; } getSeat ...

Unable to get md-virtual-repeat to work within md-select?

Attempting to use md-select to showcase a large amount of data is causing the browser to freeze upon opening. To address this, I tried implementing md-virtual repeat within md-select for improved performance. However, the code doesn't seem to be funct ...

I'm wondering why Jest is taking 10 seconds to run just two simple TypeScript tests. How can I figure out the cause of this sluggish performance?

I've been experimenting with Jest to execute some TypeScript tests, but I've noticed that it's running quite slow. It takes around 10 seconds to complete the following tests: import "jest" test("good", () => { expec ...

A guide to setting properties using a Proxy object

Within my class, I have included a Proxy which is structured as follows: export class Row<T extends ModelItems> { private _row: T = <T>{} public constructor(rowItems?: T) { if (rowItems) { this._row = rowItems } return new Proxy( ...

InvalidAction: The function forEach cannot be applied to "res"

Here is the HTML code that I am currently working with: <div *ngIf="chart" class="col-xl-4 col-lg-6"> <div class="card cardColor mb-3"> <div class="card-header headColor"> <img class="img-fluid" src="../../../ ...

Tips on incorporating jstree into an Angular 2 application with TypeScript and @types/jstree

Hello, I am new to ng2 and have a question that may seem obvious to some. I recently installed the jstree library using npm in my angular-cli application by running the command npm i jstree --save. Following this, I also installed the types for jstree wi ...

Saving the link to the search results for future reference

Procedure: onSearch(searchString) { if (this.props.history) { this.props.history.push( "/details?search=" + encodeURIComponent(searchString) ); } } Explore Bar: <Search onKeyPress={(event) => ...

Passing information from the main component to a service through API connections

Currently, I am in the process of developing a website dedicated to showcasing the top 20 highest-rated Sci-fi movies. The main component on the homepage leverages a GET request via a service to fetch an array of objects containing the movie data. This mov ...

Can the WebSocket interface be substituted with WebSocket itself?

I'm currently in the process of setting up a WebSocket.Server using ws, Express 4, NodeJS, and TypeScript by following a guide. However, I've encountered an issue with the provided code not working as expected from the tutorial found at . In ord ...

Having trouble retrieving mobiscroll instance in Angular with Ionic

I'm facing an issue with accessing the instance of my mobiscroll widget in Angular 4 with Ionic Framework. Despite following all the correct steps, the actual widget won't get selected. Below is the code for the widget: <mbsc-widget [options ...

Gaining entry to a static member of an exported class in a module

I am facing an issue with my Typescript code snippet. The code is as follows: module MyModule { export class MyClass { static MyStaticMember : string; } } My requirement is to access this code from a separate file after compilation. I tri ...

The Angular/Typescript framework encountered an issue when trying to locate a differ that can handle an object of type 'object'. NgFor is limited to binding with Iterables like Arrays and is not compatible with plain objects

I am currently utilizing Angular for my project. I am attempting to call an API to fetch data from it, but I keep encountering this error: core.js:4352 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object&ap ...

Can we determine the return type of a function based on the specific parameters it is called with?

When working with generated APIs, such as openapi-fetch, our code may look something like this: import {paths} from "./the-generated-types"; import createClient from "openapi-fetch"; const client = createClient<paths>(); // U ...

Is there a way to override the JSON.stringify method within the JSON class of a TypeScript project without using a custom call?

Dealing with a React Native and TypeScript app here. I keep encountering an error from Fabric every week: "JSON.stringify cannot serialize cyclic structures." The frustrating part is that the error seems to pop up randomly, without any specific scenario tr ...