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

Creating Concurrent Svelte Applications with Local State Management

Note: Self-answer provided. There are three primary methods in Svelte for passing data between components: 1. Utilizing Props This involves passing data from a parent component to a child component. Data transfer is one-way only. Data can only be passed ...

In order to address the issue of displaying a 404 error in In-Memory Angular,

I have watched all the videos regarding the In-memory web API and diligently followed all the steps and instructions. However, I am still encountering a 404 Error. Please inform me if I missed something or made an error. I have attempted to troubleshoot an ...

Guide on importing absolute paths in a @nrwl/nx monorepo

I am currently working on a @nrwl/nx monorepo and I am looking to import folders within the project src using absolute paths. I attempted to specify the baseUrl but had no success. The only solution that did work was adding the path to the monorepo root ts ...

Require a property to be mandatory depending on the value of another property within a generic interface

Looking for a way to have one property affect the others in a react component interface? Here's an example of what I'm trying to achieve: export interface IMyAwesomeComponentProps<T = {}> { className: string defaultPath?: ISomeOthe ...

Changing the button class during an event in Angular 4

In the process of creating an MCQ test, I am looking to implement a feature where selected button options are highlighted in green upon clicking. While I have successfully implemented this feature using Angular 1, I am facing challenges in converting it to ...

Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

I've been struggling to automate tests for my repository using mocha-webpack and Travis CI. The local machine runs the tests smoothly, but Travis CI hasn't been able to complete them yet due to an unresolved error: WEBPACK Failed to compile wit ...

Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

While working on a project with keycloak, I've encountered an issue that I can't seem to figure out. After logging in and navigating to my project's page, everything operates smoothly. However, if I happen to refresh the page before logging ...

Dependency mismatch in main package.json and sub package.json

Imagine you have a project structure in Typescript set up as follows: root/ api/ package.json web/ package.json ... package.json In the main package.json file located in the root directory, Typescript is installed as a dependency to make ...

How to access the result without using subscribe in Angular?

I am facing unexpected behavior with a method in my component: private fetchExternalStyleSheet(outerHTML: string): string[] { let externalStyleSheetText: string; let match: RegExpExecArray; const matchedHrefs = []; while (match = this.hrefReg.exe ...

TypeScript async function that returns a Promise using jQuery

Currently, I am facing a challenge in building an MVC controller in TypeScript as I am struggling to make my async method return a deferred promise. Here is the signature of my function: static async GetMatches(input: string, loc?: LatLng):JQueryPromise& ...

A more efficient method for incorporating types into props within a functional component in a TypeScript-enabled NextJS project

When dealing with multiple props, I am looking for a way to add types. For example: export default function Posts({ source, frontMatter }) { ... } I have discovered one method which involves creating a wrapper type first and then defining the parameter ty ...

TypeScript is encountering difficulty locating a node module containing the index.d.ts file

When attempting to utilize EventEmitter3, I am using the following syntax: import EventEmitter from 'eventemitter3' The module is installed in the ./node_modules directory. It contains an index.d.ts file, so it should be recognized by Typescrip ...

TypeScript throws an error if trying to access an Object variable using a String

While the code below is functioning as intended, I am encountering an error in the VS Code Typescript compiler stating that "Type 'String' cannot be used as an index type". Oddly enough, using a string literal instead of a variable like ...

the input parameter is not being passed to the component

I need assistance with creating an inline input edit component. The component is loading correctly, but it seems like the @Input() variables are always returning undefined. index.html ... <app-inlineinput [name]="username" [fi ...

Implementing a feature in ReactJS that allows users to upload multiple images in base64 format

I'm trying to develop an image uploader using base64 and I want the output as an array. However, I am encountering an issue where the array is coming out empty!. I suspect it might be due to an asynchronous problem. Any tips on how to incorporate asyn ...

When trying to incorporate aws-sdk into Angular2, an error message stating "Module 'stream' cannot be found" may occur

I encountered the following issues: Error TS2304: Cannot find name 'Buffer', https://github.com/aws/aws-sdk-js/issues/994 and Using aws-sdk with angular2 Even though my typings and @types/node seem to be properly installed, I am still encount ...

What is the best way to create a fixed array of unchangeable objects?

I am trying to create a class that requires an array of objects as one of its constructor parameters, with the condition that neither the array nor the objects in it can be modified. My current approach involves using the readonly modifier along with the g ...

Can you explain the distinction between App: React.FunctionComponent and App = (): React.FunctionComponent()?

Currently exploring the depths of typescript. Can someone clarify the distinction between these two code snippets: const App: React.FunctionComponent<CustomProps> = (props: CustomProps) => { return <div>Hello World!</div>; }; and: ...

The function response.body.getReader is not defined

While making a call to a web api using fetch, I encountered an issue when attempting to read the response as a stream. Despite calling getReader() on response.body, I received the error message: "TypeError: response.body.getReader is not a function". ...

I am interested in creating an input range slider using React and TypeScript

This code was used to create a slider functionality import { mainModule } from 'process'; import React, { useState } from 'react'; import styled from 'styled-components'; const DragScaleBar = () => { const [value, setV ...