semantic ui typescript correct return type function for dropdown options

Question

通过互联网筛选后，我得出的结论是我应该问一下。

我在 React with TypeScript 中有一个语义-UI 表单（严格）。

我正在尝试提供从我的其余 api 到表单中的下拉列表 (select) 的选项（修剪了不必要的代码）：

表格[.tsx]:

<Form.Select options={()=>{getOptions()}} />

还有我的 getOptions 函数：

//I put the DropdownItemProps[] type because I thought it would solve my issue
const getOptions = ():DropdownItemProps[] => {
    let options = new Array<DropdownItemProps>();
    //... restful request
    return (options)
}

TypeScript 对我尖叫：

Type '() => void' is missing the following properties from type 'DropdownItemProps[]': pop, push, concat, join, and 27 more.ts(2740).
FormSelect.d.ts(24, 3): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & FormSelectProps & { children?: ReactNode; }'

我不确定为什么 ts 将我的函数检测为 '()=>void'（当我悬停该函数时，它清楚地将其检测为 () => DropdownItemProps[]）。老实说，我什至不确定 DropdownItemProps[] 是我需要从 getOptions() 函数中 return 的正确类型。

编辑： 只是为了清楚起见，如果我将调用更改为 options={()=>getOptions()}、options={getOptions} 或类似的任何内容，我会得到相同的结果，但相反'()=>void' 它承认 return 值为 '()=>DropdownItemProps[]'。

我基本上找遍了所有我能想到的地方，但是 Semantic-UI 的文档在 TypeScript 上没有任何内容（这有点烦人）。

如有任何帮助，我们将不胜感激。

Answer 1

这是一个工作示例似乎您的 getOptions 函数没有返回对象数组

import React, { FC } from "react";
import { Form } from "semantic-ui-react";

const getOptions = ():DropdownItemProps[]=> {return [{'keyA': 'label A'}, {'keyB': 'label B'}]}


const Test=()=>{
    
    return (

        <Form>
            <Form.Select options={getOptions()} />
            </Form>

    )
}

export {Test}

semantic ui typescript correct return type function for dropdown options

semantic ui typescript correct return type function for dropdown options

reactjs

typescript

semantic-ui