MaterialUI TabList onChange报错：handleChange类型不兼容，调用是否有误？

我用Material UI实现TabList组件，编写了如下处理函数：

const handleChange = (event, newValue) => {
    setValue(newValue);
}

并在TabList中调用该函数：

<TabList aria-label={"toggle product"} onChange={handleChange} textColor={colors.grey[100]}>
     <Tab label={"REVENUE"} value={"revenue"}/>
     <Tab label={"EPS"} value={"eps"} />
</TabList>

但我的IDE（WebStorm）提示如下类型错误：

Type handleChange is not assignable to type {(event: React.SyntheticEvent, value: any): void, (event: React.SyntheticEvent, value: any): void, (event: React.SyntheticEvent, value: any): void}

请问是调用方式有误吗？

问题原因与解决办法 #

这不是调用方式的问题，是TypeScript类型校验导致的报错。Material UI的TabList组件对onChange回调的参数类型有明确要求，你的handleChange函数没有指定参数类型，WebStorm的类型检查无法识别它符合组件要求的类型。

解决方法1：手动指定参数类型 #

给函数的event和newValue加上明确的类型标注，newValue的类型要和你Tab组件的value类型一致（这里是字符串）：

import { SyntheticEvent } from 'react';

const handleChange = (event: SyntheticEvent, newValue: string) => {
  setValue(newValue);
};

解决方法2：使用Material UI内置类型 #

Material UI为Tab组件提供了封装好的事件类型TabChangeEvent，直接用它更贴合组件场景：

import { TabChangeEvent } from '@mui/material/Tab';

const handleChange = (event: TabChangeEvent, newValue: string) => {
  setValue(newValue);
};

临时跳过检查（不推荐） #

如果你的项目没用到TypeScript，但WebStorm仍触发类型检查，可以在函数上方加// @ts-ignore临时跳过，但长期来看建议加上类型标注，保证代码的健壮性。

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