javascript - react JS 中的 typescript

Question

我正在使用 react-select-async-paginate:

async function loadOptions(search, loadedOptions, { page }) {
  const response = await fetch(`/awesome-api-url/?search=${search}&page=${page}`);
  const responseJSON = await response.json();

  return {
    options: responseJSON.results,
    hasMore: responseJSON.has_more,
    additional: {
      page: page + 1,
    },
  };
}

<AsyncPaginate
  value={value}
  loadOptions={loadOptions}
  onChange={setValue}
  additional={{
    page: 1,
  }}
/>

如何为此代码应用 typescript :(search, loadedOptions, { page }) 考虑到 these是什么类型？

演示:https://codesandbox.io/s/react-select-async-paginate-forked-qiizl?file=/src/SelectAsyncPaginate.tsx

Answer 1

尽你所能 see loadOptions类型是 LoadOptions<OptionType, Additional> .

这就是您应该输入 loadOptions 的方式功能

const loadOptions: LoadOptions<any, {page: number}> = ...

您应该替换 any使用实际选项的类型(您可以从 API 响应中计算出来)

https://codesandbox.io/s/react-select-async-paginate-forked-00k7m?file=/src/SelectAsyncPaginate.tsx