您可以在实现另一个接口的组件的接口中键入字段吗？

Question

I have created an interface for my components to implement so that each component created for this type have the same fields. I then have another interface which has a field that requires this type of component.

I have created these interfaces and setup the corresponding components and objects yet I still get the following error:

Type 'typeof MyComponent' cannot be assigned to type 'ComponentShouldImplementThis<T>'. Property 'someField' is missing in type 'typeof MyComponent'.

My interfaces:

export interface ComponentShouldImplementThis<T> {
  someField: string;
}

export interface ContainsFieldComponentInterface<T> {
  component: ComponentShouldImplementThis<T>;
}

My Component:

@Component({
 selector: 'mycomponent',
 template: '<div>Hello</div>'
})
export class MyComponent implements ComponentShouldImplementThis<any> {
  someField: string;
  constructor(){}
}

My Object that yells at me:

let implementedInterface: ContainsFieldComponentInterface = {
  component: MyComponent
}

someField satisfies the IDE when implementing ComponentShouldImplementThis but the interface for having a component that implements it, does not like.

Something I got to get angular compiled was doing an instance of the component instead:

let implementedInterface: ContainsFieldComponentInterface = {
  component: new MyComponent
}

But this causes some other issues downstream. Is this the correct implementation? Not sure where I am going wrong.

Answer 1

There is a type in angular/core that represents Component: https://angular.io/api/core/Type

Usage:

export interface ContainsFieldComponentInterface<T> {
  component: Type<ComponentShouldImplementThis<T>>;
}

Why is your type information not working? You probably remember that classes in JS/TS are Functions (or constructor functions) that create objects. You specify the type of the created object in your interface (verifying that the created object will have all the properties of a class). If want to narrow down the possible constructor functions you have to create another type:

type OfSpecificType<T> = {
   new (...args: any[]): T
}

This signature means that calling a function of OfSpecificType type will return the type T .

So your interface will end up looking like:

export interface ContainsFieldComponentInterface<T> {
  component: OfSpecificType<ComponentShouldImplementThis<T>>;
}

but it's the same as using angular/core 's Type<T>