TLDR: 无法弄清楚如何解决问题,其中一个最小的例子是reproduced on Try Flow . 请帮忙 .
Longer version
我有两个属性,我在React对象中传递 . 它们的组合使它们分为三种不同的类型:
type BookResource = {|
objectType: 'book',
object: Book
|};
type AudiobookResource = {|
objectType: 'audiobook',
object: Audiobook
|};
type ComicbookResource = {|
objectType: 'comicbook',
object: Comicbook
|};
哪里
type Book = {
foo: string
}
type Audiobook = {
bar: string
}
type Comicbook = {
baz: string
}
所以我将它们组合成一个联合类型,并将结果与组件的其余部分相交:
type Resource = BookResource | AudiobookResource | ComicbookResource;
type Props = {
text: string,
} & Resource;
然后,我希望组件以特定方式运行,具体取决于使用props实际传递的union的哪个成员:
class TestComponent extends Component<Props> {
render() {
return null;
}
doMagic() {
let { objectType, object } = this.props;
if (objectType === 'book') {
iWantBook(object)
}
}
}
function iWantBook(book: Book) {
console.log(book.foo)
}
麻烦的是,Flow没有看到如果 objectType
prop具有特定类型,则意味着 object
prop也是特定类型 . 它试图检查联盟所有成员的属性,并给我错误 .
我不确定它是否是一个真正的Flow bug或是否可以使用类型声明来使Flow区分联合的成员 .
1 回答
试试this
您需要在此处使用type spread而不是交叉点类型 .
您无法使用解构,请参阅issue