npmモジュールをTypeScriptで利用する(tsdによる型ファイル管理)

前の記事で、TypeScriptでフロントエンドの実装をし、ブラウザ用にコンパイルする事ができるようになった。

blog.shibayu36.org

今のままではnpmで入れたjQueryやlodashなどをTypeScriptから利用することができない。TypeScriptでJSのモジュールを利用するにはTypeScriptの型定義ファイルを使う必要があるためである。

現在npmのモジュールの型定義ファイルはDefinitelyTyped というgithubのrepositoryにまとまっている。必要な物はそこから取ってくればよい。

今回はこのrepositoryからの型定義ファイルの取得や管理の機能を備えているtsd を利用してみたので、やってみたことをメモ。

やりたいこと

TypeScriptで以下のようにjqueryとlodashを利用したい。

"use strict";

import * as $ from "jquery";
import * as _ from "lodash";

$().ready(() => {
    alert(_.camelCase('Foo Bar'));
});

実現のためにやること

tsdの設定をする
tsdでjqueryとlodashの型定義ファイルを取得する
TypeScriptからjqueryとlodashを利用する

tsdの設定をする

まずはtsdのインストール。

$ npm install tsd --save-dev

続いてセットアップを行う。

$ node_modules/.bin/tsd init
-> written tsd.json
-> written typings/tsd.d.ts

ここでtsd.jsonとtypings/tsd.d.tsというファイルが出来た。tsd.jsonが設定ファイルとなっているので、これを編集すれば設定を変更できる。

tsd.json

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "src/ts/typings/vendor",
  "bundle": "src/ts/typings/tsd.d.ts"
}

型定義ファイルを入れておくディレクトリ(path)とインストールした型定義ファイルへのreferenceがまとまっているファイル名(bundle)は好みに合わせて変えると良さそう。上の設定は自分の好みに変更している。

tsdでjqueryとlodashの型定義ファイルを取得する

以下のコマンドを実行する。

node_modules/.bin/tsd install jquery --save
node_modules/.bin/tsd install lodash --save

これで設定ファイルで指定したpath以下に型定義ファイルがダウンロードされる。

$ tree src/ts/typings/vendor
src/ts/typings/vendor
├── jquery
│   └── jquery.d.ts
└── lodash
    └── lodash.d.ts

また、設定ファイルのbundleで指定されたファイルに、ダウンロードした型定義ファイルへのreferenceがまとまっている。

$ cat src/ts/typings/tsd.d.ts
/// <reference path="vendor/jquery/jquery.d.ts" />
/// <reference path="vendor/lodash/lodash.d.ts" />

src/ts/typings/tsd.d.ts(bundleの設定で指定したファイル)にreferenceがまとまっているので、自分でTypeScriptを書くときはこのファイルへreferenceするだけで良い。

TypeScriptからjqueryとlodashを利用する

ここまでで型定義ファイルの準備は出来たので、jqueryとlodashの利用はできるようになっている。

まずはnpmでインストールする。

npm install jquery --save-dev
npm install lodash --save-dev

続いてsrc/ts/app.ts辺りにコードを書く。このファイルからtsd.d.tsに対してreferenceをしておくのがポイント。

/// <reference path="./typings/tsd.d.ts" />

"use strict";

import * as $ from "jquery";
import * as _ from "lodash";

$().ready(() => {
    alert(_.camelCase('Foo Bar'));
});

あとは以前書いた http://blog.shibayu36.org/entry/2016/01/07/120000 のbuild-tsのようなタスクを用意して、実行すれば正しくコンパイルできる。

$ ./node_modules/.bin/gulp build-ts

このタスクではstatic/js/app.jsに出力するようになっていたので正しく出力出来た。行数が多いのはjqueryやlodashのコードが全て入っているためである。

$ wc -l static/js/app.js
   21577 static/js/app.js

まとめ

今回はnpmのモジュールをTypeScriptから利用するために、tsdを使った型定義ファイルの管理を行ってみた。大体この記事とこの前書いた http://blog.shibayu36.org/entry/2016/01/07/120000 でTypeScriptを使うための最低限の環境はできたと思う。