typescript

TypeScriptの型定義ファイルとは何ぞや

Angularのスケルトンをng newコマンドで作成すると、package.jsonファイルに@から始まるTypeScriptの型定義ファイルがインストールされるように記載されています。一例をあげると


"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",

こんな感じです。それらのファイルの中を見るとd.tsファイルがあり、このファイルにTypeScript用の型が定義されています。この型定義ファイルとは何なのかをAngular 2 Development with TypeScript を元に解説していきたいと思います。

Angular 2 Development with TypeScript
Yakov Fain Anton Moiseev
Manning Publications
売り上げランキング: 132,115

型定義ファイルとは

型定義ファイルの目的については以下のように書かれています。

The purpose of these files is to let the TypeScript compiler know the types expected by the APIs of these libraries.
それらのファイルの目的は、TypeScriptコンパイラにライブラリのAPIから期待されるであろう型を教えることにあるのである

とあります。多くのライブラリは素のJavaScriptで使われる事を想定しており、TypeScript上で使われることは想定されていません。そうすると、それらのライブラリをTypeScript上で使うと、せっかくの厳格な型チェックの恩恵にそれらのライブラリが与る事ができなくなってしまうのです。そのため、ライブラリとは別にTypeScriptのコンパイラ用に、各APIの型だけを記述したファイルが用意されているのです。

また型定義ファイルがあれば、IDEにもそのAPIの引数情報などを通知出来るので、コードの補完も容易になるというメリットもあります。

むろん、ライブラリの中には最初から型定義ファイルが含まれているものもあり、AngularはTypeScriptで開発される事を想定しているので、当然最初から用意されています。

型定義ファイルを個別にインストールする

TypeScript 2.0以前は、型定義ファイルはtsdTypingsというツールを使ってインストールしていました。しかし

With the release of TypeScript 2.0, there’s no need to use type-definition managers for npm-based projects. Now the npmjs.org npm repository includes a @types organization thet stores type definitions for the popular JavaScript libraries.
TypeScript 2.0のリリースによって、npmを利用したプロジェクトに型定義ファイルマネージャーは不要となった。現在ではnpmjs.org npmレポジトリが人気のJavaScriptライブラリの型定義ファイルを包含している。

とあり、通常のnpmコマンドで型定義ファイルはインストールできるようになっています。

仮にjQueryをTypeScript上で使うとなった場合、jQueryの型定義ファイルは以下のコマンドでインストールできます。

npm install @types/jquery --save-dev

繰り返しますがAngularフレームワーク自体には型定義ファイルが最初から入っており、別途インストールする必要はありません。