reactjs - typescript 语法

Question

我是 TypeScript 的新手，并且在我公司的一个大量使用它的存储库中工作。 (我们正在构建一个 React/Redux 应用程序。)我熟悉 TypeScript 泛型的基本概念，但语法的某个特定部分令人困惑。这是相关代码的示例(它在 reducer 中):

interface EntityState<Entity> {
  entity?: Entity;
  status: ApiStatus; // enum
}

interface FieldSummary {
    dataType?: string;
    // other properties...
}

function singleField(state: EntityState<FieldSummary> = defaultEntityState, 
  action: ActionTypes) {...}

谁能解释一下EntityState<FieldSummary>是在做？如果需要更多详细信息，请告诉我。

Answer 1

这是泛型类型参数的一个例子。

interface EntityState<Entity> {
  entity?: Entity;
  status: ApiStatus;
}

接口(interface)将包含一个可选的 entity? 类型，稍后定义。目前，它被称为 Entity。

当你使用这个接口(interface)时，你提供了类型，因此:

const stringEntity: EntityState<string>;

stringEntity.entity 属性将是 string 或 undefined(假设它是可选的)。

const numEntity: EntityState<number>;

属性 numEntity.entity 将是一个 number 或 undefined。

等等。您在使用接口(interface)时提供的类型参数可以是满足任何约束的任何类型 - 在您的情况下，类型参数是不受约束的。这意味着您可以重用接口(interface)，因为类型是稍后定义的。