如何为react-select-async-paginate的loadOptions添加TypeScript类型

前置类型定义 #

首先根据自身业务接口返回结构，提前定义两个核心类型：

• 下拉选项对应的接口返回类型（CustomOption）
• 分页逻辑用到的自定义附加参数类型（AdditionalParams）
  代码示例：

// 下拉选项类型，可根据实际接口返回字段扩展
type CustomOption = {
  value: string | number;
  label: string;
}

// 分页附加参数类型，这里存储当前加载的页码
type AdditionalParams = {
  page: number;
}

引入官方内置的工具类型 #

该组件库本身导出了专门适配loadOptions函数签名的泛型类型LoadOptions，不需要手动逐参数定义原生类型，直接从包中引入即可：

import { AsyncPaginate, LoadOptions } from 'react-select-async-paginate';

为loadOptions添加完整类型标注 #

使用LoadOptions泛型传入之前定义的两个业务类型，即可自动推导出函数三个入参、返回值的全量类型：

const loadOptions: LoadOptions<CustomOption, AdditionalParams> = async (
  // 第一个入参：输入框的搜索关键字，自动推导为string类型
  search,
  // 第二个入参：已经加载完成的选项列表，自动推导为CustomOption数组
  loadedOptions,
  // 第三个入参：自定义附加参数，自动推导为AdditionalParams类型，可直接解构page字段
  { page }
) => {
  const response = await fetch(`/awesome-api-url/?search=${search}&page=${page}`);
  const responseJSON = await response.json();

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

配套组件的类型对齐 #

使用泛型指定AsyncPaginate的类型，让组件的value、onChange、additional等属性的类型和自定义的类型保持统一：

// 状态定义的类型和CustomOption匹配，单选可设为CustomOption | null，多选可设为CustomOption[]
const [value, setValue] = useState<CustomOption | null>(null);

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

类型校验说明 #

• 所有参数、返回值的结构不符合定义时，TypeScript会直接抛出明确的类型错误提示
• 不需要手动硬编码每个参数的原始类型（比如给search标string、给loadedOptions标数组类型），避免手写类型和组件库官方定义脱节的问题
• 解构出的page字段会自动校验为number类型，不会出现undefined或者其他非法类型的传值问题
• 若组件开启多选模式，只需将对应state的类型调整为CustomOption[]，组件泛型会自动适配onChange方法的入参类型

内容的提问来源于stack exchange，提问作者Asking