Question

/* @flow */

type BaseProps = {
  commonProp1: number,
  commonProp2: string,
}

type Type1Props = BaseProps & {
  type: 'type1',
  extraProp1: boolean,
}

type Type2Props = BaseProps & {
  type: 'type2',
  extraProp2: number,
}

type Type = Type1Props | Type2Props;

function dealWithType1({ props }: {props: Type1Props}) {
  console.log('common prop 1', props.commonProp1);
  console.log('type1 extra prop', props.extraProp1);
}
function dealWithType2({ props }: {props: Type2Props}) {
  console.log('common prop 1', props.commonProp1);
  console.log('type2 extra prop', props.extraProp2);
}

function branch({ props }: { props: Type }) {
  const a = {
    type1: dealWithType1,
    type2: dealWithType2,
  }[props.type];
  return a({props});
}

above code显示了一个函数（branch），它根据属性type调度其他两个函数中的任何一个。所有函数都接受具有在BaseProps中声明的公共数量的属性的对象，而每个单独的调度函数处理依赖于type的许多额外属性。这些扩展对象被声明为BaseProps加上额外内容的交集。泛型类型被声明为所有可能对象类型的不相交联合。

这是我的问题的简化版本，但它会产生相同的错误。在实际情况中，所有都是React无状态组件，所以基本上是函数，除了它们的首字母大写并且被称为JSX组件：<A props={props} />。我正在展示上面的简化版本，它仍然报告了我在实际JSX版本中遇到的相同错误。

我的猜测是我应该明确声明a及其论点，我试图以几种方式这样做而没有成功。实际代码工作正常，就像我开始尝试Flow之前一样。

感谢。

Answer 1

无意中我找到了解决方案，现在我看到它，这是有道理的。我必须在通用类型type中将BaseProps声明为通用string：

type BaseProps = {
  type: string, // <-- this was missing
  commonProp1: number,
  commonProp2: string,
}

将其声明为字符串与更具体的类型定义不兼容，其中只允许某些字符串值。

调度具有不同签名的函数

1 个答案: