$shibayu36->blog;

クラスター株式会社のソフトウェアエンジニアです。エンジニアリングや読書などについて書いています。

typingsを使ってnpmモジュールをTypeScriptで利用する

以前、npmモジュールをTypeScriptで利用する(tsdによる型ファイル管理) - $shibayu36->blog; という記事を書いたが、最近tsdを使っていると、

npm WARN deprecated tsd@0.6.5: TSD is deprecated in favor of Typings (https://github.com/typings/typings) - see https://github.com/DefinitelyTyped/tsd/issues/269 for more information

と出るようになったので、ここで推奨されているtypings を使って同じことを出来るようにしてみる。同じような記事は既に沢山あるが自分用メモとして。

typingsのインストール

使いたいプロジェクトrootで

$ npm install typings --save-dev

その後initしてtypings.jsonを作成する。

$ $(npm bin)/typings init

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

$(npm bin)/typings install jquery --ambient --save
$(npm bin)/typings install lodash --ambient --save

ここでambientと指定するとDefenitelyTypedから定義を取ってくることが出来る。

型定義ファイルは以下のように保存される。

$ tree typings
typings
├── browser
│   └── ambient
│       ├── jquery
│       │   └── index.d.ts
│       └── lodash
│           └── index.d.ts
├── browser.d.ts
├── main
│   └── ambient
│       ├── jquery
│       │   └── index.d.ts
│       └── lodash
│           └── index.d.ts
└── main.d.ts

ちなみにtypingsディレクトリは空であっても以下のコマンドで復元できるので、typings/以下を.gitignoreに入れておくと良さそうだった。npmにおけるnode_modulesと同じ運用のイメージ。

$(npm bin)/typings install

TypeScriptからjqueryとlodashを利用する

jqueryとlodashをインストール

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

src/ts/app.tsにて利用。ブラウザ向けにコンパイルするにはbrowser.d.tsを推奨しているようなので、そちらにreferenceする。

src/ts/app.ts

/// <reference path="../../typings/browser.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のようなタスクを用意して、実行すれば正しくコンパイルできる。

$(npm bin)/gulp build-ts

また、main.d.tsを使わないのであれば、tsconfigのexcludeに入れておくと良さそうだった。

まとめ

今回はtypingsを使ったTypeScriptの型管理について最初の利用開始までの流れを書いてみた。tsdからの移行は簡単だし、tsdを使っているとずっとdeprecatedと出るので変更すると良さそう。

また今typescriptのprojectをどうやって作るか、 https://github.com/shibayu36/typescript-project-sample のレポジトリでいろいろ試しているので、参考になればどうぞ。