こんにちは。野中やすおです。
TypeScriptでnpmなどのパッケージモジュールでライブラリのインストールを行うと
- npm i –save-dev @types/ライブラリ名 を試すか、declare module ‘ライブラリ名’; を含む新しい宣言 (.d.ts) ファイルを追加しますts(7016)
というエラーを見たことはないですか？
このエラーを指示通り行うと確かにエラーは解決しますが、@typesとついたライブラリがDevDependenciesにインストールされます。これはDefinitelyTypedを活用していることを意味しています。
DefinitelyTypedとは何か？
DefinitelyTypedは、開発者コミュニティが様々なJavaScriptライブラリ用に作成した型定義ファイルを一元管理して公開するプロジェクト(リポジトリ)になります。つまり、DefinitelyTypedはTypeScriptのための型宣言ファイルを集めたリポジトリになります。
The repository for high quality TypeScript type definitions.…
このリポジトリを通じて提供される型宣言は、@types/プレフィックスを持つnpmパッケージとして公開されています。これを利用することで、TypeScript開発者は必要な型情報をインストールしてプロジェクトに組み込むことができます。
パッケージマネージャを使用した@typesのインストール方法
例えば、文字コードの変換や判定をする JavaScript ライブラリでよく使用するencoding-japaneseの型情報をインストールする場合、以下のコマンドを使用します(自分がよく使用するpnpmを例としています)：
|
1 |
pnpm add @types/encoding-japanese |
https://github.com/polygonplanet/encoding.js/blob/HEAD/README_ja.md
そして以下のURLの通り、DefinitelyTyped内にencoding-japaneseが提供されています。
https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/encoding-japanese
上記を実行することで、@types/encoding-japanese パッケージがプロジェクトに追加され、TypeScriptはencoding-japaneseの型情報を認識するようになります。
そして、@types/ライブラリ名は、あくまでもTypeScript 型定義をインストールするコマンドで、ライブラリ本体をインストールするものではないので以下のコマンドでライブラリ本体をインストールすることも忘れずに！
|
1 |
pnpm add encoding-japanese |
型情報が見つからない場合の対処方法
一方で、すべてのライブラリがDefinitelyTypedで型情報を持っているわけではありません(全体の90%はカバーしているらしい)。そのような場合には、型宣言ファイル（.d.tsファイル）を作成して、型情報を提供することができます。型情報が提供されていないライブラリを使用している場合、以下のように宣言ファイルを作成します：
|
1 2 |
// types.d.ts declare module 'ライブラリ名'; |
まとめ
TypeScriptでライブラリをインストールしたものの、いざインポートをするとエラーメッセージts(7016)を見たら、まずは@types/ライブラリ名をパッケージマネージャーででインストールすることを検討してみてください！
