Reactjs 如何混合并集和交点类型流注释？

我一直遇到这样的情况，即我很难从API中键入一些资源。这是一个典型情况的小例子

我有一个

descripableResource

，它可以是

ResourceA

或

ResourceB

类型。这两种类型中的每一种都有一个共同的基础和一些特定的道具，如下所示：

类型基={
版本：string，
名称：string，
年份：数目
};
类型ResourceA=Base&{
mySpecificA:string
};
类型ResourceB=基础和{
mySpecificB:string
};
类型DescriptableResource=ResourceA | ResourceB；

现在，我有一个组件负责接收

descripableResource

并在屏幕上显示其内容

type Props = {
  +resource: DescribableResource
};

function ResourceDescriptor({ resource }: Props) {
  const { version, name, year, mySpecificA, mySpecificB } = resource;

  return (
    <div>
      <div>{version}</div>
      <div>{name}</div>
      <div>{year}</div>
      {mySpecificA && <div>{mySpecificA}</div>}
      {mySpecificB && <div>{mySpecificB}</div>}
    </div>
  );
}

类型道具={
+资源：DescriptableResource
};
函数ResourceDescriptor（{resource}:Props）{
const{version，name，year，mySpecificA，mySpecificB}=resource；
返回(
{version}
{name}
{year}
{mySpecificA&&{mySpecificA}}
{mySpecificB&&{mySpecificB}}
);
}

代码工作正常，但我得到以下流错误：

Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/ResourceDescriptor.js:25:32

All branches are incompatible:
 • Either property mySpecificA is missing in Base [1].
 • Or property mySpecificA is missing in object type [2].

 [1][2] 14│ type ResourceB = Base & {
        15│   mySpecificB: string
        16│ };
          :
        22│ };
        23│
        24│ function ResourceDescriptor({ resource }: Props) {
        25│   const { version, name, year, mySpecificA, mySpecificB } = resource;
        26│
        27│   return (
        28│     <div>


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/ResourceDescriptor.js:25:45

All branches are incompatible:
 • Either property mySpecificB is missing in Base [1].
 • Or property mySpecificB is missing in object type [2].

 [1][2] 10│ type ResourceA = Base & {
        11│   mySpecificA: string
        12│ };
          :
        22│ };
        23│
        24│ function ResourceDescriptor({ resource }: Props) {
        25│   const { version, name, year, mySpecificA, mySpecificB } = resource;
        26│
        27│   return (
        28│     <div>

错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/resourcescriptor.js:25:32
所有分支都不兼容：
•基[1]中缺少属性mySpecificA。
•或对象类型[2]中缺少属性mySpecificA。
[1][2] 14│ 类型ResourceB=基础和{
15│   mySpecificB:string
16│ };
:
22│ };
23│
24│ 函数ResourceDescriptor（{resource}:Props）{
25│   const{version，name，year，mySpecificA，mySpecificB}=resource；
26│
27│   返回(
28│     
错误┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ src/resourcescriptor.js:25:45
所有分支都不兼容：
•基[1]中缺少属性mySpecificB。
•或对象类型[2]中缺少属性mySpecificB。
[1][2] 10│ 类型ResourceA=Base&{
11│   mySpecificA:string
12│ };
:
22│ };
23│
24│ 函数ResourceDescriptor（{resource}:Props）{
25│   const{version，name，year，mySpecificA，mySpecificB}=resource；
26│
27│   返回(
28│     

---

我无法判断我的类型定义是否有错误，或者它是否是一个流错误。欢迎提供帮助。

它不会那样工作，因为它不安全。

Base

类型可以有一个

mySpecificA

属性，因为它不限于这三个属性（请注意

{…}

和

{|…|}

）。要让Flow实际检查，如果

资源

道具具有给定的键，则必须以某种方式区分这两种类型。例如，使用排列而不是交叉来限制可能的属性：

//跳过大多数未更改的部分。
类型基={
版本：string，
名称：string，
年份：数目
};
类型A={
基础
mySpecificA:string
};
类型资源B={
基础
mySpecificB:string
};
函数ResourceDescriptor（{resource}:Props）{
返回(
{/*刚刚好用。*/}
{typeof resource.mySpecificB=='string'&&{resource.mySpecificA}
{/*仅当在所有三种类型中使用精确对象时才起作用。*/}
{resource.mySpecificA&&{resource.mySpecificA}
);
}

现在，如果

descripableResource

类型的对象具有

mySpecificA

属性，那么很明显，这是

ResourceA

类型的对象

---

当将交集与联合（如or）混合时，可能会出现一系列问题。

可以使用

ResourceDescriptor

的示例调用来测试类型：

ResourceDescriptor（{resource:{version:'1.3.0'，name:'cat'，year:1995，mySpecificB:'Japanese Bobtail'}）

。另外，请注意，如果您提取

ResourceDescriptor

的解构对象属性分配，例如

const mySpecificA=resource.mySpecificA；

。哇，我不知道您可以通过这种方式传播流类型。我尝试了许多选项，但从未想到过那个。我不得不这样做ally在文档中忽略了这一部分：