关于Flowtype精确联合类型（exact Union Types）及Union工作机制的疑问

Hey there! Let's unpack what's happening with Flow's exact union types and why you're hitting that error when accessing item.rocks.

First, let's recap: Flow's exact object types (marked with {| |}) enforce strict shape matching—they won't allow extra properties that aren't explicitly defined. When you combine these exact types into a union, Flow doubles down on this strictness: it will throw an error if you try to access a property that doesn't exist across all members of the union.

Example Scenario (Matching Your Error) #

Suppose your code looks something like this:

// Exact object types for union members
type Apple = {| type: 'apple', color: string |};
type Banana = {| type: 'banana', length: number |};
// Union of exact types
type Fruit = Apple | Banana;

function handleFruit(item: Fruit) {
  // This line triggers a Flow error!
  console.log(item.rocks);
}

The error happens because rocks isn't defined in either Apple or Banana. Flow can't guarantee that item (which could be either an Apple or Banana) has a rocks property, so it blocks the access to keep your code type-safe.

How to Fix the Error #

You have two main paths to resolve this, depending on your intended logic:

1. Narrow the Type First (If rocks Exists Only in Some Union Members)

If rocks is a property that only belongs to one specific type in your union, use type narrowing to check which type you're working with before accessing the property:

type Apple = {| type: 'apple', color: string |};
type Banana = {| type: 'banana', length: number |};
type RockFruit = {| type: 'rock', rocks: boolean |}; // New type with `rocks`
type Fruit = Apple | Banana | RockFruit;

function handleFruit(item: Fruit) {
  if (item.type === 'rock') {
    // Flow now knows `item` is a RockFruit—safe to access `rocks`!
    console.log(item.rocks);
  } else if (item.type === 'apple') {
    console.log(item.color);
  } else {
    console.log(item.length);
  }
}

2. Add the Property to All Union Members (If rocks Could Exist Everywhere)

If rocks is a property that might be present (or optional) across all types in your union, update each exact type to include it:

type Apple = {| type: 'apple', color: string, rocks?: boolean |}; // Optional property
type Banana = {| type: 'banana', length: number, rocks?: boolean |};
type Fruit = Apple | Banana;

function handleFruit(item: Fruit) {
  // No error now—Flow recognizes `rocks` as an optional property on all Fruit types
  console.log(item.rocks); // Note: Might be undefined, so handle that if needed!
}

Key Takeaway #

Exact union types in Flow are designed to prevent accidental access to properties that aren't guaranteed to exist across all union members. This strictness helps catch bugs early, but it means you need to be explicit about which properties your types support, or narrow the type before accessing niche properties.

内容的提问来源于stack exchange，提问作者Made in Moon