TypeScript(またはJavaScript)でイベント名を扱う場合は、"load"や"click"等、イベント名を直書きにすることが多いと思います。しかし、このようにイベント名を直書きしたコーディングを行うと、プロジェクトが大きくなるほどタイピングミスに気づきにくく、バグの誘発につながります。これを防ぐために、String enumsを作り、一元管理することをお薦めします。

イベント名を直書きした処理

まずよく見受けられるプログラミング方法です。ウインドウをクリックした時にアラートを出す処理はTypeScriptで下記のように記述します。

// ウインドウをクリックした時の処理window.addEventListener("load",()=>alert("ウィンドウのロードが完了しました。"));window.addEventListener("click",()=>alert("clickされました。"));window.addEventListener("mousemove",()=>console.log("マウス移動しています。"));

addEventListener()メソッドの第一引数は、"load"・"click"のようにイベント名を直接文字列で記述しています。例えば複数の処理で"click"という文字列を使用すれば、その分だけタイピングミスとバグの危険性が上がります。

String enumsを使った処理

上記と同じ処理を、イベント名を列挙したEnum「EventName」を使ったものが下記です。

/** * イベント名の列挙型 */constenumEventName{LOAD="load",CLICK="click",MOUSE_MOVE="mousemove"}// EventNameクラスを使用してイベント名を指定する。window.addEventListener(EventName.LOAD,()=>alert("ウィンドウのロードが完了しました。"));window.addEventListener(EventName.CLICK,()=>alert("clickされました。"));window.addEventListener(EventName.MOUSE_MOVE,()=>console.log("マウス移動しています。"));

addEventListener()メソッドの第一引数では、EventName.CLICKという風にEventNameを経由してイベント名を指定しています。文字列に誤りがあってもEventNameの変数の値を１箇所だけ修正すればよいです。