Reactjs 如何在Typescript中为React Selectize库实现函数prop?
我目前正在尝试实现库的MultiSelect功能,特别是使用TypescriptReactjs 如何在Typescript中为React Selectize库实现函数prop?,reactjs,typescript,react-redux,Reactjs,Typescript,React Redux,我目前正在尝试实现库的MultiSelect功能,特别是使用Typescript 多选道具的定义如下: export interface MultiSelectProps extends SimpleSelectProps { anchor?: OptionValue; createFromSearch?(items: OptionValue[], search: string): OptionValue; createFromSearch?(options: OptionValue
多选道具的定义如下:
export interface MultiSelectProps extends SimpleSelectProps {
anchor?: OptionValue;
createFromSearch?(items: OptionValue[], search: string): OptionValue;
createFromSearch?(options: OptionValue[], values: OptionValue[], search: string): OptionValue;
defaultValues?: OptionValue[];
...
在我的代码中,我试图使用一个MultiSelect元素,并实现createFromScratch
prop,以便用户可以通过键入一些文本然后单击enter向列表中添加一个新项目。我不确定如何以编译器可以接受的方式编程,因为对于以下代码,我会收到后续错误:
<MultiSelect
placeholder="Select fruits"
options={['apple', 'mango', 'orange', 'banana'].map(
(fruit) => ({ label: fruit, value: fruit }),
)}
createFromSearch={(items: OptionValue[], search: string): OptionValue => {
return { label: search.trim(), value: search.trim() };
}}
/>
其中this.createFromSearch
定义为:
const createFromSearch = {
(_items: OptionValue[], search: string): OptionValue => {
return { value: search.trim(), label: search.trim() };
};
};
这是行不通的,因为不能用Typescript中的对象来包围空函数。命名函数会在MultiSelect中返回错误。看起来像是typescript的限制。由此:
当您在接口中提供多个调用签名时,您尝试分配给该接口的任何内容都必须与所有调用签名匹配
因此,您需要编写一个单独的接口,如下所示:
export interface MultiSelectProps {
createFromSearch?: ICreateFromSearch;
}
type ICreateFromSearch = (items: boolean, search: string) => boolean | ((options: boolean, values: boolean, search: string) => boolean);
这对我来说是正确的。错误消息的其余部分是什么?@loremdipso我为您附上了整个消息的截图。
export interface MultiSelectProps {
createFromSearch?: ICreateFromSearch;
}
type ICreateFromSearch = (items: boolean, search: string) => boolean | ((options: boolean, values: boolean, search: string) => boolean);