Question

你好，其他的Typescripters！

这就是我想要做的事情：我想创建一个界面 - 让我们说 IShape - 并拥有一堆类（ Rectangle < / em>， Circle ， Triangle ）实现 IShape 。

我们假设 IShape 有一个名为 GetName 的方法，它返回一个由形状名称组成的字符串。为了便于讨论，我们假设每个实现 GetName 的类都返回一个硬编码的字符串（例如：＆＃34; Rectangle＆＃34;，＆＃34; Round thing＆＃ 34;，＆＃34; Pointy thing＆＃34;）。我们还假装 IShape 也实现了 Draw 方法。

在运行时，我希望能够列出并初始化实现 IShape 的所有类，以便我可以显示＆＃34;形状＆＃34;的下拉列表。用户可以选择。当用户选择形状类型时，系统会调用该形状的 Draw 方法。

但这里是踢球者：后来，我希望能够创建一个实现 IShape 的新类（让我们说 Square ，和椭圆形）。下一个类型我运行代码，我希望新类出现在我的下拉列表中，而不必更改（太多）代码的其余部分。

如何在打字稿中做到这一点？

我的目标是创建一些东西，允许其他团队成员通过添加新的＆＃34;形状来扩展我的代码。实现我的界面，而不必有一个硬编码的形状列表接受。

提前感谢您的帮助。

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我只是利用导出的形状来获取我的ShapeList。

从'./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”数组，而是我们正在有机地利用我们的结构我们的形状。

现在添加新形状与添加形状相同，否则将是：

写出形状类代码
确保正确导出

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

1 个答案: