在 Flow 中传递通用参数对象答案

【问题标题】：Pass Generic Arguments objects in Flow在 Flow 中传递通用参数对象
【发布时间】：2019-08-20 12:20:44
【问题描述】：

我可以将类型作为通用参数传递，但是当我使用包含类型参数的对象时，Flow 无法理解并且不会建议类型。相反，我得到一个错误。

export type TAction<T, R> = { +type: string, payload?: T, meta?: R };

function thisWorks(action: TAction<string, boolean>) {
  const {
    payload,
    meta,
  } = action;
  // Flow knows payload is string and meta a boolean
}

function doesntWork(action: TAction<{ prop1: string, prop2: string }, boolean>) {
      const {
        payload: { prop1, prop2 },
        meta,
      } = action;
        // Flow doesn't know the type of prop1, prop2 or meta
    }

流错误是：

TAction [1].Flow(InferError) 中缺少属性 prop1

【问题讨论】：

标签： javascript ecmascript-6 flowtype

【解决方案1】：

我已经创建了流程尝试说明上述问题：Try it here

从中我可以看出，问题在于TAction 中的元数据和有效负载都被注释为optional properties。这就是为什么在解构有效载荷之前需要检查它不是undefined。如下代码不会出现流错误：

export type TAction<T, R> = { +type: string, payload?: T, meta?: R };

function thisWorks(action: TAction<string, boolean>) {
  const {
    payload,
    meta,
  } = action;
  // Flow knows payload is string and meta a boolean
}

function doesntWork(action: TAction<{| prop1: string, prop2: string |}, boolean>
    ) {
      const {
        payload,
        meta,
      } = action;

      if (payload) {
        const  { prop1, prop2 } = payload;
        // Do whatever is needed
      }
    }

Try with flow

或者可以更改TAction 的注释，因此payload 和meta 将不再是可选属性，如下所示：

export type TAction<T, R> = { +type: string, payload: T, meta: R };

function thisWorks(action: TAction<string, boolean>) {
  const {
    payload,
    meta,
  } = action;
  // Flow knows payload is string and meta a boolean
}

function doesntWork(action: TAction<{| prop1: string, prop2: string |}, boolean>
    ) {
      const {
        payload: { prop1, prop2 },
        meta,
      } = action;

        // Flow doesn't know the type of prop1, prop2 or meta
    }

Try with flow

【讨论】：