TypeScript-React箭头函数作为参数的类型标注方法

你可以通过定义组件Props的Interface来给回调函数参数标注类型，具体分两种场景处理：

场景1：激活函数不需要接收事件对象 #

如果你的activate函数不需要用到按钮点击的事件对象，直接定义无参数的函数类型即可：

// 定义组件Props的接口
interface EditButtonProps {
  activate: () => void;
}

const activate = () => {
  // 激活编辑逻辑
};

// 给组件参数标注Props类型，组件返回JSX.Element（可省略，TS会自动推断）
export function EditButton({ activate }: EditButtonProps): JSX.Element {
  return (
    <button className="wishButton" onClick={activate}>
      编辑
    </button>
  );
}

场景2：激活函数需要接收点击事件对象 #

如果需要在activate里处理点击事件（比如阻止默认行为），可以直接复用React内置的MouseEventHandler类型：

import type { MouseEventHandler } from 'react';

interface EditButtonProps {
  activate: MouseEventHandler<HTMLButtonElement>;
}

// 此时activate可以接收事件参数
const activate: MouseEventHandler<HTMLButtonElement> = (e) => {
  e.preventDefault();
  // 激活编辑逻辑
};

export function EditButton({ activate }: EditButtonProps) {
  return (
    <button className="wishButton" onClick={activate}>
      编辑
    </button>
  );
}

关键说明 #

• 原代码里export function EditButton(...) : SomeInterface是错误的，React组件的返回类型应该是JSX.Element（或React.ReactNode），不是自定义接口。
• 用Interface定义Props类型是TypeScript开发React的标准实践，能清晰约束组件入参类型，同时获得IDE的类型提示。

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