使用 TypeScript 反应通用道具

Question

I have a trouble using JSX generic props.

I have the component Dropdown.tsx:

export type DropdownValue = string | number | boolean | Array<unknown>;

export interface DropdownRecord<T extends DropdownValue> {
    label: string;
    value: T;
}

interface DropdownProps<T extends DropdownValue> {
    options: Array<DropdownRecord<T>>;
    initialValue?: T;
    onChange: (value: T) => void;
    minWidth?: number;
}

const Dropdown = <T extends DropdownValue>(props: DropdownProps<T>) => {
    return null;
}

const showByOptions = [
    { label: 'Show by 15', value: 15 },
    { label: 'Show by 30', value: 30 },
];

const [showBy, setShowBy] = useState(15);

<Dropdown options={showByOptions} onChange={setShowBy} />

But while using this component generic seems to not working properly. I gave the error:

Type 'Dispatch<SetStateAction<number>>' is not assignable to type '(value: DropdownValue) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'DropdownValue' is not assignable to type 'SetStateAction<number>'.
      Type 'string' is not assignable to type 'SetStateAction<number>'.ts(2322)
index.tsx(25, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & DropdownProps<DropdownValue>'
(JSX attribute) DropdownProps<DropdownValue>.onChange: (value: DropdownValue) => void

Why the value coming from onChange has type DropdownValue, not number? What am I doing wrong?

VSCode v1.62.2 React v16.4.0 TypeScript v4.2.3

Thanks!

Answer 1

React.memo overrides type of wrapped component, so if you use this you also need to export your component like this:

export memo(Dropdown) as typeof Dropdown