I am starting to code with typescript and I have a few pilation 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 piling, 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:

{
  "pilerOptions": {
    "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.

I am starting to code with typescript and I have a few pilation 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 piling, 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:

{
  "pilerOptions": {
    "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.

• javascript
• typescript
• class
• extends

Share Improve this question Follow edited Apr 2, 2020 at 9:37 Answerrer asked Apr 2, 2020 at 8:07 AnswerrerAnswerrer 3,61344 gold badges1111 silver badges1919 bronze badges 6

• What version of the TS are you using? Post please tsconfig file. – Drag13 Commented Apr 2, 2020 at 8:11
• In the playground I see only one issue - multiple default exports – Drag13 Commented Apr 2, 2020 at 8:12
• Here is my tsconfig file : { "pilerOptions": { "outDir": "./dist/", "noImplicitAny": true, "module": "es6", "target": "es5", "jsx": "react", "allowJs": true } } – Answerrer Commented Apr 2, 2020 at 8:30
• It still works fine. Is this is actual code? Seems you have duplicated property inside the child like partner: name:string and child: name:number; – Drag13 Commented Apr 2, 2020 at 8:36
• You can use typescript playground to check your code – Drag13 Commented Apr 2, 2020 at 9:00

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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);
  }
}