FlowType：多种类型的通用继承

Question

想象一下，有两种数据类型，它们都有一个id属性：

type Foo = {
  id: string,
  // other props
}

type Bar = {
  id: number,
  // other props
}

现在想象一下React中的Table组件，它接受数据数组作为属性。 该组件必须是通用的，但是我们知道它为数据数组中的每个数据对象都需要一个id属性。 此id可以是数字或字符串。 道具的类型如下：

type Props = {
  data: Array<{id: number | string}>
}

问题是上述表示法不起作用。 有没有一种方法可以“重新键入”某些属性？

我已经研究了泛型类型，但是如果不更改Foo和Bar类型定义，我似乎找不到解决方案。

Answer 1

我觉得Flow有点棘手。 因此，不必声明两个类型都共享一个属性，而是可以将数组声明为包含Foo | Bar type类型Foo | Bar Foo | Bar 。

这很好，因为它的重复次数甚至比原始代码少，并且在if语句的每个分支中，您都可以自由访问Foo或Bar其他唯一属性，而不会出现任何问题。

// @flow

type Foo = {
  id: string,
  // other props
}

type Bar = {
  id: number,
  // other props
}

type Props = {
  data: Array<Foo | Bar>
}

const foo: Foo = { id: 'A' }
const bar: Bar = { id: 1 }
const props: Props = { data: [foo, bar] }

for (const item of props.data) {
  if (typeof item.id === 'string') {
    console.log('I am a Foo')
  } else {
    console.log('I am a Bar')
  }
}

尝试Flow Link