Is it possible to compute type to react component props based on the presence or value of another prop using flow?

I'm trying to compute the type of value based on another. If the type of prop1 is x then the type of prop2 should be y.

For example, in case of an input field,

    <Input
     type="number"
     onChange={(value: number | string) => {}}
    />

if the prop type="number" then typeof value from onChange should be number and string otherwise. I'm basically trying to remove the | condition here.

When I try to call the Input like this:

    <Input
     type="number"
     onChange={(value: number) => {}}
    />

Flow is throwing an error because the value can be either number or string if the | is used. The value will obviously number in the case as the type is "number". Is there a way to make flow understand this will be number in this case?

The Input component looks like:

  type CommonProps = {
   disabled?: boolean,
   autoFocus?: boolean,
   placeholder: string
  };

  type PropsNumber = {
   type: 'number',
   onChange: (number) => void,
  };

  type PropsString = {
   type: 'string' | 'email',
   onChange: (string) => void,
  };

  type Props = CommonProps & (PropsNumber | PropsString);

  class Input extends React.Component<Props, {}> {
   render(){
     return (
        <input
          onChange={this.props.onChange}
          type={this.props.type}
          disabled={this.props.disabled}
          autoFocus={this.props.autoFocus}
        />
      );
    }
  }

Getting the error Could not decide which case to select, since case 1 [1] may work but if it doesn't case 2 [2] looks promising too. wherever this component is called.
Adding playground for the scenario.

The best way to solve this is with a combination of disjoint unions and type spread for the common props:

import React from 'react';

type CommonProps = {|
 	autoFocus?: boolean,
  	placeholder?: string,
|};

type PropsNumber = {
  type: "number",
  onChange: number => void,
  ...CommonProps,
};

type PropsString = {
  type: "string",
  onChange: string => void,
  ...CommonProps,
};

type Props = PropsNumber | PropsString;

class Input extends React.Component<Props> {
  render() {
    if (this.props.type === "number") {
      this.props.onChange(5);
    } else {
      this.props.onChange("foo");
    }
    (this.props.autoFocus: ?boolean);
    // placeholder
    return null;
  }
}

<Input type="number" onChange={(value: number) => {}}/>;

<Input type="string" onChange={(value: string) => {}}/>;

// Expected error 
<Input type="number" onChange={(value: string) => {}}/>;

(playground)

This passes Flow, except for the expected error where the type is specified as number but the callback takes an argument of type string.

Intersection types are not recommended as a way to combine object types. Instead, type spread should be used, and it should be used with exact types.

Note that when you are refining the type of props in order to call onChange, if you do something more complicated than my minimal example here you may run into refinement invalidations. You'll be able to work around these by pulling values out into const bindings.

type script was created exactly to determine the type of value, if it will be conditional it will lose its sense...

In your case the most you can do is condition with choice of two different functions

onChange={
  type === "number" 
    ? (value: number) => {}
    : (value: string) => {}
}