TypeScript 中的类型检查（带继承）

Question

我在尝试检查 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;
}

当我创建一个持有引用类型（不是该类型的实例）的实例时：

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

并传递给负责动态创建我的组件的服务，我需要检查类型，但 instanceof 不起作用：

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

只有当我直接检查它所属的类型时它才有效，但我有几个组件都继承自 DynamicComponentBase:

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

检查 config.component.prototype 我得到 DynamicComponentBase {constructor: ƒ}，但如果我检查 config.component.prototype === DynamicComponentBase 我得到 false

所以我正在寻找一种方法来检查它们是否从我的基本组件继承，知道吗？

Answer 1

经过研究，我找到了一个解决方案检查原型，它实际上解决了我从一个基本组件（DynamicComponentBase）继承多个组件（DynamicInputComponent、DynamicDatePickerComponent）的问题，所以我不必检查组件类型是否是一种或其他子类类型，只需使用 Object.getPrototypeOf：

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

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

我唯一的疑问是为什么第二个表达式返回 false

Answer 2

conf.component 持有typeOf DynamicInputComponent，而不是动态实例。

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

编辑后 // 您的问题是以下行。

组件：类型；

这里你只允许any 类型，所以你必须检查基数是否为DynamicComponentBase，但如果你写它component: typeof DynamicComponentBase;，那么你不必担心，Typescipt 会检查它你。

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