类构造函数和接口答案

【问题标题】：Class constructor and interfaces类构造函数和接口
【发布时间】：2017-04-14 22:54:13
【问题描述】：

如何正确键入实现接口的类？

示例代码：

interface IPlugin{
  name:string;
}

class SomePlugin implements IPlugin{
  name;
  constructor(){
    this.name = 'Sam';
  }
}

const arrayOfClass:IPlugin = [SomePlugin];
// Ther error :
/*
Type 'typeof SomePlugin[]' is not assignable to type 'IPlugin'.
  Property 'name' is missing in type 'typeof SomePlugin[]'.
*/

我该怎么办？

【问题讨论】：

香蕉是水果，但一盒香蕉不是水果。同样的事情：SomePlugin 是 IPlugin，但 SomePlugin 数组不是 IPlugin。因此，这段代码没有多大意义，但如果不知道您实际想要实现的目标，就很难给出建议。
其实比这还要糟糕。您没有香蕉弓，而是一个包含用于种植香蕉的配方的盒子，即包含 SomePlugin 类型的数组。
尝试创建一个实现 IPlugin 的类构造函数数组

标签： class typescript interface

【解决方案1】：

创建一个描述对象的接口，该接口将实例化实现IPlugin 的对象。您可以通过使用新签名来做到这一点：

interface IPluginConstructor {
    new(...args: any[]): IPlugin;
}

现在键入arrayOfClass 作为IPluginConstructors 的数组：

const arrayOfClass: IPluginConstructor[] = [SomePlugin];

注意类型中的[]。问题中没有。

旁注

如果仔细观察，name 的类型是 any in SomePlugin... 它被设置为 any 因为类型被隐式键入为 any 和 string 可分配给 @ 987654333@。这意味着以下代码可以编译：

const s = new SomePlugin();
const num: number = s.name; // this compiles... sad! :(

你应该明确地输入...

class SomePlugin implements IPlugin {
  name: string;
  constructor() {
    this.name = 'Sam';
  }
}

...或隐含...

class SomePlugin implements IPlugin {
  name = 'Sam';
}

我建议您启用 noImplicitAny 编译器标志以帮助在将来发现此类错误。

【讨论】：