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

Question

我正在将react-select( www.react-select.com ) 与 TypeScript 一起使用，并且在使用optionsprop时遇到了奇怪的错误。考虑这个代码：

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} />;
};

打字稿显示这个：

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} />;
};

但是当我改变联合类型中类型的顺序并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

我已经像这样修改了反应选择，它可以以任何你想要的方式、以任何方式工作。测试一下。当使用设置为 true 的多个道具时，我还实现了一次全选。

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;