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

typescript-arrow
INDEX

はじめに

typescript の学習を始めた時に、コードを見て=>って何これ?と思いました。
色々調べて便利である事が分かりまとめました。

結論

=>は、typescript のアロー関数式という書き方になります。
function を使用せず、=>を使用した関数のことです。
さらに、記法に省略記法があり、シンプルかつ少ないコードで記述することが出来ます。
種類メリット
function を使用した関数
アロー関数式functionを省略する可能
アロー関数式 (省略記法)return{} を省略する可能

使い方

function を使用した関数

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

アロー関数式

functionを省略する事が出来ます
// 機能内容: 渡された金額を消費税込みの金額に計算をする
const clac_tax = (price: number) => {
  // Math.floor: 小数点を切り捨て
  return Math.floor(price * 1.1);
};
console.log(clac_tax(100));
出力結果を確認します。
110

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

return{}を省略する事が出来、1行で記載する事が出来ます
// 機能内容: 渡された金額を消費税込みの金額に計算をする
// Math.floor: 小数点を切り捨て
const clac_tax = (price: number) => Math.floor(price * 1.1);
console.log(clac_tax(100));
出力結果を確認します。
110
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

Born in 1994
Engineer's career is from 2020.10
Skill: Next.js, TypeScript, Django, Python, HTML, CSS

INDEX