【5分でわかる】アロー関数の使い方

この記事ではTypeScriptにおけるアロー関数の使い方をご紹介します。

アロー関数の使い方

TypeScriptにおけるアロー関数の使い方をご紹介します！

アロー関数とは、ある特定の変数に、引数と、その引数を処理する内容をひとまとめにして定義できます。

関数式を一つの変数で保持するイメージです。

例えば以下のような関数式があったとします。

const printString = function (n:string) {
  return n+"test";
};

console.log(printString("this is ")); // "this is test"

これをアロー関数に置き換えると以下のようになります。

const printString = (n:string) =>  {
  return n+"test";
};

console.log(printString("this is ")); // "this is test"

アロー関数の引数が一つだけの場合は省略して以下のように書くことも可能です。

const printString = n =>  {
  return n+"test";
};

また上記の場合、処理する式が一つだけなので以下のように{}とreturnを省略することが可能です。

const printString = n => n+"test";

逆に引数がない場合は以下のように括弧()が必要になります。

const printString = () => "test";

アロー関数の引数と戻り値の型を定義することができます。

引数に型を定義したい場合

const printString = (n:string) => n+"test";

戻り値に型を定義したい場合

const printString = (n:string):string => n+"test";

注意点としては、引数や戻り値の型を設定した場合、括弧()は必須になります。

今回はTypeScriptにおけるアロー関数の使い方を紹介しました。

ぜひこの機会に習得してみてください。

きむら

ここまで記事を読んでいただきありがとうございました♪