TYPESCRIPT: The argument labeled as 'typeof X' cannot be assigned to the parameter labeled as 'Y' that extends

Question

TYPESCRIPT: The argument labeled as 'typeof X' cannot be assigned to the parameter labeled as 'Y' that extends

As I venture into coding with TypeScript, I am encountering some compilation issues.

It appears that I am facing a hierarchy problem with several classes.

The first class (A) defines a set of properties/functions. The second class (B) inherits from class (A) and adds additional properties/functions. Furthermore, there is a third class (C) which extends the second class (B).


export default class A {
    prop1: string;
    function1() {
        console.log('TEST');
    }
}

export default class B extends A {
    prop2: string;
    function2() {
        console.log('TEST');
    }
}

export default class C extends B {
    prop3: string;
    function3() {
        console.log('TEST');
    }
}

During compilation, I encounter the following error message:

TS2345: Argument of type 'typeof C' is not assignable to parameter of type 'A'. Type 'typeof C' is missing the following properties from type 'B': prop1, function1.

All three classes are stored in separate files and I utilize export/import features which seem to be functioning properly...

Any insights or suggestions?

TSCONFIG:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

I am attempting to structure my code similar to this link. While the error messages on the website may differ slightly from those displayed in my editor, it might help me pinpoint the exact issue...

Your assistance is greatly appreciated.

javascript typescript class extends

Answer 1

Answer №1

Thank you for sharing the playground link, it was instrumental in identifying the issue.

The reason it wasn't functioning correctly was due to the requirement for storing a factory instead of an instance.

The key point lies here:

registeredTypes: Map<string,typeof ComponentBase>

Here is the fully corrected version:

export class ComponentBase {
  prop: string;

  constructor(prop: string) {
    this.prop = prop;
  }
}

export class Component extends ComponentBase {
  otherProp: string;

  constructor(prop: string, otherProp: string) {
    super(prop);
    this.otherProp = otherProp;
  }
}

export class ButtonGeneric extends Component {
  buttonProp: string;

  constructor(buttonProp: string) {
    super('prop', 'otherProp');
    this.buttonProp = buttonProp;
  }
}

export class ButtonSpecific extends ButtonGeneric {
  buttonSpecProp: string;

  constructor(buttonSpecProp: string) {
    super('buttonProp')
    this.buttonSpecProp = buttonSpecProp;
  }
}



export class ComponentFactory {

  registeredTypes: Map<string,typeof ComponentBase>

  constructor() {
    this.registeredTypes = new Map<string,typeof ComponentBase>();
  }

  register(className: string, classConstructor: typeof ComponentBase) {
    if (!this.registeredTypes.has(className)) {
      this.registeredTypes.set(className, classConstructor);
    }
  }

  create(className: string, properties: string) {
    if (!this.registeredTypes.has(className)) {
      throw Error('The class [' + className + '] doesn\'t exists. Couldn\'t create new object');
    }

    let classConstructor = this.registeredTypes.get(className);
    if (classConstructor == null) { throw new Error('') }
    const instance = new classConstructor(properties);
    return instance;
  }

}

const FactoryButtonConst = 'button';

export class ButtonFactory extends ComponentFactory {
  constructor() {
    super();
    this.register(FactoryButtonConst, ButtonSpecific);
  }

  createButtonSpecific(buttonSpecProp: string) {
    return this.create(FactoryButtonConst, buttonSpecProp);
  }
}

Answer 2

Thank you for sharing the playground link, it was instrumental in identifying the issue.

The reason it wasn't functioning correctly was due to the requirement for storing a factory instead of an instance.

The key point lies here:

registeredTypes: Map<string,typeof ComponentBase>

Here is the fully corrected version:

export class ComponentBase {
  prop: string;

  constructor(prop: string) {
    this.prop = prop;
  }
}

export class Component extends ComponentBase {
  otherProp: string;

  constructor(prop: string, otherProp: string) {
    super(prop);
    this.otherProp = otherProp;
  }
}

export class ButtonGeneric extends Component {
  buttonProp: string;

  constructor(buttonProp: string) {
    super('prop', 'otherProp');
    this.buttonProp = buttonProp;
  }
}

export class ButtonSpecific extends ButtonGeneric {
  buttonSpecProp: string;

  constructor(buttonSpecProp: string) {
    super('buttonProp')
    this.buttonSpecProp = buttonSpecProp;
  }
}



export class ComponentFactory {

  registeredTypes: Map<string,typeof ComponentBase>

  constructor() {
    this.registeredTypes = new Map<string,typeof ComponentBase>();
  }

  register(className: string, classConstructor: typeof ComponentBase) {
    if (!this.registeredTypes.has(className)) {
      this.registeredTypes.set(className, classConstructor);
    }
  }

  create(className: string, properties: string) {
    if (!this.registeredTypes.has(className)) {
      throw Error('The class [' + className + '] doesn\'t exists. Couldn\'t create new object');
    }

    let classConstructor = this.registeredTypes.get(className);
    if (classConstructor == null) { throw new Error('') }
    const instance = new classConstructor(properties);
    return instance;
  }

}

const FactoryButtonConst = 'button';

export class ButtonFactory extends ComponentFactory {
  constructor() {
    super();
    this.register(FactoryButtonConst, ButtonSpecific);
  }

  createButtonSpecific(buttonSpecProp: string) {
    return this.create(FactoryButtonConst, buttonSpecProp);
  }
}

TYPESCRIPT: The argument labeled as 'typeof X' cannot be assigned to the parameter labeled as 'Y' that extends

Answer №1

Similar questions

What is the best way to organize variable values in conjunction with their corresponding variable names?

Exploring JSON data in AngularJS

What is the best way to incorporate a line into a scene using three.js?

Having issues binding v-on:change.native in the parent component of Vue.js

I am creating an HTML page that incorporates p5.js, and the text I'm rendering

Loading a large quantity of items into state in React Context using Typescript

Utilizing lodash to Filter Arrays Within Arrays

Revamp the Vue component for better DRYness

Issue with submitting input fields that were dynamically added using jquery

Why would triggering an input event have any effect if it doesn't appear to be utilized anywhere?

Changing between two images using HTML and CSS

Unable to import local npm package due to an error

Upon clicking the <p:submenu> element, directly navigate to the first <p:menuitem> element

Retrieving information from a Kendo grid cell

Django's "Like" feature with AJAX interaction (duplicate)

Is there a specific point in which we can directly pass a value to the `state` in Redux?

Conceal/reveal specific sections of a table cell using jQuery

Difficulty validating RSA signature on the server end originating from client-side Javascript

How can I ensure that a pop-up is shown only once per day in Vue.js

ClassNames Central - showcasing a variety of class names for interpolation variables