[TypeScript] これ('=>')って何？

🌱 はじめに

この記事では、TypeScript のアロー関数式(=>) をまとめております。

参考資料

🌱 結論

=>は、TypeScript のアロー関数式という書き方になります。
function を使用せず、=>を使用した関数のことです。
さらに、記法に省略記法があり、シンプルかつ少ないコードで記述することができます。

// アロー関数式
const clac_tax = (price: number) => {
  return Math.floor(price * 1.1);
};

// 省略記法
const clac_tax = (price: number) => Math.floor(price * 1.1);

メリット

• アロー関数式: functionを省略する可能。
• アロー関数式 (省略記法): returnと {} を省略する可能。

🌱 function を使用した関数

// 機能内容: 渡された金額を消費税込みの金額に計算をする
const clac_tax = function (price: number) {
  // Math.floor: 小数点を切り捨て
  return Math.floor(price * 1.1);
};
console.log(clac_tax(100));

実行結果を確認する。

110

🌱 アロー関数式

 // 機能内容: 渡された金額を消費税込みの金額に計算をする。
- const clac_tax = function (price: number) {
  // Math.floor: 小数点を切り捨て
  return Math.floor(price * 1.1);
};

+ const clac_tax = (price: number) => {
  return Math.floor(price * 1.1);
};
console.log(clac_tax(100));

実行結果を確認する。

110

🌱 アロー関数式 (省略記法)

- const clac_tax = (price: number) => {
-  return Math.floor(price * 1.1);
- };
+ const clac_tax = (price: number) => Math.floor(price * 1.1);
console.log(clac_tax(100));

実行結果を確認する。

110