TypeScript 事件类型怎么定义
TypeScript 能帮我们在写代码时提前揪出小错误，就像给代码配了个“提前纠错小助手”，其中处理交互事件时，用好它的事件类型定义，能让代码更稳、更少出bug。平时我们做网页，按钮点击、输入框打字这些操作，本质都是“事件”，TypeScript 给这些事件定“类型”，就像给不同的钥匙配对应的锁，不会乱插。
为什么要给事件定义类型？
很多人用原生JavaScript写代码时，不会特意管事件类型，比如写个按钮点击函数，直接拿event对象用，结果哪天不小心写错了属性名（比如把clientX写成clientY），代码跑起来才报错，找起来特别麻烦。但TypeScript给事件定类型后，写代码时就能直接看到事件有哪些属性，写错了编辑器会立刻标红提示，就像买奶茶时店员直接告诉你“这个杯子不能装热饮”，避免后续出问题。
举个生活化的例子：你给家里的快递柜设了“只能放快递”的规则，相当于事件类型；要是随便放雨伞、零食，柜子可能放不下甚至坏，就像没定义类型的事件，用错属性就会出问题。
常见的事件类型怎么用？
平时前端最常用的事件，无非是鼠标、键盘、表单这几类，TypeScript都给准备了现成的类型，不用自己瞎写，直接用就行。
鼠标点击类事件
比如网页里的按钮点击，对应的是MouseEvent类型。写代码时，只需要在函数参数里声明是MouseEvent，就能自动拿到点击的坐标、对应元素这些属性。
比如写个点击按钮弹提示的功能，没类型时可能是这样：
`javascript
// 没类型，写的时候不知道event有啥属性
button.onclick = (event) => {
console.log(event.x); // 可能写错成event.X，编辑器不会提示
}
`
用了TypeScript的MouseEvent后：
`typescript
// 声明是MouseEvent，编辑器会自动补全属性，写错会标红
button.onclick = (event: MouseEvent) => {
console.log(event.clientX); // 正确，不会报错
}
`
键盘输入类事件
比如输入框打字，对应的是KeyboardEvent，能拿到按的是哪个键、输入的内容这些信息。
比如写个按回车提交留言的功能，用类型定义后，能明确知道key属性是用来判断按键的：
`typescript
const input = document.querySelector('input');
// 声明是KeyboardEvent，知道event.key是字符串类型，不是数字
input.onkeydown = (event: KeyboardEvent) => {
if (event.key === 'Enter') { // 直接补全key属性，不会写错
console.log('提交留言');
}
}
`
表单提交类事件
比如提交登录表单，对应的是SubmitEvent，能阻止默认的页面跳转，还能获取表单数据。
比如写个提交表单不跳转的功能：
`typescript
const form = document.querySelector('form');
// 声明是SubmitEvent，知道preventDefault()是阻止跳转的方法
form.onsubmit = (event: SubmitEvent) => {
event.preventDefault(); // 编辑器会提示这个方法，不会漏写
console.log('表单提交成功');
}
`
自定义特殊事件的类型
有时候遇到特殊的自定义事件，TypeScript的现成类型不够用，就可以自己定义。比如做个“商品加入购物车”的自定义事件，需要传商品的id、名称，这时候可以自己写个类型：
`typescript
// 自定义事件的类型，告诉TypeScript这个事件带什么数据
type CartAddEvent = Event & {
detail: { productId: number; productName: string }
}
// 用自定义类型接收事件
cartButton.addEventListener('add-to-cart', (event: CartAddEvent) => {
const product = event.detail; // 编辑器知道detail里的内容
console.log(加入购物车：${product.productName});
})
`
就像你给快递柜单独设了“只能放带面单的快递”，自己定规则，不会乱塞东西。
给事件定义类型，核心是让代码“说清楚自己要什么”，既能少出bug，后续维护时也能快速看懂每个事件的作用，不用反复查文档。