type check in TypeScript (with inheritance)

Question

I have a problem trying to check a type in angular.

export interface DynamicComponentConfig {
    name: string;
    component: Type<any>;
}

export class DynamicInputComponent extends DynamicComponentBase {
}
export class DynamicDatePickerComponent extends DynamicComponentBase {
}

export class DynamicComponentBase {
    @Input() group: FormGroup;
    @Input() form: FormGroupDirective;
}

When I create an instance which is holding a reference type (not an instance of the type):

let conf: DynamicComponentConfig = {
    component: DynamicInputComponent,
    name: 'Surname'
};

And pass to a service in charge of creating my component dynamically, I need to check the type, but instanceof is not working:

if (conf.component instanceof DynamicComponentBase) {
...
}

it's only working when I check directly the type it belongs to, but I have several components all of them inherit from DynamicComponentBase:

if (conf.component === DynamicInputComponent || conf.component === DynamicDatePickerComponent || ...) {
...
}

Checking config.component.prototype I get DynamicComponentBase {constructor: ƒ}, but if I check config.component.prototype === DynamicComponentBase I get false

So what I'm looking for is a way to check if they inherit from my base component, any idea?

Does this answer your question? [Interface type check with Typescript](https://stackoverflow.com/questions/14425568/interface-type-check-with-typescript) — Sean Vieira, Sep 08 '21 at 00:30
@SeanVieira not really, as vaira stated, conf.component is holding a typeOf DynamicInputComponent, not an instance, but typeof conf.component returns "function" — LeonardoX, Sep 08 '21 at 16:02

vaira · Answer 1 · 2021-09-09T04:04:47.443

conf.component is holding a typeOf DynamicInputComponent, not an instance of dynamic.

class Bat {
public name?: string;

}

let typeOfBat = Bat;
let obj = new  Bat();

console.log(typeOfBat === Bat); // true
console.log(obj === Bat); // false
console.log(typeOfBat instanceof Bat); // false
console.log(obj instanceof Bat); // true

After your Edit // Your issue is the below line.

component: Type;

Here you are just allowing any type so you are forced to check if the base is DynamicComponentBase but if you write it component: typeof DynamicComponentBase;, then you don't have to worry about it, Typescipt will check it for you.

class DynamicComponentBase {
 group: string = '';
 form: number = 0;
}


 interface DynamicComponentConfig {
    name: string;
    component: typeof DynamicComponentBase; // this will either DynamicComponentBase or its child refered 
}

 class DynamicInputComponent extends DynamicComponentBase {
}
 class DynamicDatePickerComponent extends DynamicComponentBase {
}

 class NotDynamicComponent  {
}


let conf: DynamicComponentConfig = {
    component: DynamicInputComponent, 
    name: 'Surname'
};

/*
let conf1: DynamicComponentConfig = {
    component: NotDynamicComponent, // will lead to error
    name: 'Surname'
};
*/

if(conf.component === DynamicInputComponent) 
{
    console.log("DynamicInputComponent");
}

if(conf.component === DynamicDatePickerComponent)
{
    console.log("DynamicDatePickerComponent");
}

if(conf.component === NotDynamicComponent) // can never be true
{
    console.log("NotDynamicComponent");
}

ok, so the only way to check the type is the one I already said (conf.component === DynamicInputComponent) ??, no way to check inheritance base class/interface? — LeonardoX, Sep 08 '21 at 15:39
if I check in console config.component.prototype I get DynamicComponentBase {constructor: ƒ}, but if I check config.component.prototype === DynamicComponentBase I get false — LeonardoX, Sep 08 '21 at 15:58
@vaiara, that's exactly what I don't want to do: checking if component is one type or other I would have to write almost 10 if-then statements. Also changing type to typeof DynamicComponentBase is not an issue, at least in my implementation cause my code allows the dynamic creation of any component, even if it's not extending DynamicComponentBase, but this is out of the scope of my question. I still think my own answer fits better to my question. Thanks anyway for your time! — LeonardoX, Sep 10 '21 at 17:31

LeonardoX · Accepted Answer · 2021-09-08T21:31:29.540

After researching I found a solution checking prototype which in fact resolves my problem of having several components (DynamicInputComponent, DynamicDatePickerComponent) inheriting from one base component (DynamicComponentBase), so I don't have to check if component type is one or other child class type, just using Object.getPrototypeOf:

if (Object.getPrototypeOf(config.component) === DynamicComponentBase) {
    // returns true!! :)
}

if (config.component.prototype === DynamicComponentBase) {
    // returns false
}

The only doubt I have is why the second expression is returning false

type check in TypeScript (with inheritance)

2 Answers2