メインコンテンツまでスキップ

関数宣言 (function declaration)

関数宣言はJavaScriptで関数を定義する構文です。

関数宣言構文

JavaScriptの関数宣言はfunction構文を使います。

js
function hello() {
return "hello";
}
js
function hello() {
return "hello";
}

関数宣言構文の型注釈

TypeScriptでは関数宣言の引数と戻り値に型注釈を書けます。

ts
function increment(num: number): number {
return num + 1;
}
ts
function increment(num: number): number {
return num + 1;
}

引数の型注釈を省略した場合、コンパイラーはany型と暗黙的に解釈します。

ts
function increment(num): number {
(parameter) num: any
return num + 1;
}
ts
function increment(num): number {
(parameter) num: any
return num + 1;
}

コンパイラーオプションのnoImplicitAnytrueに設定することで、引数の型注釈を必須にできます。

ts
function increment(num): number {
Parameter 'num' implicitly has an 'any' type.7006Parameter 'num' implicitly has an 'any' type.
return num + 1;
}
ts
function increment(num): number {
Parameter 'num' implicitly has an 'any' type.7006Parameter 'num' implicitly has an 'any' type.
return num + 1;
}

📄️ noImplicitAny

暗黙のany型を禁ずる

戻り値の型注釈を省略した場合、コンパイラーがコードから型推論します。

ts
function increment(num: number) {
return num + 1;
}
const value = increment(1);
function increment(num: number): number
ts
function increment(num: number) {
return num + 1;
}
const value = increment(1);
function increment(num: number): number

returnが複数あり違う型を返している場合推論される型はユニオン型になります。

ts
function getFirst(items: number[]) {
if (typeof items[0] === "number") {
return items[0];
}
return null;
}
 
getFirst([1, 2, 3]);
function getFirst(items: number[]): number | null
ts
function getFirst(items: number[]) {
if (typeof items[0] === "number") {
return items[0];
}
return null;
}
 
getFirst([1, 2, 3]);
function getFirst(items: number[]): number | null
  • 質問する ─ 読んでも分からなかったこと、TypeScriptで分からないこと、お気軽にGitHubまで🙂
  • 問題を報告する ─ 文章やサンプルコードなどの誤植はお知らせください。