以前、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 のレポジトリでいろいろ試しているので、参考になればどうぞ。
