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

conf.component 持有一个 typeOf DynamicInputComponent，不是 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

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

component: Type;

这里你只允许输入 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");
}

Answer 2

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

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

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

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

TypeScript 中的类型检查（继承）

type check in TypeScript (with inheritance)

inheritance

typescript