流类型：可扩展的React Component道具类型

Question

Let say there exist the SelectOption component, which props looks like:

type OptionType = {
 +id: string,
 +label: string,
}

type Props = {|
  +options: OptionType[],
  +onItemPress: OptionType => void
|}

Intentionally I wrote the OptionType type as a not exact because I expect that I will need to extend this type, but I expected that id and label are always required.

But this doesn't work as I expected.

type CustomOptionType = {
  +id: string,
  +label: string,
  +locationId: string,
}

const customOption = [
 {
 id: 'id',
 label: "label",
 locationId: 'ID-location'
 }
]


class PlacePicker extends React.Component<{}> {

  handleItemClick = (option: CustomOptionType) => {
    // 
  }

  render() {

    const mockedCustomOption = [
     {
       id: 'id',
       label: "label",
       locationId: 'ID-location'
     }
    ]

    return(
      <Select options={mockedCustomOption} onPressItem={this.handleItemClick} />
      // Cannot create `Select` element because property `locationId` is missing in `CustomOptionType` [1] but exists in `OptionType` [2] in the first argument of property `onPressItem`.
      )
    }
}

With this approach I have this error:

Cannot create Select element because property locationId is missing in CustomOptionType [1] but exists in OptionType [2] in the first argument of property onPressItem .

How should I wrote props that have some required fields(id, label), but with possibility extend the OptionType?

Answer 1

I changed the OptionType to Interface which solved my issue. https://flow.org/en/docs/types/interfaces/