typescript 错误取决于 react-select 中联合类型中的类型顺序

Question

我正在使用 react-select ( www.react-select.com ) 和 TypeScript，我在使用 options 时遇到奇怪的错误支柱。考虑这个代码:

import * as React from "react";
import Select, {
  GroupedOptionsType,
  OptionsType
} from "react-select";

type OType =
  | GroupedOptionsType<{ label: string; value: string }>
  | OptionsType<{ label: string; value: string }>
  | undefined;

const options = [
  { label: "test1", value: "test1" },
  { label: "test2", value: "test2" }
] as OType;

const CustomSelect = () => {
  return <Select options={options} />;
};

typescript 显示这个:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<{ [x: string]: any; [x: number]: any; defaultInputValue?: string | undefined; defaultMenuIsOpen?: boolean | undefined; defaultValue?: ValueType<GroupType<{ label: string; value: string; }>>; ... 62 more ...; tabSelectsValue?: boolean | undefined; }>): StateManager<...>', gave the following error.
    Type 'OType' is not assignable to type 'OptionsType<GroupType<{ label: string; value: string; }>> | GroupedOptionsType<GroupType<{ label: string; value: string; }>> | undefined'.
      Type 'OptionsType<{ label: string; value: string; }>' is not assignable to type 'OptionsType<GroupType<{ label: string; value: string; }>> | GroupedOptionsType<GroupType<{ label: string; value: string; }>> | undefined'.
        Type 'OptionsType<{ label: string; value: string; }>' is not assignable to type 'OptionsType<GroupType<{ label: string; value: string; }>>'.
          Property 'options' is missing in type '{ label: string; value: string; }' but required in type 'GroupType<{ label: string; value: string; }>'.
  Overload 2 of 2, '(props: { [x: string]: any; [x: number]: any; defaultInputValue?: string | undefined; defaultMenuIsOpen?: boolean | undefined; defaultValue?: ValueType<GroupType<{ label: string; value: string; }>>; ... 62 more ...; tabSelectsValue?: boolean | undefined; }, context?: any): StateManager<...>', gave the following error.
    Type 'OType' is not assignable to type 'OptionsType<GroupType<{ label: string; value: string; }>> | GroupedOptionsType<GroupType<{ label: string; value: string; }>> | undefined'.
      Type 'OptionsType<{ label: string; value: string; }>' is not assignable to type 'OptionsType<GroupType<{ label: string; value: string; }>> | GroupedOptionsType<GroupType<{ label: string; value: string; }>> | undefined'.
        Type 'OptionsType<{ label: string; value: string; }>' is not assignable to type 'OptionsType<GroupType<{ label: string; value: string; }>>'.ts(2769)

但是当我改变联合类型中类型的顺序并放入 OptionsType<> 时首先，完全没问题。

import * as React from "react";
import Select, {
  GroupedOptionsType,
  OptionsType
} from "react-select";

type OType =
  | OptionsType<{ label: string; value: string }>
  | GroupedOptionsType<{ label: string; value: string }>
  | undefined;

const options = [
  { label: "test1", value: "test1" },
  { label: "test2", value: "test2" }
] as OType;

const CustomSelect = () => {
  return <Select options={options} />;
};

联合类型中的 AFAIK 类型顺序无关紧要，但我怀疑在发生类型解析时使用泛型可能很重要，但我不知道。奇怪的是，我也这样做了(与上面相同，但这里我直接从 options 中取出 SelectProps )，它也失败了:

import * as React from "react";
import Select, {
  Props as SelectProps,
} from "react-select";

type OType = Pick<SelectProps<{label: string; value: string}>, 'options'>

const options = [
  { label: "test1", value: "test1" },
  { label: "test2", value: "test2" }
] as OType;

const CustomSelect = () => {
  return <Select options={options} />;
};

Answer 1

我已经像这样修改了 react-select 并且它可以以任何你想要的方式工作，以任何方式。测试一下。
当使用多个设置为 true 的 Prop 时，我还实现了 Select All at once 。

import clsx from 'clsx';
import React, { ComponentProps, FC, useState } from 'react';
import ReactSelect from 'react-select';

type Option = string | number;
type Options = { [key in Option]: any };

export interface SelectProps extends ComponentProps<typeof ReactSelect> {
  allowSelectAll?: boolean;
  allOption?: { value: string; label: string };
  options?: Options[];
  onChange?: (Options) => void;
}

const Select: FC<SelectProps> = function ({
  className,
  options,
  onChange,
  allowSelectAll,
  ...props
}) {

  const [allOption, setallOption] = useState({ value: "*", label: "Select All" });

  if (allowSelectAll) {
    return (
      <ReactSelect
        {...props}
        classNamePrefix="custom-select"
        className={clsx("custom-select", className)}
        options={[allOption, ...options]}
        onChange={selected => {
          if (
            selected !== null &&
            selected.length > 0 &&
            selected[selected.length - 1].value === allOption.value
          ) {
            setallOption({ value: "", label: "All Selected" });
            return onChange(options);
          }
          setallOption({ value: "", label: "Select All" });
          return onChange(selected);
        }}
      />

    );
  }

  return (
    <ReactSelect
      {...props}
      options={options}
      onChange={onChange}
      classNamePrefix="custom-select"
      className={clsx("custom-select", className)}
    />
  );


};

export default Select;