演習 - 関数を作成する - Training

5 分

この演習では、厳密に型指定されたパラメーターと戻り値を持つ 2 つの名前付き関数を作成します。

プレイグラウンドを開き、既存のコードがあれば削除します。
次の JavaScript 関数をプレイグラウンドにコピーします。パラメーター message の型は暗黙的に any であることに注意してください。
```
function displayAlert(message) {
    alert('The message is ' + message);
}
```
ここで、string 型を message パラメーターに割り当てます。この名前付き関数は値を返さないので、戻り値の型は省略できます (戻り値の型として void を渡すこともできますが、そうする必要はありません)。
```
function displayAlert(message: string) {
    alert('The message is ' + message);
}
```
関数を呼び出し、パラメーターとして string を渡してみます。次に、number を渡してみましょう。 TypeScript によってパラメーターの型チェックが行われ、矛盾が通知されます。この関数で実行しようとしている内容に応じて、数値を引用符で囲んだり、パラメーターによって許容される値の型を共用体型で拡張したり (msg: string | number など)、異なる型の値が渡された場合の処理ロジックを関数に追加したりすることができます。

次に別の例を示します。 sum 関数では、配列内の数値の合計が計算され、その結果が返されます。 JavaScript のコードをプレイグラウンドにコピーします。

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

sum(5) のように、パラメーターとして 1 つの数値を使用して関数を呼び出してみます。値は受け付けられますが、パラメーターを配列として渡していないため、正しい結果は返されません。

input パラメーターの型を number 値の配列に設定し、関数の戻り値の型を number に設定して、total 変数の型を number に設定します。

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

今度は、sum(5) で関数を呼び出すと、TypeScript によってパラメーターの型に関する問題が示されます。
sum([1, 'two', 3] のように、型が混在した値の配列を使用して関数を呼び出してみます。配列内の値は型チェックされ、TypeScript によって次のエラーが返されます: Type 'string' is not assignable to type 'number'.

続行

演習 - 関数を作成する

フィードバック