TypeScript で関数を作成する

5 分

JavaScript では、関数の定義において、パラメーターのデータ型の指定、渡される引数の型チェックの実行、または受け取った引数の数の確認は行われません。したがって、これらのパラメーターをチェックするためのロジックを関数に追加する必要があります。

TypeScript を使用すると、パラメーターと戻り値の型を指定できるようになるため、関数の開発が簡素化され、トラブルシューティングが容易になります。 TypeScript では、パラメーターの新しいオプションも追加されています。たとえば、JavaScript 関数ではすべてのパラメーターは省略可能ですが、TypeScript ではパラメーターを必須にするか省略可能にするかを選択できます。

関数に型を追加すると、関数に渡してはならない値が渡されるのを防ぐのに役立ちます。型指定された関数は、大規模なコードベースまたは他のユーザーによって開発された関数を使用する場合に特に重要です。型の追加は簡単な違いですが、関数に渡す値と返される値の型チェックが行われるという利点があります。正しい値の型が関数に渡されたこと、および戻り値が正しいことを確認するためのすべてのロジックを関数に追加する必要がなくなり、値の型が正しいことはコードの開発時に TypeScript によって保証されます。さらに、エディターによってパラメーターのデータ型が認識されるので、関数のロジックを作成するときに、オートコンプリートが完全にサポートされます。これは、JavaScript では通常は検出できないものです。オートコンプリートは、必要な入力と出力の型が TypeScript によって明確にされるため、他のユーザーによって開発された関数を使うときに特に役立ちます。

JavaScript と同様に、TypeScript でもいくつかの異なる方法で関数を定義できます。 TypeScript での型の追加についてこれらの関数がどのようにの違うかを見てみましょう。

名前付き関数

名前付き関数は、function キーワードを使用して記述され、現在のスコープ内で個別の名前を指定された関数宣言です。名前付き関数の宣言は、コードが実行される前に実行コンテキストに読み込まれます。このプロセスはホイスティングと呼ばれ、関数をその宣言前に使用できることを意味します。

TypeScript で名前付き関数を宣言する構文は、JavaScript での定義と同じです。 TypeScript との唯一の違いは、関数のパラメーターと戻り値に型の注釈を指定できることです。

この関数は、number 型の 2 つのパラメーターを受け取り、number を返します。

function addNumbers (x: number, y: number): number {
   return x + y;
}
addNumbers(1, 2);

匿名関数

関数式 (または匿名関数) は、実行コンテキストに事前に読み込まれない関数であり、コードによって検出された場合にのみ実行されます。 function 式は実行時に作成され、呼び出す前に宣言する必要があります。プログラムの実行が開始されるとすぐにホイストされ、宣言の前に呼び出すことができる名前付き関数宣言とは異なり、それらはホイストされません。

関数式は値を表すので、通常、変数に割り当てられたり、他の関数に渡されたり、匿名にすることができます。つまり、関数には名前がありません。

この例では、function 式が変数 addNumbers に割り当てられています。関数名の代わりに function が使用され、関数が匿名になっていることに注意してください。これにより、この変数を使用して関数を呼び出すことができるようになります。

let addNumbers = function (x: number, y: number): number {
   return x + y;
}
addNumbers(1, 2);

次の例では、名前付き関数 sum を匿名関数として記述するとどのようになるかを示します。名前 sum がキーワード function に置き換えられ、関数が変数宣言で式として実装されていることに注意してください。

let sum = function (input: number[]): number {
    let total: number =  0;
    for(let i = 0; i < input.length; i++) {
        if(isNaN(input[i])) {
            continue;
        }
        total += Number(input[i]);
    }
    return total;
}

console.log(sum([1, 2, 3]));

前と同様に、匿名関数を使用すると、型チェックと Intellisense を利用できます。また、この例では変数 sum は型指定されていませんが、TypeScript では、型の推定の 1 つの形式である "コンテキスト型指定" と呼ばれるものによって型を特定できます。コンテキスト型指定を使うと、プログラムの型指定を維持するために必要な作業を減らすことができます。

アロー関数

アロー関数 (その定義に使用される => 演算子のため、ラムダ関数またはファットアロー関数とも呼ばれます) を使用すると、匿名関数を定義するための略式の構文が提供されます。アロー関数は簡潔なため、多くの場合、単純な関数や一部のイベント処理シナリオで使用されます。

この例は、匿名 function の構文と、単一行のアロー関数を比較したものです。アロー関数では、function キーワードを省略し、パラメーターと関数本体の間に => 演算子を追加することによって、構文が短縮されます。

// Anonymous function
let addNumbers1 = function (x: number, y: number): number {
   return x + y;
}

// Arrow function
let addNumbers2 = (x: number, y: number): number => x + y;

この例では、中かっこが削除され、return ステートメントが存在しないことにも注意してください。単一行のアロー関数では、簡潔本体構文 (暗黙の戻り値) を使用でき、中かっこと return キーワードを省略できます。

関数本体に複数の行がある場合は、中かっこで囲み、return ステートメントを使用します (該当する場合)。この例は、前の例の匿名関数をアロー関数として記述するとどのように見えるかを示しています。

let total2 = (input: number[]): number => {
    let total: number =  0;
    for(let i = 0; i < input.length; i++) {
        if(isNaN(input[i])) {
            continue;
        }
        total += Number(input[i]);
    }
    return total;
}

ヒント

アロー関数は ES2015 で導入されたものであるため、すべてのブラウザーがサポートするわけではありません。 TypeScript を使用すると、これらの関数型を利用してから、必要に応じて以前のバージョンの JavaScript にトランスパイルすることができ、コードは古いブラウザーで動作します。

続行

名前付き関数

匿名関数

アロー関数

フィードバック