Typescript 类型脚本错误取决于react select中联合类型中的类型顺序

我正在用TypeScript使用

react select

（），使用

options

prop时出现奇怪的错误。考虑这个代码：

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

---

我对react select进行了这样的修改，它可以以任何方式工作。测试一下。 当使用多个道具设置为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;

从“clsx”导入clsx；
从'React'导入React，{ComponentProps，FC，useState}；
从“反应选择”导入反应选择；
类型选项=字符串|编号；
类型选项={[输入选项]：any}；
导出接口SelectProps扩展ComponentProps{
allowSelectAll？：布尔值；
allOption？：{value:string；label:string}；
选项？：选项[]；
onChange？：（选项）=>作废；
}
常数选择：FC=函数({
类名，
选项，
一旦改变，
允许选举，
…道具
}) {
const[allOption，setallOption]=useState（{value:*”，标签：“Select All”}）；
如果（allowSelectAll）{
返回(
{
如果(
已选择！==null&&
选定的长度>0&&
已选择[selected.length-1]。值===allOption.value
) {
setallOption（{值：，标签：“全部选定”}）；
更改后返回（选项）；
}
setallOption（{value:，label:“全选”}）；
更改时返回（选中）；
}}
/>
);
}
返回(
);
};
导出默认选择；

@ford04尝试过，但仍然不起作用。您能在问题中包含您正在使用的TypeScript版本吗？以及为编译启用的所有不同标志。别忘了，编译器版本…你能用stackblitz或codepen（或任何在线编辑器）复制它吗？

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

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;