TYPESCRIPT : Argument of type 'typeof X' is not assignable to parameter of type 'Y' with extends

Question

I am starting to code with typescript and I have a few compilation problems.

I have several classes and it seems that I have a hierarchy problem

On my first class (A) I indicated a set of properties / functions. I have a second class (B) which inherits from class (A) and which adds certain properties / functions. Finally I have a third class (C) which inherits from 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');
    }
}

When compiling, I get 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.

My 3 classes are in 3 separate files and I use export / import and it seems to work ...

Do you have an idea?

TSCONFING:

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

I'm trying to make a code like this link . The error messages that sound on the site are not quite the same as I have in my editor, but maybe when correcting on the site I will find the final problem ...

Thank you so much.

Answer 1

Thanks for the playground link, it helped to find the issue.

It was not working because you want to store a factory, asked for an instance.

The main trick is here:

registeredTypes: Map<string,typeof ComponentBase>

The full fixed version is here:

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);
  }
}