LoginSignup
14

More than 5 years have passed since last update.

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

Posted at

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/ から始まる名前のパッケージをインストールするだけで、すぐ型定義が使えるようになります。

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

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14