Flow无法从联合类型中正确推断类型，求技术解决方案

Hey there! Let’s work through this Flow type issue you’re hitting with your React component props.

First, let’s make sure we’re on the same page with your type definitions (I’ll fill in the missing bits for clarity):

// Base object types
type Book = { foo: string };
type Audiobook = { bar: number };
type Comicbook = { baz: boolean };

// Sealed resource types that pair objectType with its corresponding object
type BookResource = {| objectType: 'book', object: Book |};
type AudiobookResource = {| objectType: 'audiobook', object: Audiobook |};
type ComicbookResource = {| objectType: 'comicbook', object: Comicbook |};

From what I gather, the problem is that when you pass objectType and object as separate props to your React component, Flow can’t correctly infer that these two values are linked—meaning it doesn’t know that an objectType of 'book' should always pair with a Book object, and so on. This leads to type errors even when your props are logically consistent.

Here are two solid solutions to fix this:

1. Use a Union Type for Component Props #

The cleanest approach is to pass your sealed resource types directly as a single prop (or combine them into a union type for your component’s props). This keeps the objectType and object linked, so Flow can properly narrow the type in conditional branches:

// Combine all resource types into a single union
type Resource = BookResource | AudiobookResource | ComicbookResource;

// Component props accept the union type
type ResourceComponentProps = Resource;

const ResourceComponent = (props: ResourceComponentProps) => {
  switch (props.objectType) {
    case 'book':
      // Flow automatically knows props.object is a Book here
      return <div>Book: {props.object.foo}</div>;
    case 'audiobook':
      // Flow knows props.object is an Audiobook here
      return <div>Audiobook: {props.object.bar}</div>;
    case 'comicbook':
      // Flow knows props.object is a Comicbook here
      return <div>Comicbook: {props.object.baz}</div>;
  }
};

2. Use Generics with a Type Map #

If you need to keep objectType and object as separate props, you can use a type map and generics to enforce their relationship:

// Map each objectType to its corresponding object type
type ResourceMap = {
  book: Book,
  audiobook: Audiobook,
  comicbook: Comicbook,
};

// Generic props that link objectType to the correct object type
type ResourceComponentProps<T extends $Keys<ResourceMap>> = {
  objectType: T,
  object: ResourceMap[T],
};

const ResourceComponent = <T extends $Keys<ResourceMap>>(props: ResourceComponentProps<T>) => {
  switch (props.objectType) {
    case 'book':
      // We can use type assertion here since we know the type is safe
      return <div>Book: {(props.object as Book).foo}</div>;
    case 'audiobook':
      return <div>Audiobook: {(props.object as Audiobook).bar}</div>;
    case 'comicbook':
      return <div>Comicbook: {(props.object as Comicbook).baz}</div>;
  }
};

Either of these approaches should resolve the type errors you’re seeing, since they ensure Flow recognizes the strict relationship between objectType and object. Since you’ve already got a minimal example set up, you can drop either solution in there to test it out.

内容的提问来源于stack exchange，提问作者azangru