如何在React与TypeScript中定义事件处理名与处理函数的类型

嘿，你的思路已经很靠谱了！我来帮你把这个实现落地得更完善一些～

首先我们可以调整你原本的类型，让它更贴合你预期的结构，同时给泛型加上更严谨的约束，确保类型安全：

import React from 'react';

// I: 对应的HTML元素类型（比如HTMLInputElement、HTMLButtonElement）
// E: 该元素支持的React事件属性名（比如'onBlur'、'onChange'）
type SpecifiedEventHandler<I extends HTMLElement, E extends keyof React.DOMAttributes<I>> = {
  eventHandlerName: E;
  eventHandler: React.DOMAttributes<I>[E];
};

有了通用类型后，我们可以针对不同的元素类型创建对应的事件处理数组。比如针对输入框的场景：

// 定义HTMLInputElement的事件处理数组
const inputEventHandlers: SpecifiedEventHandler<HTMLInputElement, keyof React.DOMAttributes<HTMLInputElement>>[] = [
  {
    eventHandlerName: 'onBlur',
    eventHandler: (e: React.FocusEvent<HTMLInputElement>) => {
      console.log('输入框失去焦点:', e.target.value);
    }
  },
  {
    eventHandlerName: 'onChange',
    eventHandler: (e: React.ChangeEvent<HTMLInputElement>) => {
      console.log('输入框内容变化:', e.target.value);
    }
  }
];

如果想限制只能使用特定的事件（而不是元素支持的所有事件），可以直接指定E的范围：

// 只允许'onBlur'和'onChange'两种事件
type AllowedInputEvents = 'onBlur' | 'onChange';

const restrictedInputHandlers: SpecifiedEventHandler<HTMLInputElement, AllowedInputEvents>[] = [
  {
    eventHandlerName: 'onBlur',
    // TS会自动推断事件参数类型，无需手动声明
    eventHandler: (e) => {
      console.log('输入框失去焦点');
    }
  }
];

最后可以通过reduce把事件数组转换成可直接传递的props对象，再用展开运算符绑定到组件上：

const CustomInput = () => {
  // 把事件数组转换为符合Input组件的props格式
  const inputProps = inputEventHandlers.reduce((props, handler) => {
    props[handler.eventHandlerName] = handler.eventHandler;
    return props;
  }, {} as React.InputHTMLAttributes<HTMLInputElement>);

  return <input {...inputProps} placeholder="测试输入框" />;
};

一些实用提醒 #

• 确保泛型I的类型和实际使用的组件元素匹配，比如按钮用HTMLButtonElement，输入框用HTMLInputElement
• 事件处理函数的签名必须符合React官方的事件类型，不能随意修改事件参数的结构
• 使用reduce合并props时，类型断言要准确，避免出现类型不兼容的报错

内容的提问来源于stack exchange，提问作者Michael Tontchev