谁能解释一下下面的代码？

Question

所以我目前正在审查使用 JS 和 Flow-Type 编写的 React-Redux 代码。我在 Flow-Type 方面的经验很少，所以下面的代码让我有点困惑。

首先我有一些针对 redux 部分的操作。

export type allActions = 
|{|
   +type: "FIRST_ACTION_TYPE",
   +formType: FormType,
   +offset: number,
   +size: number
 |}
|{|
   +type: "SECOND_ACTION_TYPE",
|};

所以我的第一个问题是 |{||}| 是什么？这个表达是什么意思？

第二个问题也是针对FormType 部分的。所以在actions上面有FormType的定义。如下图所示

type FormProps = {
   prop_1?: string,
   prop_2?: number,
   prop_3: number
};

type FormType = RecordOf<FormProps>;

谁能解释一下上面的代码在做什么？

Answer 1

allActions 是一个联合类型，用于键入 Redux Dispatch。如果您调度无效操作，这允许流引发错误。

|{|
   +type: "FIRST_ACTION_TYPE",
   +formType: FormType,
   +offset: number,
   +size: number
 |}
|{|
   +type: "SECOND_ACTION_TYPE",
|};

第一个 | 有点令人困惑，但它只是一个可选字符，通常由多行联合上的 lints 添加。它可以被删除并且不会导致错误。

https://flow.org/en/docs/types/unions/

{|...|} 定义一个不能包含任何附加属性的精确对象。它们之间的| 定义了联合。

https://flow.org/en/docs/types/objects/#toc-exact-object-types

前面的+ 符号将每个属性标记为只读。

表单数据中每个属性后面的? 符号将每个属性标记为可选。

recordOf 是泛型类型。我认为它可能是自定义的，也可能是流的旧版本。

https://flow.org/en/docs/types/generics/#toc-parameterized-generics