TypeScript で関数を使用する方法初心者ガイド

関数は、JavaScript と同様に、TypeScript でも基本的な構成要素です。TypeScript は、型注釈などの追加機能によって JavaScript 関数を拡張し、コードの明確さを高め、エラーを防止します。この初心者向けガイドでは、TypeScript で関数を使用する方法について説明します。

関数の定義

TypeScript では、JavaScript と同じように関数を定義できますが、オプションの型注釈を使用して、パラメータと戻り値の型を指定できます。

基本関数の定義

TypeScript で簡単な関数を定義する方法は次のとおりです。

function greet(name: string): string {
  return "Hello, " + name;
}

この例では、name は string 型のパラメーターであり、関数は string 型の値を返します。

関数のパラメータと戻り値の型

TypeScript を使用すると、関数のパラメータと戻り値の型を指定できるため、関数が正しく使用されるようになります。

パラメータ付き関数

以下は 2 つのパラメータを受け取り、その合計を返す関数です。

function add(x: number, y: number): number {
  return x + y;
}

この関数では、x と y は両方とも number 型であり、関数は number を返します。

戻り値のない関数

すべての関数が値を返す必要はありません。戻り値のない関数は、戻り値の型 void で宣言されます。これらの関数はアクションを実行しますが、結果は生成しません。

戻り値なしの例

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

この例では、logMessage は message をコンソールに出力しますが、値は返しません。

オプションおよびデフォルトパラメータ

TypeScript はオプションおよびデフォルトのパラメータをサポートしており、より柔軟な関数を作成できます。

オプションパラメータ

オプションパラメータは、パラメータ名の後に ? を追加して指定します。

function greet(name: string, greeting?: string): string {
  if (greeting) {
    return greeting + ", " + name;
  }
  return "Hello, " + name;
}

この例では、greeting は関数を呼び出すときに省略できるオプションのパラメーターです。

デフォルトパラメータ

値が指定されていない場合、デフォルトパラメータにはデフォルト値が設定されます。

function greet(name: string, greeting: string = "Hello"): string {
  return greeting + ", " + name;
}

greeting が指定されていない場合は、デフォルトで "Hello" になります。

関数のオーバーロード

TypeScript は関数のオーバーロードをサポートしており、同じ関数名に対して複数の関数シグネチャを定義できます。

function greet(name: string): string;
function greet(name: string, age: number): string;
function greet(name: string, age?: number): string {
  if (age !== undefined) {
    return `Hello, ${name}. You are ${age} years old.`;
  }
  return `Hello, ${name}.`;
}

この例では、greet は 1 つまたは 2 つのパラメータを使用して呼び出すことができます。

矢印関数

矢印関数は関数を記述するためのより短い構文を提供し、独自の this コンテキストを持ちません。

const add = (x: number, y: number): number => x + y;

この例では、2 つの数値を加算する矢印関数を定義する方法を示します。

結論

TypeScript の関数は、コードをカプセル化して再利用するための強力な方法です。型注釈、オプションおよびデフォルトのパラメータ、関数のオーバーロード、矢印関数を使用することで、より堅牢で保守しやすいコードを作成できます。これらの基本を理解することで、プロジェクトで TypeScript の機能を最大限に活用できるようになります。

typescript 関数パラメータ型注釈戻り値 void オプションデフォルトオーバーロード矢印構文数値文字列