Angular中如何为实现指定接口的传入组件做类型标注

方案1：泛型类实现强类型约束（推荐） #

如果你需要在类A内部调用setData方法且需要保证参数类型安全，直接将类A也定义为泛型，和接口I的泛型参数对齐即可：

// 泛型类A，泛型参数T和接口I的参数对应
class A<T> {
  constructor(public component: I<T>) {}

  // 示例：类A内调用setData时会自动校验参数类型
  passDataToComponent(data: T) {
    this.component.setData(data)
  }
}

// 使用示例
const componentB = new B()
const aInstance = new A<string>(componentB)

这个方案的类型校验最严格，完全不会丢失类型信息，适合绝大多数业务场景。

方案2：不关心泛型参数的轻量约束 #

如果你不需要在类A内部感知I的泛型参数具体类型，只需要限制传入的实例必须实现了I接口，可以直接用I<any>作为类型约束，比any安全得多，至少能保证传入的实例一定存在符合签名的setData方法：

class A {
  constructor(public component: I<any>) {}
}

// 所有实现了I<T>的组件实例都可以传入
const a1 = new A(new B())
const a2 = new A(new C()) // 假设C实现了I<number>

补充：Angular动态组件场景（传入组件类而非实例） #

如果你是在Angular动态创建组件的场景下，需要传入组件类而非实例，可以额外加一层构造函数约束：

// 定义实现了I接口的组件类的类型
type IComponentClass<T = any> = new (...args: any[]) => I<T>

class A {
  constructor(public componentClass: IComponentClass) {}
}

// 使用时直接传组件类即可
const a = new A(B)

内容的提问来源于stack exchange，提问作者OhJohnny