TypeScriptを使って開発してるプロジェクトに参加した時、@types/ から始まる名前のパッケージがたくさんあって、なんだろこれ？ってなったので調べてみました。

@types/から始まる名前のパッケージとは

JavaScriptのライブラリに型定義を付与する、型定義ファイルが入ったパッケージです。

TypeScriptで開発中、JavaScriptのライブラリを使いたい時が多々あります。
しかし、JavaScriptは動的型付け言語なのに対し、TypeScriptは静的型付け言語です。
そのままimportしても型定義が存在しないため（暗黙的にany型として扱われる）、エラーの検出ができなかったり、エディタの補完が非力になってしまいと、TypeScriptのメリットが薄れてしまいます。
この問題を解消させるため、JavaScriptのライブラリ本体に加えて、型定義ファイルが入った @types/ から始まる名前のパッケージを入れます。

あくまでも型定義をできるようにする事が目的のパッケージなので、JavaScriptのライブラリ本体は入っていません。（例えば、@types/reactをインストールしてもreact本体はインストールされない）

どんなパッケージが公開されているかどうか調べるときはTypeSearchから調べることができます。

@types/から始まる名前のパッケージの中身

基本的にindex.d.tsというファイルが入っています。
.d.tsは型定義ファイルの拡張子で、ここに型定義が宣言されています。

たとえば、ReactやAngularの型定義はこんな感じです。

• [@types/react の index.d.ts]
  (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6ddc57f14d431f54aa17a5c92427c62b08cb3fe6/types/react/index.d.ts)
• @types/angular の index.d.ts

見ての通り、ひたすら型定義が書かれているファイルになっています。

インストールについて

@types/ から始まる名前のパッケージをインストールするだけで、すぐ型定義が使えるようになります。

型定義は開発中のみ使う情報なので、インストールする時はdevDependenciesに入れます。

例えば、Reactのライブラリを型定義付きで使いたい場合は次のようにインストールします。

$ npm install --save-dev @types/react

これでライブラリを型定義付きで使えるようになりました！