関数宣言 (function declaration)

関数宣言構文#

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;
}

次の例のように定義済みの関数プロパティに再代入する形で関数を上書きする場合はbutton.onclickの引数eventの型がMouseEventと定義されているため、その型情報から代入する関数の引数の型を省略しても、eventの型をMousetEventと推論してくれます。

ts
const button = document.createElement("button");
button.onclick = function (event) {
                            
(parameter) event: MouseEvent
  console.log(event.target);
  console.log(event.hoge);
Property 'hoge' does not exist on type 'MouseEvent'.2339Property 'hoge' does not exist on type 'MouseEvent'.};

ts
const button = document.createElement("button");
button.onclick = function (event) {
                            
(parameter) event: MouseEvent
  console.log(event.target);
  console.log(event.hoge);
Property 'hoge' does not exist on type 'MouseEvent'.2339Property 'hoge' does not exist on type 'MouseEvent'.};

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

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