Typescript - React，基于可选道具的条件回调道具类型

Question

I have a react component which accepts an optional prop isSingle (boolean) and a required prop onSelect (callback).

If isSingle prop is used, I need that my callback to have a different signature

type IProps<T> = 
    {
        isSingle?: T;
    } & (
        T extends boolean ?
        { 
            onSelected: (option: string) => void; 
            isSingle: boolean;
        } : 
        { 
            onSelected: (option: string[]) => void; 
            isSingle: boolean;
        }
    );

I just wrote this and it works, but as you see I have to define multiple times isSingle prop, but also the complier assigns to it the following type (T | undefined) & boolean

How to properly implement this?

Answer 1

Instead of a generic type, a discriminated union works better here:

type IProps =
  | {
      isSingle?: false;
      onSelected: (option: string[]) => void;
    }
  | {
      isSingle: true;
      onSelected: (option: string) => void;
    };

You can combine this with additional props as well, like:

type IProps = {
  commonProp: string;
} & (
  | {
      isSingle?: false;
      onSelected: (option: string[]) => void;
    }
  | {
      isSingle: true;
      onSelected: (option: string) => void;
    }
);