Extending generic Option with constraints

[VillePakarinenPosti]

Hi,

Posting a question here regarding adding constraints on the generic Option type. I'm in the middle of creating a wrapper component around react-select v5.3.2. I have defined my component like this:

import Select, * as ReactSelect from 'react-select'

// My custom dropdown constraint
export interface DropdownOption extends Record<string, unknown> {
  readonly optionLabel: string;
}

export function Dropdown<
  Option extends DropdownOption, // Declaring that option should extend DropdownOption
  IsMulti extends boolean = false,
  Group extends R.GroupBase<Option> = R.GroupBase<Option>
>(props: R.Props<Option, IsMulti, Group>) {
  return <Select {...props} components={{
    MultiValueContainer: CustomMultiValueContainer,
  }} />;
}

As you can see I've specified Custom MultiValueContainerand that's the part which I'm having the trouble with:

import * as ReactSelect from 'react-select'

function CustomMultiValueContainer<
  Option extends DropdownOption,
  IsMulti extends boolean = false,
  Group extends R.GroupBase<Option> = R.GroupBase<Option>
>(props: R.MultiValueGenericProps<Option, IsMulti,Group>) {

  // The type for selectProps.value is PropsValue<Option> = MultiValue<Option> | SingleValue<Option>;
  if(Array.isArray(props.selectProps.value)) {
    props.selectProps.value.forEach(v => {
      // v is of type any, I would expect it to be {optionLabel: string; [key:string]: unknown}
      v
    })
  }
  // ..... rest of the component
}

So back to my question. Is this the correct pattern for adding constraints to the generic Option type? If so why would the PropsValue<Option> resolve as type any 🤔

Thank you in advance!

[Methuselah96]

You're running into microsoft/TypeScript#17002.