在 class 上以私有方式属性存储通用对象

Question

我正在编写一个 Angular 2 应用程序，并且有一个组件可以动态地将其他组件呈现到视图，如 https://blog.thecodecampus.de/angular-2-dynamically-render-components/

中所述

该过程运行良好，但与其创建组件并立即从构造函数中销毁它，我宁愿将该逻辑放在 class 中的另一个函数中，该函数确切地确定预期哪个组件是根据输入写入页面。存在切换显示哪些子组件的功能，因此我需要能够存储已解析的组件对象，以便稍后我可以对其调用 destroy() ，这导致我们手头的问题。

我想将此对象存储在 class 上的私有属性中，但我不知道如何键入它。以下是 .d.ts 文件必须描述最初实例化对象的 createComponent 函数的内容：

abstract createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][]): ComponentRef<C>;

现在一切都很好，但是它有一个通用类型的 C，当我传入需要解析的组件时解析它，但我想将其指定为我可能传入的任何潜在组件。我不想只将我的属性指定为 'any'，因为这样一来破坏就不会生效，例如

private _visibleElement: any;

现在，确定我可以类型保护数组并说它可以是 AppleComponent 类型 |香蕉组件 | CherryComponent 等，但我希望它更灵活，而不是每次修改它时都必须维护这些守卫，例如

private _visibleElement: ComponentRef<AppleComponent|BananaComponent|CherryComponent>;

我能想到的唯一其他方法是为这些组件创建一个空接口，让每个组件实现它，然后让它们构成类型，但我只是切换类型的维护避免必须记住将接口应用到我将来添加的每个组件。

这里有没有我可以采用的任何其他方法，允许我指定一个对象是泛型类型，而实际上不必事先指定 class 的泛型类型是什么？

谢谢！

Answer 1

基本接口必须包含一些东西，如果它是空的那么一切都会被接受：

interface MyComponent {}

function create<T extends MyComponent>(comp: T) {}

create(4); // no error
create({ key: "value" }); // no error

(code in playground)

使用这种方法不需要您记住在将来 classes 上应用接口，因为类型安全只会提醒您。
一旦你拥有所有组件的基本接口，然后确保你有 functions/types 依赖它，这样如果你引入一个新组件 class 并且它没有实现 BaseComponent 然后当您尝试使用它时，编译器会抛出错误。
例如你可以有：

type MyRef<T extends BaseComponent> = ComponentRef<T>;

然后到处使用它：

abstract createComponent<C extends BaseComponent>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][]): MyRef<C>;

在 class 上以私有方式属性存储通用对象

Storing generic object in private property on class

typescript

typescript-generics

在 class 上以私有方式 属性 存储通用对象

Storing generic object in private property on class

typescript

typescript-generics

在 class 上以私有方式属性存储通用对象