TypeScript箭头函数中SubmitHandler类型标注的含义疑问

嘿，我来给你把这个点讲明白！

首先看你贴的原代码：

const onSubmit: SubmitHandler<IFormInput> = data => console.log(data);

这里的:SubmitHandler<IFormInput>是直接给变量onSubmit指定了完整的函数类型，而你自己写的版本是给函数的参数和返回值单独标注类型，本质上是两种不同的类型约束方式，但核心目的都是确保函数符合预期的结构。

咱们结合给出的SubmitHandler类型定义来拆解：

export type SubmitHandler<TFieldValues extends FieldValues> = (data: TFieldValues, event?: React.BaseSyntheticEvent) => any | Promise<any>;

这是一个泛型函数类型，它定义了一个合格的“提交处理函数”应该满足的规则：

• 第一个参数data的类型是你传入的泛型参数TFieldValues（这里就是IFormInput）
• 第二个参数是可选的React事件对象event
• 返回值可以是任意类型（any）或者一个Promise对象

那原代码的写法就相当于告诉TypeScript：“onSubmit这个变量必须是符合SubmitHandler<IFormInput>规则的函数”。这样一来：

• data的类型会自动被推断为IFormInput，不用你手动写(data: IFormInput)
• 如果你以后需要用到可选的event参数，直接在函数里加就行，比如(data, event) => { ... }，类型会自动匹配
• 你的函数返回undefined（因为console.log没有返回值），这也符合any的要求（undefined属于any的子类型）

再对比你自己写的版本：

const onSubmitFunction = ( data: IFormInput ):void => console.log(data);

你这里明确指定了参数类型是IFormInput，返回值是void，这和SubmitHandler<IFormInput>是兼容的，但SubmitHandler的约束更全面——它允许函数返回Promise，也允许接收event参数，而且复用了预先定义好的类型，不用每次都手动写参数和返回值的类型，尤其在使用像react-hook-form这类库时，这种写法能确保你的提交函数完全符合库的要求，避免类型不匹配的问题。

简单来说，原写法是“用现成的函数类型来约束变量”，你的写法是“手动定义函数的参数和返回值类型”，两者都能达到类似的效果，但原写法更简洁、更贴合库的设计规范~

备注：内容来源于stack exchange，提问作者Puser