TypeScript中箭头/普通函数类型定义及React组件props函数类型报错解决

先搞清楚：箭头函数/普通函数的类型是什么？ #

在TypeScript里，不管是箭头函数还是普通函数，它们的类型都需要通过函数签名来定义——也就是明确参数的类型和返回值的类型，而不是直接用宽泛的Function类型。Function是一个顶层类型，它不约束参数和返回值，完全没有类型安全性，这也是你遇到报错的核心原因。

你的错误场景还原 #

假设你之前的代码是这样的：

interface ButtonProps {
  handle: Function; // 这里触发TS报错
}

const Button = ({ handle }: ButtonProps) => {
  return <button onClick={() => handle('click')}>Click Me</button>;
};

TS会提示你Function类型缺乏类型安全性，要求你指定具体的函数形状，因为它无法确认handle接收什么参数、返回什么值。

正确的函数类型定义方式 #

1. 直接在Props接口里定义函数签名 #

根据handle的实际使用场景，明确它的参数和返回值类型：
比如你的handle是接收一个字符串类型的事件标识，没有返回值，就这么写：

interface ButtonProps {
  // 定义函数类型：接收string参数，返回void
  handle: (eventType: string) => void;
}

const Button = ({ handle }: ButtonProps) => {
  return <button onClick={() => handle('button-click')}>Click Me</button>;
};

这样TS会严格检查你调用handle时的参数类型，避免传错参数。

2. 复用函数类型（适合多个组件共用） #

如果多个组件都需要用到同一种函数类型，可以先定义类型别名：

// 定义可复用的函数类型
type HandleEvent = (eventType: string) => void;

interface ButtonProps {
  handle: HandleEvent;
}

interface CardProps {
  onAction: HandleEvent;
}

3. 适配React内置事件的函数类型 #

如果你的handle是用来处理React原生事件（比如按钮点击），直接用React提供的事件类型更规范：

import { MouseEvent } from 'react';

interface ButtonProps {
  // 明确是按钮元素的鼠标点击事件
  handle: (e: MouseEvent<HTMLButtonElement>) => void;
}

const Button = ({ handle }: ButtonProps) => {
  // 直接把handle传给onClick，类型完全匹配
  return <button onClick={handle}>Click Me</button>;
};

4. 可选的函数属性 #

如果handle是可选的（组件可以不传这个属性），加?标识，同时调用前要确保函数存在：

interface ButtonProps {
  handle?: (e: MouseEvent<HTMLButtonElement>) => void;
}

const Button = ({ handle }: ButtonProps) => {
  // 用空函数兜底，避免调用undefined
  return <button onClick={handle ?? (() => {})}>Click Me</button>;
};

为什么不能用Function类型？ #

Function类型允许任何函数，不管它需要几个参数、参数类型是什么、返回值是什么。比如你定义handle: Function，但实际传入的函数可能需要两个数字参数，你调用handle('click')时TS不会报错，但运行时会出问题——这就是TS提示你“无类型安全性”的原因，明确函数形状才能让TS发挥类型检查的作用。

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