[V2] [Typescript] ValueType<Option> is not exported.

The problem

I’m using React-Select v2 in typescript and the onChange event handler has a first parameter with a the type ValueType<T> which is declared like this in the typings:

export type ValueType<OptionType> = OptionType | OptionsType<OptionType> | null | undefined;

The problem is that, because of that I can’t declare my event handler as:

private handleChange = (selected: MyOption) => {
  /** Code **/
}

Instead I have to declare it like this:

private handleChange = (selected?: MyOption | MyOption[] | null) => {
  /** Code **/
}

I can also declare ValueType in my project, but that’s a bit too much.

Possible solution:

Maybe there are better ways but one of the solutions, which would still be a bit awkward, would be to export the ValueType type so we can at least use that and not declare the value type in that manner.

[plotka]

I had the same issue when using a select that allows single-select only. I was getting the same error as @bradchristensen.

I solved this by defining a type and doing a type assertion before using the selected option.

import { ValueType } from "react-select/lib/types";

type OptionType = { label: string; value: number };

<Select
  onChange={(selectedOption: ValueType<OptionType>) => {
    const value = (selectedOption as OptionType).value;
    ...
  }}
  ...
/>

[bradchristensen]

Hit this issue too and found this thread in my search for answers. The suggestions above didn’t resolve the issue for me, but I think helped point me in the right direction!

I was super confused about this for a while and then I realised it’s pretty easy to solve with a type check before you attempt to use the selectedOption. If you explicitly check whether selectedOption is an array, TypeScript then understands that it is not possible for the value to be an array from that point forward and allows you to use it like you expect to.

<Select
  onChange={selectedOption => {
    if (Array.isArray(selectedOption)) {
      throw new Error("Unexpected type passed to ReactSelect onChange handler");
    }

    doSomethingWithSelectedValue(selectedOption.value);
  }}
  ...
/>

For reference, below is the error I was getting, which goes away when the Array.isArray check is uncommented: