ジェネリクスの書き方

ジェネリクスは、関数、インタフェース、クラスなどと一緒に利用できます。

次の関数は指定された第一引数の値を、第二引数の数だけ含む配列を作って返すコードのサンプルです。

ジェネリクスの場合は名前の直後、関数の場合は引数リストの直前に、ジェネリクスの型パラメータを関数の引数のように（ただし、対になる不等号でくくる）記述します。下記のコードではT がそれにあたります。関数の宣言の場合は入出力の引数や関数本体の定義時に、Tがなんらかの型であるかのように利用できます。インタフェースやクラスの場合はメンバーのメソッドの宣言、クラスであればメンバーのフィールドやメソッドの実装の中で利用できます。

どの型が入ってくるかどうかは利用されるまではわかりませんが、T は実際に使うときに、全て同じ型名がここに入ります。

functionmultiply<T>(value:T,n:number):Array<T>{constresult:Array<T>=[];result.length=n;result.fill(value);returnresult;}

T にはstring など、利用時に自由に型を入れることができます。宣言文と同じように<> で括られている中に型名を明示的に書くことで指定できます。また、型推論も可能なので、引数の型から明示的に導き出せる場合には、型パラメータを省略することができます。

// -1が10個入った配列を作るconstvalues=multiply<number>(-1,10);// ジェネリクスの型も推論ができるので、引数から明示的にわかる場合は省略可能constvalues=multiply("すごい！",10);

ジェネリクスの型パラメータに制約をつける

ジェネリクスの型パラメータは列挙するだけの場合はどんな型の引数も受け入れるという意味になります。しかし、何かしらの特別な型のみを受け入れたいということがあるでしょう。ジェネリクスは動的に型が決まるといっても、デフォルトではunknown と同じように解釈されます。関数の本体の中で型パラメータのプロパティにアクセスするとエラーになります。

functionisTodayBirthday<T>(person:T):boolean{consttoday=newDate();// personの型は未知なのでgetBirthDay()メソッドがあるかどうか未定でエラーになるconstbirthDay=person.getBirthDay();returntoday.getMonth()===birthDay.getMonth()&&today.getDate()===birthDay.getDate();}

ここでは、getBirthDay() メソッドを持っている型ならなんでも受け入れられるようにしたいですよね？そのようなときは、extends を使ってTはこのインタフェースを満たす型でなければならないということを指定できます。

typePerson={getBirthDay():Date;}functionisTodayBirthday<TextendsPerson>(person:T):boolean{consttoday=newDate();// personの型は少なくともPersonを満たす型なのでgetBirthDay()メソッドが利用可能constbirthDay=person.getBirthDay();returntoday.getMonth()===birthDay.getMonth()&&today.getDate()===birthDay.getDate();}

このように書くことで、関数定義の実装時にエラーとなることはありません。また、利用時にも、この制約を満たさない場合にはエラーになります。

文字列などの合併型もextendsstring で設定できます。これで何かしらの文字列のみを型パラメータに指定できます。number にすれば数値も扱えます。

// 何かしらの文字列とその合併型だけを受け付けるfunctionaction<Textendsstring>(actionName:T){:}action<keyofActionList>("register");

extends に合併型を設定すればさらに特定の文字列だけに限定できます。

型パラメータの自動解決

TypeScriptの処理系は入力値の型などから型パラメータを推論しようとします。すべての型が解決可能であれば、型パラメータの指定を省略できます。また、型パラメータ同士で影響を与え合う（制約を与え合う）ような型パラメータの制約も書くことができます。その場合も、お互いの情報や引数の情報を元に、お互いに推論できるところから推論していって、自動解決できるものを解決していきます。

次のsetValue は何やら不思議な型定義になっています。このうち、T はオブジェクトの型、K はオブジェクトのプロパティ名の合併型で、U はオブジェクトのプロパティの方の型を表しています。やっていることは、オブジェクトの型にマッチした代入をするだけのなんの変哲も無い（役に立たない）コードです。

functionsetValue<T,KextendskeyofT,UextendsT[K]>(obj:T,key:K,value:U){obj[key]=value;}

Visual Studio CodeやTypeScriptのPlaygroundのページで次のsetValue 呼び出しを書いてみてください。まず、最初の引数にpark をタイプすると、型T が決まります。そうなると、ポップアップする引数key の型は"name"|"hasTako" に、value の型はstring|boolean になります。次に、二つ目の引数に"name" をタイプすると、value の型はstring となります。このように連鎖的にパズルを解くようにTypeScriptの処理系は型の制約を解決していきます。

constpark:ParkForm={name:"恵比寿東",hasTako:true};setValue(park,"name","神明児童遊園");

ただし、型パラメータで設定することを期待しているのか、それとも引数だけからすべてを解決していけるように設計されているのかは一目見て理解するのは難しいので、どういった意図のコードになっているのかはドキュメントやサンプルコードで伝えるようにしたほうが良いでしょう。

ジェネリクスの文法でできること、できないこと

ジェネリクスでできることを一言で言えば、利用する側の手間を減らしつつ、型チェックをより厳しくすることです。ジェネリクスを使うと、引数の型によって返り値の型が変わるとか、最初の引数の型によって、別の引数の型が変わるとか、そういったことが実現できます。また完全に自由にするのではなく、特定の条件を満たす型パラメータのみを受け取ることも指定できましたよね。

一方でできないこともあります。C++のテンプレートのように、指定された型によってロジックを切り替えるといったことはできません。例えば、要素の型とで、要素数が型パラメータで設定できる固定長配列などはジェネリクスやテンプレートで簡単に実現できます。C++の場合は、例えば要素が32ビットの数値で要素数が4の場合だけSIMDを使って足し算を高速化するといった「特殊化」ができますが、ジェネリクスではそのようなことはできません。

また、即値の数値を型パラメータに入れることもC++ではできましたし、それの演算もできます。C++では特殊化と組み合わせて、次のような数学の漸化式のような型定義もできます。これにより、4次元配列でも5次元配列でも簡単に作り出すことがC++では可能ですし、これを駆使したテンプレートメタプログラミングという技法も編み出されましたが、これもTypeScriptには不可能です。

• n次元配列はn-1次元配列の配列

• 1次元配列は普通の配列（特殊化）

TypeScriptの文法のうち、型宣言などのJavaScriptから追加されたものは、基本、そのまま切り落とせば単なるJavaScriptになる、というのが原則としてありました。ジェネリクスについても同様ですので、型で実装を分岐というJavaScriptにないことはできません。

型変換のためのユーティリティ型

TypeScriptでは組み込みの型変換のためのジェネリクスのユーティリティ型を提供しています。詳細なリファレンスは本家のハンドブックの中のUtility Typesにあります 。

constuserDiff:Partial<User>={organization:"Future Corporation"};

constviewItems:Pick<User,"name"|"gender">={name:"Yoshiki Shibukawa",gender:"male"};

constyear:NonNullable<string|number|undefined>="昭和";

any やunknown 、合併型との違い

未知の型というと、any やunknown が思いつくでしょう。また、複数の型を受け付けるというと、合併型もあります。これらとジェネリクスの違いについて説明します。

any やunknown の変数に値を設定してしまうと、型情報がリセットされます。取り出すときに、適切な型を宣言してあげないと、その後のエラーチェックが無効になったり、エディタの補完ができません。

次の関数は、初回だけ指定の関数を読んで値を取って来るが、2回目以降は保存した値をそのまま返す関数です。初回アクセスまで初期化を遅延させます。

functionlazyInit(init:()=>any):()=>any{letcache:any;letisInit=false;returnfunction():any{if(!isInit){cache=init();isInit=true;}returncache;}}

any 版を使って見たのが次のコードです。

constgetter=lazyInit(()=>"initialized");constvalue=getter();// valueはany型なので、上記のvalueの後ろで.をタイプしてもメソッド候補はでてこない

この場合、cache ローカル変数に入っているのは文字列ですし、value にも文字列が格納されます。しかし、TypeScriptの処理系はany に入るだけで補完をあきらめてしまいます。

次のジェネリクス版を紹介します。ジェネリクス版は入力された引数の情報から返り値の型が正しく推論されるため、返り値の型を使うときに正しく補完できます。

functionlazyInit<T>(init:()=>T):()=>T{letcache:T;letisInit=false;returnfunction():T{if(!isInit){cache=init();isInit=true;}returncache;}}

constgetter=lazyInit(()=>"initialized");constvalue=getter();// valueはstring型なので、上記のvalueの後ろで.をタイプするとメソッド候補が出てくる

合併型についても、型の補完時に余計な型情報がまざってしまうため、型ガードで必要な型である保証が必要です。また、ジェネリクスには2つの引数があって両方の型が同じ、という保証もしやすいメリットがあります。

まとめ

ジェネリクスについて紹介しました。

基本的に、画面を量産するという仕事ではなく、共通ライブラリを作り出すとか、そういったタスクで活躍する中級向けの機能です。作り込めば作り込むほど、使う人にやさしく、間違った情報が入れにくい関数やクラス、インタフェースが作れます。

一方で、型情報の作り込みは読みにくいコードに直結します。書いているときには良いのですが数日後にいじるのが少し難しいコードになりがちです。凝った正規表現に近いものがあると思います。