Generic type 'ControlProps' requires 2 type argument(s). TS2314

Are you reporting a bug or runtime error?

Yes, but in TypeScript.

Description

I can’t figure out what in the react-select changelog caused this but upgrading to react-select@3.1.1 has broken my Chromatic deployments so I’m assuming the type of something changed.

Here’s the error: Generic type 'ControlProps' requires 2 type argument(s). TS2314

And the code that caused it:

export const controlStyles = (base: CSSProperties, state: ControlProps<{}>) => ({
  ...base,
  height: "3.2rem"
})

This error is actually originating from a lot of types I’ve used from @types/react-select including NoticeProps, OptionProps, ValueType, etc. I’m assuming it’s because of the upgrade because with react-select@3.1.0, everything worked smoothly.

Feel free to look at the logs of the errors for more details or the source.

[prescottbreeden]

Running into the same issue as well but with ValueType, been using this package for over a year on a client’s project and it broke all of our pipelines. In the future you guys should make type changes like that a major version upgrade not a minor so it doesn’t break builds.

[Methuselah96]

@cseas

What is IsMulti

The IsMulti generic makes it so that we can correctly narrow ValueType in various scenarios. Previously ValueType looked like this:

type ValueType<OptionType extends OptionTypeBase> = OptionType | OptionType[] | null | undefined;

Now it looks like this:

type ValueType<OptionType extends OptionTypeBase, IsMulti extends boolean> =  (IsMulti extends true ? OptionType[] : OptionType) | null | undefined;

What does this mean? It means that if we’re dealing with a single-select component (IsMulti is false) then we know that ValueType will not be an array. But if we know that we’re dealing with a multi-select component (IsMulti is true) then we know that ValueType will be an array.

A practical example (see this CodeSandbox for the full code) where this makes a difference is the callback function passed into the onChange prop which provides an argument of type ValueType<OptionType> as it’s first parameter. Previously code like this would result in a type error:

export default class App extends React.Component {
  onChange = (newValue: ValueType<OptionType>) => {
    if (newValue != null) {
      // TS error: "Property 'label' does not exist on type 'OptionType | OptionType[]'."
      // To fix this we would have to cast `newValue` to `OptionType`.
      console.log(newValue.label);
    }
  };

  render() {
    return <Select options={colourOptions} onChange={this.onChange} />;
  }
}

However we know that it’s not an array because this isn’t a multi-select component and we shouldn’t have to cast. Therefore we can now set the second generic parameter to false to specify that this is not a multi-select component and now it compiles correctly:

  onChange = (newValue: ValueType<OptionType, false>) => {

why is it not a part of Props from react-select

It is part of the Props type, it’s just that it defaults to false (and is therefore optional). If you don’t provide it, and you don’t set the isMulti prop to true, it will set it to false and assume you’re dealing with a single-select component.