如何为Ant Design Select组件指定onChange的类型（Next.js+TS场景）

问题背景 #

在使用 Next.js、TypeScript 和 Ant Design 开发项目时，给 Select 组件的 onChange 函数指定类型后，仍然出现 value 和 onChange 函数的类型不匹配错误。

原代码示例 #

import React, { useState, useCallback } from 'react';
import { Select } from 'antd';

const Home = () => {
  const [postCount, setPostCount] = useState<number>(10);

  const postCountOptions = [
    {
      value: 5,
      label: 'Count 5',
    },
    {
      value: 10,
      label: 'Count 10',
    },    
  ];

  const onChangeCount = useCallback((value: React.ChangeEvent<HTMLSelectElement>) => {
    setPostCount(value);
  }, []);

  return (
    <>  
     <Select
        defaultValue={10} 
        onChange={onChangeCount} 
        options={postCountOptions} 
      />
    </>
  );
};

export default Home;

报错信息 #

错误1：setState 参数类型不匹配 #

const onChangeCount = useCallback((value: React.ChangeEvent<HTMLSelectElement>) => {
    setPostCount(value); // Error 1.
  }, []);

(parameter) value: React.ChangeEvent<HTMLSelectElement>
Argument of type 'ChangeEvent<HTMLSelectElement>' is not assignable to parameter of type 'SetStateAction<number>'.
  Type 'ChangeEvent<HTMLSelectElement>' is not assignable to type '(prevState: number) => number'.
    Type 'ChangeEvent<HTMLSelectElement>' provides no match for the signature '(prevState: number): number'.ts(2345)

错误2：onChange 函数类型不匹配 #

<Select
        defaultValue={10} 
        onChange={onChangeCount} // Error 2.
        options={postCountOptions} 
      />

(JSX attribute) onChange?: ((value: unknown, option: BaseOptionType | DefaultOptionType | (BaseOptionType | DefaultOptionType)[]) => void) | undefined
Type '(value: React.ChangeEvent<HTMLSelectElement>) => void' is not assignable to type '(value: unknown, option: BaseOptionType | DefaultOptionType | (BaseOptionType | DefaultOptionType)[]) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'unknown' is not assignable to type 'ChangeEvent<HTMLSelectElement>'.ts(2322)
Select.d.ts(99, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & SelectProps<unknown, BaseOptionType | DefaultOptionType> & { children?: ReactNode; } & { ...; } & { ...; }'

解决方案 #

核心问题 #

Ant Design 的 Select 组件 onChange 回调参数不是原生的 React.ChangeEvent<HTMLSelectElement>，而是直接返回选中的 value 值 和对应的 option 对象，你错误地使用了原生 select 事件类型，导致类型不匹配。

修正后的代码 #

import React, { useState, useCallback } from 'react';
import { Select, BaseOptionType } from 'antd';

const Home = () => {
  const [postCount, setPostCount] = useState<number>(10);

  // 给options指定BaseOptionType类型，明确value为number
  const postCountOptions: BaseOptionType[] = [
    {
      value: 5,
      label: 'Count 5',
    },
    {
      value: 10,
      label: 'Count 10',
    },    
  ];

  // onChange第一个参数直接是选中的number类型value
  const onChangeCount = useCallback((value: number) => {
    setPostCount(value);
  }, []);

  // 给Select指定泛型<number>，明确value类型，消除unknown报错
  return (
    <>  
     <Select<number>
        defaultValue={10} 
        onChange={onChangeCount} 
        options={postCountOptions} 
      />
    </>
  );
};

export default Home;

关键修改点 #

1. 调整 onChange 参数类型：将参数类型从 React.ChangeEvent<HTMLSelectElement> 改为 number，匹配 Select 组件返回的实际 value 类型。
2. 给 Select 指定泛型：通过 <Select<number>> 告知组件 value 的类型为 number，解决 onChange 参数显示 unknown 的问题。
3. 为 options 数组指定类型：使用 BaseOptionType[] 定义 options 类型，增强 TypeScript 类型检查能力。

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