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」を使ったものが下記です。
/**
* イベント名の列挙型
*/
const enum EventName {
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の変数の値を１箇所だけ修正すればよいです。