javascript - 具有多个通用参数的通用反应功能组件

Question

我正在尝试使用 react-select 和 typescript 创建一个可重用的选择组件。我使用泛型使组件类型更加先进和灵活。

import React from 'react';
import Select, { OptionsType, ValueType } from 'react-select';

export interface IOption<T> {
    label: string;
    value: T;
}

interface IProps<T, M> {
    options: OptionsType<IOption<T>>;
    // value: IOption<T>[keyof IOption<T>];
    value: IOption<T>;
    defaultValue?: IOption<T>;
    isMulti?: boolean;
    isDisabled?: boolean;
    onChange: (value: M extends true ? Array<IOption<T>> : IOption<T>) => void;
}

const ValidatableSelectFieldImp = <T, M extends boolean>({
    options,
    value,
    isMulti = false,
    onChange,
    ...props
}: IProps<T, M>, ref) => {
    const handleChange = (
        selectedOption: ValueType<IOption<T>, typeof isMulti> | null,
    ) => {
        if (isMulti && selectedOption && Array.isArray(selectedOption)) {
            const clonedOptions = [...selectedOption];
          
            return onChange(clonedOptions);
        }

        onChange((selectedOption));
    };

    return (
        <div>
            <Select
                ref={ref}
                {...props}
                isMulti={isMulti}
                value={value}
                options={options}
                onChange={handleChange}
            />
        </div>
    );
};

export const ValidatableSelectField = React.memo(
    React.forwardRef(ValidatableSelectFieldImp),
) as typeof ValidatableSelectFieldImp;

根据是否将 isMulti传递给Select组件，我们会得到不同形状的onChange参数。

我从内部 onChange 收到此错误。（内部 if 语句）

'any[]' 类型的参数不能分配给 'M extends true 类型的参数？IOption[]：IOption'。

而这个来自外部的 onChange

'IOption | 类型的参数 选项类型<IOption> | null' 不能分配给 'M extends true 类型的参数？IOption[]：IOption'。“null”类型不能分配给“M extends true”类型？IOption[]：IOption'。

我想告诉打字稿推断关于isMulti的 onChange 的正确参数类型，所以如果我将isMulti作为 true 传递，那么它将选项参数的类型设置为 Array<IOption>。由于错误，我无法完成我的组件。任何帮助表示赞赏。

标签： javascriptreactjstypescripttypes