Typescript (React) function declaration correct but paramters show "any" type

Question

I built a Select component in react that is fully typed and I now added a multiple prop to it, that will change the typing of the value and the onChange callback to be of type Array<T> What the multiple prop does is it uses what I believe is called a Distributive Conditional to determine the type of both value and onChange of the Component's props like this:

interface SelectBaseProps<T extends SelectValue = string> {
  options: SelectOption<T>[];
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  searchable?: boolean;
}

export type SelectProps<T extends SelectValue, TMultiple extends boolean = false> = SelectBaseProps<T> &
  (TMultiple extends false
    ? {
        multiple?: TMultiple;
        value: T;
        onChange: (value: T) => void;
      }
    : {
        multiple?: TMultiple;
        value: T[];
        onChange: (value: T[]) => void;
      });

Where SelectValue just limits the values to be of type string or number for now. I know, not the prettiest implementation but this is already after some iterations of debugging. And then the select component itself is basically just

export default function Select<T extends SelectValue, TMultiple extends boolean = false>(...) {...}

Now, on first sight this seems to work just fine! If I use this in a test component like this:

function SelectTest() {
  const [val, setVal] = useState<string>();
  const options: SelectOption<string>[] = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];

  return <>
      <Select value={val} options={options} onChange={(x) => console.log(x)} />
      {/* However, this works! */}
      <Select value={val} options={options} onChange={setVal} />
    </>;
}

and hover over the onChange prop, it clearly says that the prop of the onChange callback is of type string. If I change the code and make value be an array, the onChange value is also of type array. But for some reason, the type is not infered in the function passed into the callback and typescript complains that Parameter 'x' implicitly has an 'any' type.

So my question: Why is typescript not able to infer the type here, even though the function is typed correctly and can infer the type even for custom string types?

It could be related to my tsconfig configuration, so I added it in the reproduction stackblitz:

https://stackblitz.com/edit/react-ts-wuj3yu?file=Select.tsx,tsconfig.json

By the way, the issue also disappears when I explicitly set multiple={false}. So it must be the conditional preventing the type from being inferred? — Janis Jansen
– Janis Jansen, Commented Jul 8, 2022 at 9:33

standbyoneself · Accepted Answer · 2022-07-08 12:06:05Z

1

Take a look: https://stackblitz.com/edit/react-ts-agwgkq?file=Select.tsx,App.tsx

I have to refuse of defining so many types/props:

import React, { useState } from 'react';

export type SelectValue = string | number | Array<string> | Array<number>;

type Unwrap<T> = T extends Array<infer R> ? R : T;

export interface SelectOption<T extends SelectValue> {
  label: string;
  value: Unwrap<T>;
}

interface SelectProps<T extends SelectValue> {
  options: SelectOption<T>[];
  value: T;
  onChange: (value: T) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  searchable?: boolean;
}

export function Select<T extends SelectValue>(props: SelectProps<T>) {
  return <div>Dummy Select</div>;
}

...

import * as React from 'react';
import { Select } from './Select';
import './style.css';

export default function App() {
  const [val, setVal] = React.useState<string>('');
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
  const [multipleVal, setMultipleVal] = React.useState<Array<string>>([]);

  return (
    <React.Fragment>
      <Select value={val} options={options} onChange={(x) => console.log(x)} /> // x is string
      {/* However, this works! */}
      <Select
        value={multipleVal}
        options={options}
        onChange={(x) => console.log(x)} // x is Array<string>
      />
    </React.Fragment>
  );
}

answered Jul 8, 2022 at 12:06

standbyoneself

1588 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Janis Jansen Over a year ago

Wow, sometimes the easiest option is the most simple one! I do have some problems with infering the SelectOption value type with the Unwrap type because for some reason things like Array.prototype.includes complain that the type is not narrow enough, but this is a great solution! Thank you!

Collectives™ on Stack Overflow

Typescript (React) function declaration correct but paramters show "any" type

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related