[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と {} を省略する可能

1. function を使用した関数

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

実行結果を確認する

110

2. アロー関数式

 // 機能内容: 渡された金額を消費税込みの金額に計算をする
- 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

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

- 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

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣