[Day22] React x TS 中的 Event Handler

今天来分享一个小东西，记得以前一开始用 React 搭配 TypeScript 开发专案的时候，在写 Event Handler 的时候，常常会碰到不知道 Event Handler 中 e 的型别是什麽的情况，就像上图中 ??? 的位置，如果没有告知其型别，同时 tsconfig 设定档中的 strict 又设定成 true 时，因为在没有定义型别的情况下，该变数预设就会推断成 any（implicitly any），於是 TS 就会提示错误：

这时候必须明确告知这个 e 的型别，以 click 事件来说，它的型别就是 React.MouseEvent<HTMLButtonElement>：

这时候 TypeScript 就不会报错。

读者可能接着问，那如果是表单中的 onChange 事件呢？它的 Event Handler 中的 e 型别会是什麽呢？

答案是 React.ChangeEvent<HTMLInputElement>：

读者可能又会问，DOM 上面能绑定的事件这麽多，还有键盘相关的事件（keydown、keypress、keyup）、scroll 相关的事件、touch 相关的事件，该怎麽办呢？有地方可以查表吗？

这里让笔者全部列给你：

• onKeyDown 的事件是 React.KeyboardEvent<HTMLInputElement>
• onScroll 的事件是 React.UIEventHandler<HTMLDivElement>
• onTouchEnd 的事件是 React.TouchEvent<HTMLDivElement>
• ...

然後背下来就好，明天抽考。

.

.

.

.

.

如果我请你背下来，我就真的在害你 XD

.

.

.

.

.

实际上，我以前一开始接触 React x TypeScript 时也不知道事件的型别这麽多该怎麽办，就算真的有表可以查，还是相当麻烦的一件事，後来傻傻的我发现到，只要把滑鼠移到该事件上面，你就可以知道这个 e 的型别要填什麽了。

举例来说，只要在 DOM 上先写出你想监听的事件，例如这里来看 div 上的 onTouchEnd 事件，然後把滑鼠移上去（注意是移到 onTouchEnd 的名称上，而不是 {} 出现红色毛毛虫的地方），就会看到型别的名称写 React.TouchEventHandler<HTMLDivElement>，而 e 的型别只需要把 TouchEventHandler 最後的 Handler 移掉就是了，所以就会是 React.TouchEvent<HTMLDivElement>：

备注：滑鼠要移到 onXXX 的事件名称上，而不是 {} 中 TypeScript 冒出红色毛毛虫的地方。

同样的道理，如果是在 input 元素上的 onKeyDown 事件，先在 DOM 上写成 onKeyDown，然後滑鼠移上去：

上面写的是 React.KeyboardEventHandler<HTMLInputElement> ，因此移掉最後的 Handler 後，读者就会知道，onKeyDown Event Handler 中的参数 e 其型别会是 React.KeyboardEvent<HTMLInputElement>。

以後如果同事问你，你怎麽知道这些事件参数的型别是什麽，要回答「我背了两个礼拜才全部背下来」，或是把这个方法告诉他/她，就看你们的交情了...。