TypeScript函数返回参数上的方法时需要设置什么参数类型

你写的阻止事件冒泡函数中，event是事件对象，不能用通用Function类型标注——Function类型仅用来标注函数本身，完全不包含DOM事件实例的内置方法，自然会报类型错误。根据使用场景选对应类型即可：

• 原生DOM环境下的点击事件：直接用TypeScript内置的DOM标准类型MouseEvent，该类型对应原生鼠标事件对象，完整包含stopPropagation()、preventDefault()等事件方法，以及鼠标位置、按键状态等鼠标事件专属属性。
• React框架下的点击事件：需要用React封装的合成事件类型React.MouseEvent，如果需要精准匹配绑定的DOM元素类型，可以传入对应元素的泛型参数，比如绑定在按钮上时写React.MouseEvent<HTMLButtonElement>。
• 其他事件场景对应选匹配的类型即可，比如输入框输入事件用InputEvent/React.ChangeEvent<HTMLInputElement>，键盘事件用KeyboardEvent/React.KeyboardEvent。

正确代码示例 #

原生TypeScript场景 #

const PreventParentOnClick = (event: MouseEvent) => event.stopPropagation()

React框架场景 #

const PreventParentOnClick = (event: React.MouseEvent) => event.stopPropagation()

注意：不要用最基础的Event类型标注鼠标事件，Event是所有事件的顶层父类型，虽然包含stopPropagation方法，但缺少鼠标事件专属的属性（如坐标值clientX、offsetY等），后续使用这类属性时会触发类型报错，使用对应事件分类的精准类型更稳妥。

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