React组件中如何为onTransfer返回函数指定合法TypeScript类型？

首先得理清问题核心：你当前的代码逻辑存在关键错误——onTransfer()(props.onTransfer, props.selected)会直接执行内部函数并返回void，但div的onClick属性需要的是一个(event: React.MouseEvent<HTMLDivElement>) => void类型的函数，这才是触发TypeScript错误的根本原因。而用Function类型绕过检查的做法，不仅丢失了类型安全性，还会触发Lint警告，显然不是最优解。

下面提供两种符合规范的实现方式，既能显式标注类型，又能同时满足TypeScript和Lint的要求：

方案1：直接返回点击事件处理函数 #

先明确所需的类型定义（补充你可能已有的OnTransfer类型）：

// 定义OnTransfer回调类型
type OnTransfer = (action: { type: 'select' | 'deselect' }) => void;
// 定义div点击事件处理函数类型
type DivClickHandler = (event: React.MouseEvent<HTMLDivElement>) => void;

调整onTransfer函数，让它接收cb和selected参数后，直接返回符合要求的点击处理函数：

export const onTransfer = (cb: OnTransfer, selected: boolean): DivClickHandler => {
  return (event) => {
    cb({ type: selected ? 'select' : 'deselect' });
  };
};

组件中直接调用onTransfer获取处理函数即可：

const Component = (props: Props): React.ReactElement => {
  const transfer = onTransfer(props.onTransfer, props.selected);
  return (
    <div onClick={transfer}>
      {/* 组件内容 */}
    </div>
  );
};

方案2：保留高阶函数写法 #

如果你坚持需要高阶函数的形式（先调用onTransfer()，再传入参数），可以调整函数的返回类型，让内部函数返回点击事件处理函数：

type OnTransfer = (action: { type: 'select' | 'deselect' }) => void;
type DivClickHandler = (event: React.MouseEvent<HTMLDivElement>) => void;

export const onTransfer = (): (cb: OnTransfer, selected: boolean) => DivClickHandler => {
  // 返回一个接收cb和selected的函数，该函数再返回点击处理函数
  return (cb, selected) => (event) => {
    cb({ type: selected ? 'select' : 'deselect' });
  };
};

组件中的调用方式和你原来的写法一致，但此时transfer会是正确的点击处理函数类型：

const Component = (props: Props): React.ReactElement => {
  const transfer = onTransfer()(props.onTransfer, props.selected);
  return (
    <div onClick={transfer}>
      {/* 组件内容 */}
    </div>
  );
};

这两种方案都显式指定了所有类型，既满足TypeScript的严格类型检查，也不会触发Lint错误，同时保证了代码的类型安全性。

内容的提问来源于stack exchange，提问作者Mr. Robot