TypeScriptのジェネリクスにまつわるあれこれ：TypeScriptのTypeあれこれシリーズ（8）

altJS、すなわち、JavaScriptの代わりとなる言語の筆頭であるTypeScript。そのTypeScriptは、言語名が示す通り、JavaScriptにType、つまり、型の概念を持ち込んだものです。本連載では、このTypeScriptのType（型）に関して、さまざまな方向から紹介していきます。前回は、クラスの型に関するあれこれを紹介する最後として、クラス内での特殊なthisの使い方、抽象クラス、staticを紹介しました。今回は、クラスや関数を利用する段階で型の指定ができるジェネリクスについて、あれこれ紹介していきます。

[齊藤新三（著）／山田祥寛（監修），WINGSプロジェクト]

連載：TypeScriptのTypeあれこれシリーズ

ジェネリクスの型指定

　本連載ではジェネリクス（Generics）を既に利用しています。例えば、第2回のリスト5では、「Array<number>」という形で登場し、第4回のリスト6では、「Set<number>」という形で登場しています。その際は特に解説を加えていませんでした。そこで、ジェネリクスがどのようなものかということから、今回は話を始めていきます。

ジェネリクスとは

　先ほど例に挙げた第4回のリスト6にある「Set<number>」では、「< >」内でデータ型を記述しています。ここではnumberを指定していますが、プリミティブ型だけでなく、さまざまなデータ型を記述できます。このデータ型を記述することの意味は、利用する段階で利用する側がデータ型を指定できるということです。

【補足】ジェネリクスの名称

　「ジェネリクス」（Generics）という名称は、他に、「ジェネリック」（Generic）や「ジェネリック型」（Generic Type）など、さまざまな呼び方があります。内容的にはほぼ同じものを指しますが、プログラミング言語やドキュメントによって違ってきます。本稿では、TypeScriptの公式ドキュメントが、そのタイトルで「Generics」という表記を採用しているため、「ジェネリクス」とします。

　例に挙げたSetオブジェクトは、JavaScriptの組み込みオブジェクトの一つであり、集合を表します。配列と同様に、複数のデータをまとめるオブジェクトです。ただし配列とは違い、保持しているデータに重複がない状態を実現します。ということは配列と同様に、各要素にはどのようなデータを格納するのか、つまり各要素のデータ型が何であるかが大切です。そして、そのようなデータ型の指定は、Setを利用する段階でないと決定できません。そこで登場するのが、「<number>」という記述です。

　このように、あるオブジェクトが内部で利用するデータの型を、利用する段階で指定する仕組みがジェネリクスであり、「< >」内にその型を記述します。例えば、リスト1の（1）のコードを記述すると、各要素がnumber型のSetオブジェクトとなります。

const numberSet = new Set<number>();  // (1)
numberSet.add(56);  //  (2)
numberSet.add(48);  // (3)
numberSet.add("こんにちは");  // (4)

リスト1

　このnumberSetには、リスト1の（2）や（3）のように数値データは格納できますが、（4）の文字列データは格納できず、図1のエラーとなります。

図1　ジェネリクスの型指定と違う型データの格納でエラーとなった画面

　これが逆に、リスト2のようなジェネリクスの型指定でSetオブジェクトをnewした場合、（2）と（3）はエラーとなり、（4）はエラーとなりません（図2）。

const numberSet = new Set<string>();

リスト2

図2　図1とは逆にnumber型データの格納でエラーとなった画面

　このように利用する段階で型を指定でき、型に関してエラーの起きない（型安全な）コーディングのできる仕組みが、ジェネリクスです。

ジェネリクスを利用しない場合

　もちろん、リスト3のようにジェネリクスの型を指定せずにSetオブジェクトを利用することもできます。この場合は図3のように、数値も文字列も格納できてしまいます。