TypeScriptのアロー関数: 基本を理解する

TypeScriptのアロー関数( => )について基本的な書き方をまとめました。

アロー関数の基本
まとめ

アロー関数の基本

アロー関数とは

アロー関数とは関数式(function ~)をよりシンプルに記述できるようにした構文です。アロー関数で記述することで不要なコードが減り、シンプルに書くことができます。

関数式とアロー関数の比較

以下、関数式とアロー関数の比較です。関数式で記述したものとアロー関数で記述したものは同じ関数の機能を果たします。

○¹引数ありの場合

//関数式
const drive = function(carType){
  console.log(carType + "を運転しています");
}

//アロー関数
const drive = (carType) => {console.log(carType + "を運転しています");}

○戻り値(return)がある場合

//関数式
const drive = function(){
   return "運転しています";
}

//アロー関数
const drive = () => "運転しています";

関数式をアロー関数に記述する流れ

では、実際に関数式をアロー関数に記述する流れ順に追っていきます。以下の関数式をアロー関数に変えていきます。

const drive = function(carType){
  console.log(carType + "を運転しています");
}

1.functionの省略

まずfunctionの省略です。

const drive = (carType){
  console.log(carType + "を運転しています");
}

2.アロー演算子(=>)の追加

続いてアロー関数を追加します。

const drive = (carType) => {
  console.log(carType + "を運転しています");
}

これでアロー関数の完成です。

補足

{ }の省略：関数の処理が1つの場合「{ }」は省略可能
( )の省略：引数が1つの場合(carType)の「( )」は省略可能

上記の補足を追加すると最終的に以下のように記述できます。

const drive = carType => console.log(carType + "を運転しています");

かなりシンプルになりました。

引数と戻り値の型を指定する場合

次に引数と戻り値に型が指定している場合を見ていきます。以下に引数にstring型、戻り値にstring型を指定している関数があります。

const drive = function(carType:string):string {
  return carType;
}

これをアロー関数に書き換えます。

const drive = (carType:string):string => carType;
console.log(drive("SUV")); //SUV

注意：引数と戻り値の型を指定している場合、引数が1つだとしても「( )」を省略することはできません。なぜなら、「( )」を省略すると「carType:string:string」となりTypeScriptの型認証がうまく機能してくれないからです。

まとめ

今回は、アロー関数の基本ついてまとめました。初めてアロー関数を見た時は目が点になっていましたが、改めてまとめてみると理解が深まってきました。

注意点を忘れずにうまく使いこなせればコードをシンプルに記述することができそうですね。