Antd Select组件onSelect事件Option参数的TypeScript类型获取方法

公共类型的正确导入路径 #

• 在antd 4.20+、antd 5.x全版本中，OptionData、OptionGroupData已经作为正式公共类型从Select模块导出，无需到node_modules内部文件检索类型定义：

// 从Select模块直接导入对应类型即可
import type { OptionData, OptionGroupData } from 'antd/es/select';

// 替换原有临时any标注的代码
const handleSelect: (
  value: SelectValue,
  option: OptionData | OptionGroupData
) => void = (value, option) => {
  // 业务逻辑
}

零路径查找成本的类型推导方式 #

无需手动记忆类型导出路径，可以直接对齐Select组件原生的类型定义，避免后续版本升级带来的类型失配问题：

• 引入Select组件的Props类型，直接引用其内部定义的onSelect函数类型作为自定义回调的类型，参数会自动完成类型推导：

import type { SelectProps } from 'antd/es/select';

// 完全复用组件自身的onSelect类型定义，不需要手动拆分参数标注
const handleSelect: SelectProps['onSelect'] = (value, option) => {
  // value、option的类型和antd官方定义100%匹配，无类型偏差
}

• 该方案的适配性更强：后续antd版本如果调整了onSelect的参数规则，自定义回调的类型会自动同步更新，不需要手动调整类型导入路径。

自定义业务字段的类型扩展 #

• 当选项对象需要挂载额外的业务字段（比如关联ID、权限标识等）时，可以通过TS交叉类型对基础Option类型做扩展，保留全量的字段类型提示：

import type { OptionData, OptionGroupData, SelectProps } from 'antd/es/select';

// 定义携带业务字段的扩展选项类型
type BusinessOption = OptionData & {
  relateId: number;
  accessiblePerms: string[];
};

const handleSelect = (
  value: SelectProps['value'],
  option: OptionData | OptionGroupData | BusinessOption
) => {
  // 访问option上的自定义字段时，会有完整的类型校验和代码提示，避免拼写错误
  console.log(option.relateId)
}

常见注意事项 #

• 早期antd 4.x的低版本没有将OptionData、OptionGroupData纳入公共导出范围，当时需要从底层rc-select的类型定义中检索，目前所有支持TypeScript的高版本antd都已经将这些类型作为正式API开放，不需要绕过包结构访问内部文件。
• 临时使用any标注option参数的写法，会完全丢失选项字段的类型校验能力，长期维护容易出现无感知的取值错误。

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