流类型：需要一个属性或另一个

Question

我试图在流程中定义一种类型，这样您必须指定客户或发票。这是我的尝试：

type Client = {
  client: {
    id: number,
  },
  invoice?: {
    id: number,
  },
};

type Invoice = { 
  client?: {
    id: number,
  },
  invoice: {
    id: number,
  },
};

type Props = Client | Invoice;

如果 client 未定义，则必须定义 invoice，反之亦然。

但是，当我尝试访问基于此的属性时，流类型检查器抛出错误：

function getAssignedId({client, invoice}: Props) {
  return client ? client.id : invoice.id;
}

结果：

22:   return client ? client.id : invoice.id;
                                          ^ Cannot get `invoice.id` because property `id` is missing in undefined [1].
References:
21: function getAssignedId({client, invoice}: Asssignement) {
                                    ^ [1]

You can try it here.

知道为什么会这样吗？还有另一种方法可以通过流程实现这一目标吗？

Answer 1

您没有检查发票是否已定义。如果你添加检查它不会抛出错误

Answer 2

当你通过以下方式解构类型时：

{client, invoice}: Props

这些变量的类型已解析。 client 和 invoice 都被解析为 ?{ id: number } 因为它们当时可能存在也可能不存在。类型检查器不记得这两个对象是链接的，因为你把它们分开了。

如果不将它们分开，流可以跟踪联合类型并做正确的事情。

function getAssignedId(obj: Props) {
  return obj.client ? obj.client.id : obj.invoice.id;
}

Try flow link

流类型：需要一个属性或另一个

Flow type: either one property is required or the other

javascript

reactjs

flowtype

流类型：需要一个 属性 或另一个

Flow type: either one property is required or the other

javascript

reactjs

flowtype

流类型：需要一个属性或另一个