一番手抜きな型付け:any

費用対効果を考えましょう、と言われても、意思決定の幅がわからないと、どこが良いのか決断はできません。最初に、一番費用が少ない方法を紹介します。それがanyです。anyと書けば、TypeScriptのコンパイラは、その変数のチェックをすべて放棄します。

functionsomeFunction(opts:any){// debugがあるかどうかチェックしないので// コンパイルエラーにならないconsole.log(opts.debug);}

ただし、これを使うと、TypeScriptが提供する型チェックの恩恵は受けられません。anyから型情報つきのデータにするためには後述の型ガードや型アサーションで変換しなければなりません。利用する箇所で毎回必要になります。TypeScriptの型情報は伝搬するので、なるべく早めに、データが発生する場所で型情報を付ければ、変換が不要になります。そのため、よっぽどの理由がないかぎりはanyを使わない方がトータルの実装コストは大きく減ります。実際にTypeScriptできちんと回っているプロジェクトの場合、ESLintでanyを使っていたらエラーにすることになるでしょう。

消極的な利用方法としては、すでにJavaScriptとして動作していて実績があるコードをTypeScriptにまずは持ってくる、というケースが考えられます。あとは、メインの引数ではなくて、挙動をコントロールするオプションの項目がかなり複雑で、型定義が複雑な場合などです。例えば、JSONSchemaを受け取るような引数があったら、JSONSchemaのすべての仕様を満たす型定義を記述するのはかなり時間を要します。将来やるにしても、まずはコンパイルだけは通したい、というときに使うと良いでしょう。

以前はanyの用途だったところの大部分はunknownでカバーできます。

未知の型:unknown

unknown はany と似ています。unknown 型の変数にはどのようなデータもチェックなしに入れることができます。違うのはunknown の場合は、その変数を利用する場合には、型アサーションを使ってチェックを行わないとエラーになる点です。型アサーションについてはこの章の最後で扱います。後述するユーザー定義の型ガードの引数はunknownとするとよいでしょう。これは「型がわからないデータの型を診断する」関数ですので、引数はunknownとなります。

unknownはもう一箇所出てくる可能性のある場所があります。ジェネリクスを使ったクラスや関数のうち、自動で型推論で設定できなかったものはunknownとなります。この型変数のunknownに関してはエラーチェックなどが行われることがなく、anyのように振舞います。型推論で自動設定される予定の型変数がunknownになってしまったのであれば、コーディングのミスが発生したものと考えられます。

unknownに対して許可される操作はかなり限定されます。ピリオドを使ってメンバーアクセスをしたり、メソッド呼び出しをしようとするとコンパイルエラーになります。

// nullチェックやArray.isArray, typeof, instanceofは可能u!==null;// OKArray.isArray(u);// OKtypeofu==="string";// OKarginstanceofMap;// OK// 属性のinチェックはobjectでなおかつnullでない確認をしたらOK"param"inobj;// エラーtypeofobj==="object"&&"param"inobj;// エラーtypeofobj==="object"&&obj!==null&&"param"inobj;// OK

なお、オブジェクトの属性アクセスはそのままではどのような検証を行ってもエラーになります。

if(typeofobj==="object"&&obj!==null&&"param"inobj){// この書き方はエラーになるif(typeof(obj.param)==="string"){returntrue;}// この書き方もエラーになるif(typeof(obj["param"])==="string"){returntrue;}}

この動作は厳しすぎると思われますが、現状の実装ではこうなっています。改善の要望もでていたりします。

型ガードの実装などで、属性の型もチェックしたいのであれば、現状はasを使う方法がシンプルです。

functionisPerson(arg:unknown):argisPerson{if(typeof(arg)==="object"&&arg!==null){// ここで任意のキーを持つオブジェクト型にするconstobj:{[key:string]:any}=arg;// そうすると、ここで属性へのアクセスがエラーとならなくなるreturntypeof(obj["name"])==="string"&&typeof(obj["age"])==="number";}returnfalse}

型に名前をつける

type名前= という構文を使って、型に名前をつけることができます。名前には、通常の変数や関数名として使える名前が使えます。ここで定義した型は、変数定義や、関数の引数などで使えます。

// 型は合併型で複数列挙できるtypeBirthYear=number|string;// 型には値も設定できるtypeFoodMenu="北極"|"冷やし味噌";// 変数や関数の引数で使えるconstbirthday:BirthYear="平成";functionorderFood(food:FoodMenu){}

使い回しをしないのであれば型名の代わりに、すべての箇所に定義を書いていってもエラーチェックの結果は変わりません。また、TypeScriptは型名ではなく、型の内容で比較してチェックを行うため、別名の型でも、片方は型で書いて、片方は直接書き下したケースでも問題なくチェックされます。

typeFoodMenu="北極"|"冷やし味噌";constmyOrder:FoodMenu="北極";functionorderFood(food:"北極"|"冷やし味噌"){console.log(food);}orderFood(myOrder);

関数のレスポンスや引数で使うオブジェクトの定義

type はオブジェクトが持つべき属性の定義にも使えます。属性には型をつけることができます。

typePerson={name:string;favoriteBank:string;favoriteGyudon:string;}// 変数定義時にインタフェースを指定constperson:Person={name:"Yoichi",favoriteBank:"Mizuho",favoriteGyudon:"Matsuya"};

このように型定義をしておくと、関数の引数などでもエラーチェックが行われ、関数の呼び出し前後での不具合発生を抑えることができます。

// 関数の引数がPerson型の場合registerPerson({name:"Yoichi",favoriteBank:"Mizuho",favoriteGyudon:"Matsuya"});// レスポンスがPerson型の場合const{name,favoriteBank}=getPerson();

もし、必須項目のfavoriteBank がなければ代入する場所でエラーが発生します。また、リテラルで書く場合には、不要な項目があってもエラーになります。

constperson:Person={name:"Yoichi"};// error TS2741: Property 'favoriteBank' is missing in//   type '{ name: string; }' but required in type 'Person'.

JavaScriptでは、多彩な機能を持つ関数を定義する場合に、オプションとなるパラメータをオブジェクトで渡す、という関数が数多くありました。ちょっとタイプミスしてしまっただけで期待通りの結果を返さないでしばらく悩む、といったことがよくありました。TypeScriptで型の定義をすると、このようなトラブルを未然に防ぐことができます。

オブジェクトの属性の修飾: オプション、読み込み専用

typePerson={name:string;readonlyfavoriteBank:string;favoriteGyudon?:string;}

名前の前にreadonlyを付与すると、属性の値が読み込み専用になり、書き込もうとするとエラーになります。また、名前の後ろに? をつけることで、省略可能な属性であることを示すことができます。

これらにより、データの有無を柔軟にしたり、意図せぬ変更を抑制してバグを減らしたりする効果があります。

型ユーティリティを使えば、一度定義した型のすべての属性に一括して?をつけたり、readonlyをつけることもできます。

typePerson={name:string;favorite:string;};// Partialをつけたので、全ての要素を設定しなくてもよいconstwzz:Partial<Person>={name:"wzz"};// Readonlyになったので要素の書き換えが不可にconstbow:Readonly<Person>={name:"bow",favorite:"よなよなエール"};bow.favorite="水曜日の猫";// Cannot assign to 'favorite' because it is a read-only property.

属性名が可変のオブジェクトを扱う

これまで説明してきたのは、各キーの名前があらかじめ分かっている、他の言語で言うところの構造体のようなオブジェクトです。しかし、このオブジェクトは辞書のようにも使われます。今時であればMap 型を使う方がイテレータなども使えますし、キーの型も自由に選べて良いのですが、例えば、サーバーAPIのレスポンスのJSONなどのようなところでは、どうしてもオブジェクトが登場します。

その時は、{[key:キーの型]:値の型} と書くことで、辞書のように扱われるオブジェクトの宣言ができます。なお、key の部分はなんでもよく、a でもb でもエラーにはなりませんが、key としておいた方がわかりやすいでしょう。

constpostalCodes:{[key:string]:string}={"602-0000":"京都市上京区","602-0827":"京都市上京区相生町","602-0828":"京都市上京区愛染寺町","602-0054":"京都市上京区飛鳥井町",};

なお、キーの型にはstring 以外にnumber なども設定できます。その場合、上記の例だとエラーになりますが、"6020000" （ダブルクオートがある点に注意）とするとエラーがなくなります。一見数値が入っているように見えますが、JavaScriptのオブジェクトのキーは文字列型ですので、Object.keys() とかObject.entries() で取り出すキーの型まで数字になるわけではなく、あくまでも文字列です。数値としても認識できる文字列を受け取る、という挙動になります。

AかつBでなければならない

A|B という記法（合併型）を紹介しました。これは「AもしくはB」という意味です。コンピュータの論理式では「AかつB」というのがありますよね？TypeScriptの型定義ではこれも表現できます。& の記号を使います。

typeTwitter={twitterId:string;}typeInstagram={instagramId:string;}constshibukawa:Twitter&Instagram={twitterId:"@shibu_jp",instagramId:"shibukawa"}

これは交差型（Intersection Type）と呼ばれ、両方のオブジェクトで定義した属性がすべて含まれないと、変数の代入のところでエラーになります。

もちろん、合成した型に名前をつけることもできます。

typePartyPeople=Twitter&Instagram;

タグ付き合併型: パラメータの値によって必要な属性が変わる柔軟な型定義を行う

TypeScriptの型は、そのベースとなっているJavaScriptの動的な属性を包括的に扱えるように、かなり柔軟な定義もできるようになっています。高速な表描画ライブラリのCheetahGrid1では、カラムの定義をJSONで行うことができます。

constgrid=newcheetahGrid.ListGrid({parentElement:document.querySelector('#sample2'),header:[{field:'number',caption:'number',columnType:'number',style:{color:'red'}},{field:'check',caption:'check',columnType:'check',style:{uncheckBgColor:'#FDD',checkBgColor:'rgb(255, 73, 72)'}}],});

columnType の文字によって定義できるstyle の項目が変わります。今は、number と、check がありますね。check の時はuncheckBgColor とcheckBgColor が設定できますが、number はそれらがなく、color があります。本物のCheetahGridはもっと多くの属性があるのですが、ここでは、このルールだけを設定可能なインタフェースを考えてみます。簡略化のために属性の省略はないものとします（ただ?をつけるだけですが）。

TypeScriptのインタフェースの定義では「このキーがこの文字列の場合」という指定もできましたね。次の定義は、チェックボックス用の設定になります。columnType:'check' という項目があります。

typeCheckStyle={uncheckBgColor:string;checkBgColor:string;}typeCheckColumn={columnType:'check';caption:string;field:string;style:CheckStyle;}

数値用のカラムも定義しましょう。

typeNumberStyle={color:string;}typeNumberColumn={columnType:'number';caption:string;field:string;style:NumberStyle;}

上記のカラム定義の配列にはチェックボックスと数値のカラムの両方が来ます。どちらかだけの配列ではなくて、両方を含んでも良い配列を作ります。その場合は、合併型を使って、その配列と定義すれば、両方を入れてもエラーにならない配列が定義できます。ここではtype を使って、合併型に名前をつけています。それを配列にしています。

// 両方の型を取り得る合併型を定義typeColumn=CheckColumn|NumberColumn;// 無事、エラーを出さずに過不足なく型付けできたconstheader:Column[]=[{field:'number',caption:'number',columnType:'number',style:{color:'red'}},{field:'check',caption:'check',columnType:'check',style:{uncheckBgColor:'#FDD',checkBgColor:'rgb(255, 73, 72)'}}];

このように、一部の属性の値によって型が決定され、どちらかの型かが選択されるような合併型を、タグ付き合併型（Tagged Union Type）と呼びます。

typeStyle={color?:string;uncheckBgColor?:string;checkBgColor?:string;}typeColumn={columnType:'number'|'check';caption:string;field:string;style:Style;}

1

https://github.com/future-architect/cheetah-grid

型ガード

静的な型付け言語では、どんどん型を厳しく付けていけばすべて幸せになりますよね！というわけにはいかない場面が少しだけあります。

TypeScriptでは、今まで見て来た通り、少し柔軟な型を許容しています。

• 数値型か、あるいはnull

• 数字型か、文字列

• オブジェクトの特定の属性columnType が'check' という文字列の場合のみ属性が増える

この複数の型を持つ変数を扱うときに、「2通りの選択肢があるうちの、こっちのパターンの場合のみのロジック」を記述したいときに使うのが型ガードです。

一般的な静的型付け言語でも、ダウンキャストなど、場合によってはプログラマーが意思を入れて型の変換を行わせることがありえます。場合によっては、うまく変換できなかったときに実行時エラーが発生しうる、実行文です。

例えば、Goの場合、HTTP/2の時はhttp.ResponseWriter はhttp.Pusher インタフェースを持っています。これにキャストすることで、サーバープッシュが実現できるというAPI設計になっています。実行時にはランタイムが型を見て変数に値を代入するなどしてくれます。

http.HandleFunc("/",func(whttp.ResponseWriter,r*http.Request){ifpusher,ok:=w.(http.Pusher);ok{// ↑こちらでキャスト、成功するとbool型のok変数にtrueが入るpusher.Push("/application.css",nil);}})

しかし、TypeScriptのソースコードはあくまでも、JavaScriptに変換されてから実行されます。型情報などを消すだけでJavaScriptになります。TypeScriptのコンパイラが持つインタフェースやtype などの固有の型情報は実行時にはランタイムには存在しません。そのため、「このオブジェクトがこのインタフェースを持っているとき」という実行文は他の言語のようにそのまま記述する方法はありません。

TypeScriptがこれを解決する手段として実装しているのが、型ガードという機能です。型情報を全部抜くと単なるJavaScriptとしても有効な文ですが、TypeScriptはこの実行文の文脈を解析し、型の選択肢を適切に絞り込んでいきます。これにより、正しいメソッドが利用されているかどうかを静的解析したりできますし、開発時においても、コード補完も正常に機能します。

// userNameOrIdは文字列か数値letuserNameOrId:string|number=getUser();if(typeofuserNameOrId==="string"){// このif文の中では、userNameOrIdは文字列型として扱われるthis.setState({userName:userNameOrId.toUpperCase()});}else{// このif文の中では、userNameOrIdは数値型として扱われるconstuser=this.repository.findUserByID(userNameOrId);this.setState({userName:user.getName()});}

typeColumn=CheckColumn|NumberColumn;functiongetValue(column:Column):string{if(column.field==='number'){// ここではcolumnはNumberColumn型}else{// ここではcolumnはCheckColumn型}}

functionisArray(arg:unknown):argisArray<any>{returnArray.isArray(arg);}

constpage:any={name:"profile page"};// any型からはasでどんな型にも変換できるconstname:string=pageasstring;

keyof とMapped Type: オブジェクトのキーの文字列のみを許容する動的な型宣言

この項目は中級者向けの項目になります。一般的にはジェネリクスと一緒に使うことが多い機能です。

JavaScriptは動的なオブジェクトを駆使してプログラミングをしてきました。そのオブジェクトが他の言語でいう構造体、あるいはレコード型のように特定の属性を持つことが分かっている用途でのみ使われるのであれば今まで説明してきた機能だけで十分に利用できます。

一方、Map のように、何かしらの識別子をキーにして子供として要素を持つデータ構造として使われているケースなどもあります。例えばフォームのIDとその値をオブジェクトとして表現する場合は、フォームごとに項目が変わります。そのような用途では、「このキーがある」「このキーのみを対象としたい」「このキーの型情報」みたいな型宣言がしたくなります。keyof を使うとこのようなケースでの柔軟性があがります。

typePark={name:string;hasTako:boolean;};// Parkのキーである、 "name" | "hasTako"が割り当てられるtypeKey=keyofPark;// 指定されたキー以外はエラーになるconstkey:Key="name";// 1行でも書けるconstkey:keyofPark="hasTako";// 値の方の型も取れる(stringになる)typeParkName=Park["name"];// 指定されたキー以外はエラーになるconstkey:keyofPark="name";

また、オブジェクトのキー全部に対して型定義をすることもできます。構造としては次のように書きます。オブジェクトのキーは[] でくくることで式を書くことができました。それの文法と似た書き方になっています。Kというのがキー名の変数で、in によるループの要素が1つずつ入るイメージです。

// 基本の書き方{[KinkeyofObject]:プロパティの型}// 入力のObjectとキーは同じだがバリデーション結果を返す（値はすべてboolean）{readonly[KinkeyofObject]:boolean}// 入力のObjectとまったく同じものをこの記法で書いたもの{[KinkeyofObject]:Object[K]}// 入力のObjectとまったく同じだが読み込み専用{readonly[KinkeyofObject]:Object[K]}

なお、readonly を付与するのはジェネリクスなユーティリティ型Readonly<T> というものがあるので実際にこのコードを書くことはないでしょう。

以下のコードが読み込み専用の型定義になります。

typeParkForm={name:string;hasTako:boolean;};// 値を全て読み込み専用にした型typeFrozenParkForm={readonly[KinkeyofParkForm]:ParkForm[K]};constform:FrozenParkForm={name:"恵比寿東",hasTako:true};// 読み込み専用なのでエラーになるform.name="和布刈公園"

インタフェースを使った型定義

オブジェクトの型をつける方法には、type を使う方法以外に、インタフェース定義を使った方法もあります。インタフェースは基本的には、Java同様に他の章で紹介するクラスのための機能ですが、ほぼ同じことができますし、世間のコードではこちらの方もよく見かけます。

interfacePerson{name:string;favoriteBank:string;favoriteGyudon?:string;}

前述の型を合成する方法についても、二つのインタフェースの継承でも表現できますが、あまり見かけたことはありません。

interfacePartyPeopleextendsTwitter,Instagram{}constshibukawa:PartyPeople={twitterId:"@shibu_jp",instagramId:"shibukawa"}

もしTypeScriptの型を付けるのがコストが高いと感じたら？

TypeScriptは既存のJavaScriptの使い方のすべてをカバーできるように機能を拡充しています。例えば、関数ではあるが属性を持つものや同じ関数が引数によって様々な型を返す可能性があるケースなど、他の静的型を最初からもって生まれた言語ではまずみないような物にも型付けができるようになっています。しかし、できることと、少ないコストでもできる、という2つには差があります。

通常であれば外部からの入出力や関数の入り口の宣言程度で済むはずで、実装コードの中の大部分は明示的に型を指定しなくても、推論で終了することが多いです。それでも済まないのは主に4つの理由が考えられます。

1. 利用するライブラリがTypeScriptの型定義ファイルを用意していないケース。近年ではどんどん減っていますが、もし用意されていないのであれば型定義を自分で起こしたり、関数のレスポンスに自分で型定義を行う必要があるため、手間が増えます。

2. ライブラリの使用方法がTypeScriptフレンドリーではないケース。Redux-Toolkitではない通常のReduxでは、ステートやアクションの型定義を利用者側が細かく用意しなければなりません。Reactもクラスコンポーネントよりは関数コンポーネントの方が開発者が設定しなければならない型注釈は少なくて済みます。JavaScript時代に作られたライブラリによってはTypeScriptの型推論が効きにくいことがあります。例えば、SwaggerやOpenAPIで型定義を行っているケースで、requiredが適切に付与されていないと、すべての属性が|undefined付きになります。不要なOptionalは、型ガードやアサーションが大量に必要になります。

3. 同一の変数に多様な型のものを入れようとしていたり、関数の引数や返り値も多様なものを返しているケース。nullか何かしらのインスタンスか、ぐらいであれば、その関数の内部の実装や、利用者側のコードで型注釈が必要になることはごくまれです。特に返り値の型の種類が多様になる場合は要注意です。

4. 多様な型を取り扱うためにジェネリクスなどの高度な型定義が必要になるケース。3のケースに付随してそれをカバーするためのコードが複雑になる場合です。

TypeScriptでわざわざ型情報を付与するのは、コーディングでコード補完によるすばやいコーディングを実現したり、コードを入力中やコンパイルで問題をすばやく解決し、不具合の検出にかかる時間を節約するためだったり、工数の削減が目的です。もし、工数が余計にかかるというのは、高コストなのはコードの設計が「読むときのコンテキスト次第で状態が変わる」ような設計が原因のことがほとんどだと思うので、型付けがシンプルになるように設計を直していくべきという指標になりえます。

あと、TypeScriptのコンパイル（型チェック）は通るのに、実行時にエラーになるケースは、asなどで手動で付けた型情報のミスが原因です。型チェックが信用できないので実行時に自分でinstanceofなどで型を見ざるをえないのであれば、それは上流の型定義を直していきましょう。TypeScriptのコンパイラがおかしい、信用できない、と思ったときは99%利用者側の責任でしょう。

まとめ

基本的な型付けの作法、とくにオブジェクトに対する型付けを学びました。JavaScriptの世界では、プログラムのロジック以上に、柔軟なデータ構造を活用したコーディングが他の言語以上に行われていました。そのため、ここで紹介した機能は、そのJavaScriptの世界に型を設定していくうえで必要性の高い知識となります。

これから紹介するクラスの場合は、実装時に自然と型定義もできあがりますが、TypeScriptではクラスに頼らない関数型スタイルのコーディングも増えています。このオブジェクトの型付けは関数の入出力でも力を発揮するため、身につけておいて損はないでしょう。