アロー関数 とは？

まず書き方が短くなるよ。「function(x) { return x * 2; }」が「(x) => x * 2」になる。引数が1つなら括弧も省略できて「x => x * 2」とさらに短い。特にmap関数のコールバックなんかで使うとコードがスッキリするんだ。

一番大きな違いは「this」の扱いだよ。通常のfunctionはその関数が呼ばれた場所でthisが決まるけど、アロー関数は定義された場所のthisをそのまま使うんだ。クラスのメソッドの中でsetTimeoutを使うときなど、thisがずれて困る場面でアロー関数を使うと問題を回避できるよ。

thisを持たないから、オブジェクトのメソッドとして定義するときには注意が必要だよ。あとargumentsオブジェクトも使えない。それから短く書けるからといって、複雑なロジックを1行に詰め込むと読みにくくなる。コードの可読性を犠牲にしてまで短くするのは本末転倒だから、適度に改行や波括弧を使おうね。

基本は同じだけど、型注釈が付くよ。「const add = (a: number, b: number): number => a + b;」のように引数と戻り値に型を書く。ジェネリクスを使うとき「<T>(x: T) => x」がJSXの<T>タグと混同されてエラーになることがあるんだ。その場合は「<T,>(x: T) => x」のようにカンマを追加するか、function宣言を使う。これはTypeScript + JSX環境ならではのハマりポイントだよ。