javascript - 在 Storybook 道具中扩展 react-select v5 会导致未知类型

Question

我正在寻找扩展打字稿定义，react-select以便我可以将...argsStorybook 中的自定义传递给组件。

选择数据

export interface FishOption {
  readonly value: string;
  readonly label: string;
  readonly isFixed?: boolean;
  readonly isDisabled?: boolean;
}

export const fishOptions: readonly FishOption[] = [
  { value: 'Maguro', label: 'Maguro' },
  { value: 'Unagi', label: 'Unagi' },
  { value: 'Shishamo', label: 'Shishamo' },
  { value: 'Toro', label: 'Toro' },
  { value: 'Iwashi', label: 'Iwashi' }
];

node_modules/react-select/dist/declarations/src/index.d.ts

export type { StateManagerProps as Props } from './useStateManager';

选择.stories.tsx

import { Story, Meta } from '@storybook/react';
import { useState } from 'react';
import Select, { Props } from 'react-select';
import { FishOption, fishOptions } from './Select.data';



export default {
  component: Select,
  title: 'Components/Select',
  argTypes: { onChange: { action: '' } }
} as Meta;




// Extended interface.
interface ExtendedProps extends Props {
  someProp: boolean;
}



// Use extended interface.
const Template: Story<ExtendedProps> = args => {
  const [value, setValue] = useState<FishOption>();

  const handleChange = (newValue: FishOption) => {
    setValue(newValue);
  };

  return <Select defaultValue={value} onChange={handleChange} {...args} />;
};

export const Single = Template.bind({});
Single.args = {
  someProp: true,
  options: fishOptions
};

我的onChange处理程序出现以下打字稿错误：

Type '(newValue: FishOption) => void' is not assignable to type '(newValue: unknown, actionMeta: ActionMeta<unknown>) => void'.
  Types of parameters 'newValue' and 'newValue' are incompatible.
    Type 'unknown' is not assignable to type 'FishOption'.ts(2322)

查看其他属性，其他 prop (defaultValue) 类型也设置unknown为。我不确定我是错误地导入类型还是某种擦除？正在发生。

如何扩展react-selectv5 道具以便我可以在 Storybook 或其他地方使用它们？

---

相关链接：在 typescript 中扩展 react-select 接口属性

CodeSandbox：https ://codesandbox.io/s/interesting-hypatia-2vv6p （没有故事书，但观察 ExtendedSelect 以查看道具unknown）

标签： javascriptreactjstypescriptreact-select