TypeScriptの関数について

2023年 3月 5日

関数について

TypeScriptでの関数の定義方法、引数と戻り値の型の指定、および関数のオーバーロードについて説明します。

関数の定義方法

TypeScriptでの関数の定義方法は、以下のようになります。

function myFunction(arg1: number, arg2: string): void {
  console.log(arg1, arg2);
}

この例では、myFunctionという名前の関数が定義されています。arg1とarg2の2つの引数を取り、それぞれの型がnumberとstringであることが指定されています。
また、関数の戻り値の型はvoidであり、何も返さないことを示しています。

引数と戻り値の型の指定

TypeScriptでは、関数の引数と戻り値の型を指定することができます。引数と戻り値の型は、関数名の後ろにコロン（:）を付けて指定します。

function myFunction(arg1: number, arg2: string): number {
  return arg1 + arg2.length;
}

この例では、関数の戻り値の型がnumberであることが指定されています。関数内では、arg1とarg2.lengthを足して、その結果を戻り値として返しています。

関数の型について

TypeScriptでは、関数の返り値の型を明示的に指定することができます。関数が値を返す場合、その返り値の型を指定することで、コンパイラがその型をチェックすることができます。これにより、関数が返す値の型が期待される型と異なる場合、エラーを検出することができます。
以下は、関数の返り値の型を指定する例です。

function add(a: number, b: number): number {
  return a + b;
}

この例では、add関数の返り値の型をnumberとして指定しています。
返り値の型を指定しない場合、TypeScriptは返り値の型をanyとして扱います。これは、TypeScriptが型チェックを行わない場合と同様の挙動を示します。

function add(a: number, b: number) {
  return a + b;
}

この例では、add関数の返り値の型を指定していません。そのため、TypeScriptは返り値の型をanyとして扱います。
返り値の型をvoidとして指定することで、関数が値を返さないことを明示することができます。

function log(message: string): void {
  console.log(message);
}

この例では、log関数が値を返さないことを示すために、返り値の型をvoidとして指定しています。

関数のオーバーロード

オーバーロードとは、同じ名前の関数を複数定義し、引数の型や個数によって処理を切り替える方法です。これにより、異なる型の引数を受け取る関数を簡潔に表現することができます。
以下は、関数のオーバーロードを使用する例です。

function createElement(tagName: "a"): HTMLAnchorElement;
function createElement(tagName: "canvas"): HTMLCanvasElement;
function createElement(tagName: "table"): HTMLTableElement;
function createElement(tagName: string): HTMLElement {
  return document.createElement(tagName);
}

この例では、createElement関数を定義しています。この関数は、引数のtagNameに応じて、異なる型の要素を作成することができます。tagNameが"a"の場合はHTMLAnchorElement、"canvas"の場合はHTMLCanvasElement、"table"の場合はHTMLTableElementを返します。それ以外の場合は、HTMLElementを返します。
このように、引数の型や個数によって処理を切り替えるために、同じ名前の関数を複数定義することができます。TypeScriptでは、関数のオーバーロードを定義する場合は、シグネチャのリストを記述し、最後に実装を定義します。シグネチャには、引数の型や返り値の型を指定します。
オーバーロードを使用することで、関数の呼び出し時に、引数の型によって適切な処理を行うことができます。また、コンパイラによる型チェックも正確に行われるため、タイプミスや不正な呼び出しによるエラーを事前に検出することができます。

関数の引数について

TypeScriptでは、関数の引数に対して、型の指定やオプションの指定、デフォルト値の指定など、様々な設定が可能です。

型の指定

関数の引数に対して、型を指定することができます。型を指定することにより、コンパイラが引数の型チェックを行い、エラーを検出することができます。

function add(a: number, b: number): number {
  return a + b;
}

この例では、add関数の引数aとbに対して、型numberを指定しています。

オプション引数

TypeScriptでは、引数をオプションにすることができます。オプション引数は、引数名の後ろに?を付けて指定します。例えば、次のように引数bをオプションにすることができます。

function addNumbers(a: number, b?: number): number {
  if (b) {
    return a + b;
  } else {
    return a;
  }
}

この関数は、引数bが省略された場合は、aだけを返し、bが指定された場合は、a + bを返します。

デフォルト引数

TypeScriptでは、関数にデフォルト引数を指定することができます。デフォルト引数は、引数名の後ろに=を付けて指定します。例えば、次のようにデフォルト引数b = 0を指定することができます。

function addNumbers(a: number, b = 0): number {
  return a + b;
}

この関数は、引数bが省略された場合は、b = 0が適用され、aだけを返し、bが指定された場合は、a + bを返します。

Restパラメータ

TypeScriptでは、Restパラメータを使用して、関数の引数に可変長のリストを受け取ることができます。Restパラメータは、関数の引数のリストの最後に指定します。
Restパラメータを指定するには、引数名の前に...を付けます。Restパラメータは、可変長の引数を配列として受け取るため、配列の要素にアクセスする場合はインデックスを指定する必要があります。

function sum(...numbers: number[]) {
  let result = 0;
  for (let i = 0; i < numbers.length; i++) {
    result += numbers[i];
  }
  return result;
}

console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(1, 2)); // 3

この例では、sum関数の引数にRestパラメータ...numbersを指定しています。この関数は、可変長の数値のリストを受け取り、合計値を返します。sum関数を呼び出す際に、任意の数の引数を渡すことができます。
Restパラメータを使用することにより、可変長の引数を受け取る関数を簡単に定義することができます。また、Restパラメータを使用することで、関数の引数の数が可変長であることを明示的に示すことができ、コードの可読性を向上させることができます。