TypeScriptでのジェネリックの制約

前のレッスンの一つで、渡されたパラメータの長さを出力するジェネリック型の関数を作成しました。しかし、すべての型が長さを持つわけではないため、コンパイル時にエラーが発生しました。

function myFunc < T > (data: T): T {
	console.log(data.length); // エラー
	return data;
}

その場合、ジェネリック型をジェネリック配列型に変更することで問題を解決しました。しかし、TypeScriptにはジェネリックに制約を作成する機能があります。これを行うには、山括弧内で変数 T の後にキーワード extends を書きます。その後、波括弧内に新しい文字列型の変数 str を記述します。関数の残りのコードは変更なしで残ります。

function myFunc <T extends {str: string}> (data: T): void {
	console.log(data.str.length);
}

つまり、ジェネリック型は波括弧内で指定された変数 str の型を継承します。それでは、関数の動作を確認し、型 str を参照する変数 myStr を作成し、波括弧内で値を設定しましょう。

let myStr: {str: string} = {str: 'abcde'};

再度型を指定し、パラメータとして変数 myStr を渡すことを忘れずに、関数 myFunc を呼び出してみましょう。

myFunc <{str: string}> (myStr);

レッスンで説明した例に基づいて、数値配列の長さを求める関数を定義してください。