【TypeScript】TypeScriptの関数宣言とJavaScriptの関数宣言の違いについて解説

今回はTypeScriptの関数宣言とJavaScriptの関数宣言の違いについて解説したいと思います。TypeScriptは静的型付け言語、JavaScriptは動的型付け言語という違いを意識しながら見ていきましょう。

【初心者向け】変数の静的型付け(TypeScript)と動的型付け(JavaScript)が曖昧だったのでまとめてみた変数の静的型付けと動的型付けの違いについて簡単に解説しています。一般的にTypeScriptが静的型付け言語、JavaScriptが動的型付け言語として位置付けられており、今回はその2つを比較して解説していきます。...

TypeScriptとJavaScriptの関数宣言の違い

TypeScriptとJavaScriptの関数宣言の違いは、結論引数と返り値に型付けをするかどうかになります。TypeScriptは静的型付け言語であるため、型付けをしなければならない点に着目すれば何となく分かりますね。

では具体的に見ていきましょう。以下の記述は掛け算を実行する簡単な関数です。

function multi(x, y){
  return x * y
}

console.log(multi(5, 3))

function multi(x: number, y: number): number{
  return x * y
}

console.log(multi(5, 3))

このようにTypeScriptでは、引数と返り値に対して型を定義することができます。では定義した型ではないものが引数にきてしまった場合はどうなるのでしょうか？

以下のように引数に「こんにちは」という文字列を当てはめてみましょう。

function multi(x: number, y: number): number{
  return x * y
}

console.log(multi(5, "こんにちは"))

そうするとコンパイル時に以下のようなエラーが表示されるはずです。

% tsc test.ts
test.ts:5:22 - error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

このように、静的型付け言語ではコンパイル時にエラーが分かるため安全なプログラムを書くことができます。

まとめ

• TypeScriptとJavaScriptの関数宣言の違いは、引数と返り値に型を定義するか否かの違いである。
• 静的型付け言語ではエラーが予め把握できるため、安全なプログラムを書くことができる。

参考

TypeScriptの関数を振り返る：
https://qiita.com/pochopocho13/items/c92cba15be3f6a1b29a6

Udemy：
https://udemy.benesse.co.jp/development/web/typescript.html

今回はTypeScriptの関数宣言とJavaScriptの関数宣言の違いについて解説しました。静的型付けと動的型付けの違いが理解できている人であれば、スムーズに理解できる項目だと思います。