articles.001.010.multiple-props.tsx

// We will start by defining the props that both the single 
// and the multiple versions of our Select have in common
export interface BaseSelectProps<T> {
  items: T[];
  idFromValue: (value: T) => string | number;
  labelFromValue: (value: T) => React.ReactNode;
  itemComponent: React.ComponentType<SelectItemProps<T>>;
}

// We then define props specific for the single version
export interface SingleSelectProps<T> extends BaseSelectProps<T> {
  multiple: false;
  value?: T;
  onChange: (value: T) => void;
}

// And props specific for the multiple version
export interface MultiSelectProps<T> extends BaseSelectProps<T> {
  multiple: true;
  value?: T[];
  onChange: (value: T[]) => void;
}

// Finally we create a type that covers both the single and the multiple version of Select
export type SelectProps<T> = MultiSelectProps<T> | SingleSelectProps<T>;