reactjs - 是否可以为事件处理程序推断useCallback的类型签名？

Question

我将React与TypeScript一起使用，并且将arrow函数用作Material UI <Select> component的回调:

import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';

interface Props {
  value: string;
  onSelect: (value: string) => void;
}

function MySelector(props: Props) {
  return (
    <Select
      value={props.value}
      onChange={e => props.onSelect(e.value as string)}
    >
      <MenuItem value="a">A</MenuItem>
      <MenuItem value="b">B</MenuItem>
      <MenuItem value="c">C</MenuItem>
    </Select>
  )
}

为了避免每次MySelector渲染时都传递新函数，我想使用 useCallback hook。尽管直接重构在运行时有效，但由于事件参数any上存在隐式e错误，它无法进行类型检查:

function MySelector(props: Props) {
  const handleChange = React.useCallback(
    e => props.onSelect(e.value as string),
 // ~ e implicitly has an any type
    [props.onSelect]
  );
  return (
    <Select
      value={props.value}
      onChange={handleChange}
    >
      { /* ... menu items ... */ }
    </Select>
  )
}

将鼠标悬停在原始的e符号上，其类型显示为

React.ChangeEvent<{
    name?: string | undefined;
    value: unknown;
}>

这很麻烦，但是要修复错误，这就是我要输入的内容:

const handleChange = React.useCallback(
  (
    e: React.ChangeEvent<{
      name?: string | undefined;
      value: unknown;
    }>,
  ) => props.onSelect(e.value as string),
  [props.onSelect],
);

我也可以吃蛋糕吗？我可以使用useCallback Hook ，仍然从上下文中获取事件参数的类型吗？

Answer 1

如果您仅使用事件中的value属性，则应该可以摆脱:

const handleChange = React.useCallback(
  (e: React.ChangeEvent<{value: string}>) => props.onSelect(e.value),
  [props.onSelect],
);