【TypeScriptの基礎を学ぶ】外部ライブラリを安全に使いこなす！型定義の扱いとエコシステムの活用法

JavaScriptの限界を超える！TypeScript初めの一歩　第5回

　この連載は、JavaScriptは使っているけれど、TypeScriptはまだ手を付けていない人向けのものです。あまり負担なくTypeScriptを導入して、メリットを享受することを目指します。マニアックなところには踏み込まないで、手軽にできて費用対効果が高いところを中心にあつかっていきます。第5回の今回は「外部のパッケージやその他情報」です。自分のコード以外の世界を見ていきましょう。

はじめに

　今回は「外部のパッケージやその他情報」についてです。自分のコード以外の世界を見ていきましょう。

第1章 外部コード（npmパッケージと型定義）の扱い方

　前回は、自作のコードをどのようにTypeScriptに対応させるかを見てきました。しかし実際のプログラムは自作のコードだけで構成されているわけではありません。npmからインストールしたパッケージなどの外部のコードが多くを占めます。またNode.jsのさまざまなモジュールも外部のコードになります。

　今回はまず、こうした外部コードをどのように扱っていくかを見ていきます。

ケース1：型定義が同梱されているパッケージ

　最近は、npmで公開されているパッケージの多くがTypeScriptで作られています。こうしたパッケージは、公開するときに型定義ファイルも用意しています。この場合、特別な対応は不要です。通常通りインストールすることで、TypeScriptのコードでインポートできます。

　また、JavaScriptで作られているけれど、型定義ファイルが同梱されているケースもあります。こうしたパッケージも問題は起きません。

　npmからパッケージをインストールする際に、こうした情報を見分ける方法があります。npmのWebサイトで、パッケージ名の横に青色の「TS」というアイコンが付いていればTypeScript対応です。

TypeScriptのアイコン

　アイコンにマウスカーソルを重ねると「This package contains built-in TypeScript declarations」（このパッケージには組み込みのTypeScript宣言が含まれています）と表示されます。安心して使えます。

https://www.npmjs.com/package/dayjs

ケース2：@typesで型定義を追加するパッケージ

　TypeScriptの型定義ファイルがない場合は問題になります。その場合でも、有名なパッケージならば型定義ファイルが配布されていることが多いです。これらは「@types パッケージ（DefinitelyTyped）」を通してインストールすることができます。

DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.

　たとえばExpressの型を追加したいときには、次のコマンドを実行します。

npm install --save @types/express

　node_modulesフォルダー内に@types/expressフォルダーができて、Expressの型がダウンロードされます。

@types/express - npm

　あるパッケージの型定義が配布されているかを調べるには、npmの検索ボックスで「@types/パッケージ名」（例：@types/express）と検索すると簡単に分かります。

　インストールした型定義は自動で認識されますが、手動で明示的に設定することも可能です。tsconfig.jsonに次のような設定を追加します。

    "compilerOptions": {
        "types" : [
            "express"
        ]
    }