在Typescript中枚举实现某个接口的所有类

Question

大家好，这篇文章涉及IT技术相关内容。以下是需要翻译的文本：

我想做的是：创建一个接口（比如IShape），有一些类（Rectangle、Circle、Triangle）实现了这个接口。

假设IShape有一个方法叫做GetName，返回一个字符串，表示形状的名称。假设每个实现GetName的类返回一个硬编码的字符串（例如："矩形"、"圆形"、"三角形"）。还假设IShape还实现了Draw方法。

在运行时，我想能够列出和初始化实现IShape的所有类，以便我可以显示一个下拉列表，供用户选择“形状”。当用户选择形状类型时，系统调用该形状的Draw方法。

但这里有个绊脚石：后来，我想创建一个新的类来实现IShape，比如Square和Oval。下一次运行代码时，我希望新的类出现在我的下拉列表中，而无需改变（太多）其余的代码。

如何在Typescript中实现这一点？

我的目标是创建一个允许其他团队成员通过添加实现我的接口的新“形状”来扩展我的代码的东西，而不必拥有一个硬编码的形状列表。

感谢您的帮助。

- Hugo Bernier

Answer 1

我将解释如何在我的代码中执行此操作，但需要说明的是，这种方法比较主观，您可能不喜欢。

首先，我使用标准的ES6 import和export。 我会让所有形状都在同一个文件夹中，并与该文件夹中的index.ts文件一起提供导出。 因此，我的结构可能如下所示：

|-- src/
|    |-- shapes/
|    |    |-- index.ts
|    |    |-- IShape.ts
|    |    |-- Rectangle.ts
|    |    |-- Circle.ts
|    |    |-- Triangle.ts
|    |
|    |-- ShapeList.ts

IShape.ts 大致如下：

export interface IShape {
  draw(): void;
}

在Rectangle.ts、Circle.ts和Triangle.ts文件中，我有如下代码：

import { IShape } from './IShape';

export class Circle implements IShape {
  static getName: () => 'Circle';
  draw(): void {
    //...
  }
}

然后在index.ts中，我会这样做：

import { Circle } from './Circle';
import { Rectangle } from './Rectangle';
import { Triangle } from './Triangle';

export default [
  Circle,
  Rectangle,
  Triangle,
];

最后，在ShapeList.ts中，我只需利用导出的形状来获得我的形状列表。

从'./shapes'导入形状。

export class ShapeList {
  getItems() {
    return shapes.map(shape => ({
      label: shape.getName(),
      action: () => new shape(), // Setting up a simple factory method for use when this item is selected in the list
    }));
  }

  // ... Rest of the class
}

就是这样。有人可能会认为这仍然是硬编码，因为为形状定义了一个明确的列表，但我会持不同意见，说我们没有硬编码“ShapesForSpecificReasonList”数组，而是利用了我们如何构建形状的有机优势。

现在添加新形状与添加形状的过程相同：

1. 编写形状类代码
2. 确保它被正确导出

- casieber