関数宣言 (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;
}

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

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