typescriptの定義ファイル管理マネージャー「tsd」



"静的:型付け"のプログラミング言語を使っている人からすれば、TypeScriptは親しみやすくて便利ですよね。

angular.jsも時期バージョン2.0からTypeScriptで記述するようになり、今後はTypeScriptを使うプロジェクトが今以上に増えると思われます。

しかしながら、TypeScriptを使っていて面倒なことの1つといえば定義ファイル( definition )です。例えばjQueryやlodash.js, react, mocha ... etc 外部JSライブラリをTypeScript内で使おうとしても、定義ファイルが読み込まれていないとコンパイル時にエラーを起こしてjavascriptファイルに変換されません。

定義ファイルを自前で作ったり、ネットで探してコピペして...ではライブラリ1つ使うのにも一苦労。

そんな手間を省いてくれるソフトウェアが「tsd」です。

tsdはnode.js製のコマンドライン上で起動するソフトウェアで、TypeSciptの定義ファイルの検索やインストール、アップデートが出来る管理マネージャーです。主要なjavascriptライブラリの定義ファイルは用意されていて、使い勝手はbowerと似ています。

それではtsdを導入してみましょう!
 

tsdのインストール 〜 初期設定 

tsdはnpmパッケージの1つなのでインストールはコマンドライン上から行います。今回は動作確認にnode.js バージョン5.6を使いました。
( 事前にnode.jsのインストールは済ませておいてください )

# tsdのインストール
$ sudo npm install tsd -g

インストールが完了すれば"tsd"コマンドが使えるようになります。

プロジェクトルートで下記のコマンドを打てば、"tsd.json"という名の設定ファイルが作成されます。この設定ファイルでは、インストールしたTypeScript用の定義のファイルの情報や、インストールした定義ファイルの発行先のパスが設定出来ます。

# tsdの初期化
$ tsd init

#-- 作成された"tsd.json" --#

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

デフォルトでは"tsd.json"が作成された場所に定義ファイルがインストールされますが、変更したい場合は"tsd.json"内の"path"と"bundle"のパスを変更してください。
( * 下のスニペットは"/resources"内にインストールされるようにパスを変更しています )

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

 

tsdの使い方

tsdの機能は主に3つ、定義ファイルの"検索", "インストール", "アップデート"です。

定義ファイルの検索

用意されている定義ファイルの検索は"query"コマンドを使って行います。下のスニペットは"jquery"の定義ファイルを検索しています。また検索にはワイルドカードや"resolve"オプションを付けて、ライブラリと依存関係にある定義ファイルの検索も可能です。

# jqueryで検索
$ tsd query jquery
 # 検索結果
 - jquery / jquery

# --------- #

# ワイルドカードを使って検索
$ tsd query full*
  # 2種類の定義ファイルがヒットしました
  - fullCalendar / fullCalendar
  - fullname     / fullname

# ---------- #

# resoulveオプションをつけて"backbone"に関係しているライブラリの定義ファイルの検索
$ tsd query backbone/ --resolve
 # backboneは3種類のライブラリに依存しているので下記の結果に
 - backbone      / backbone-global
   -> jquery     > jquery
 - backbone      / backbone
   -> underscore > underscore
   -> backbone   > backbone-global
   -> jquery     > jquery

また検索にはコマンドライン上からだけではなく、Web上からも探すことが出来ます。


定義ファイルのインストール

TypeScript用の定義ファイルのインストールには"install"コマンドを使います。"--save"オプションを使うと、"tsd.json"内にインストール情報が記録され、依存関係を持たせることが出来ます。

## jqueryのinstall
$ tsd install jquery --save

##- tsd.json内のinstallに下記のような情報が記載されます -##
{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "resources/typings",
  "bundle": "resources/typings/tsd.d.ts",
  "installed": {
    "jquery/jquery.d.ts": {
      "commit": "95433230a9913054c57c715e6b91a9ae738d0b97"
    }
  }
}

また、backbone.js等の複数のライブラリに依存しているパッケージの場合はパッケージ名の最後に" / "を付けると紐付いているライブラリの定義ファイルも同時にインストールされます。

# backbone.jsの定義ファイルのインストール
$ tsd install  backbone/ --save

 - backbone      / backbone-global
   -> jquery     > jquery
 - backbone      / backbone
   -> underscore > underscore
   -> backbone   > backbone-global
   -> jquery     > jquery

>> running install..

>> written 3 files:

    - backbone/backbone-global.d.ts
    - backbone/backbone.d.ts
    - underscore/underscore.d.ts


定義ファイルのアップデート

アップデートも上記の事と同様に簡単で"update"コマンドを打つだけで最新の定義ファイルにアップデートされます。こちらはインストールされている既存ファイルを上書きする"--overwrite"と設定ファイルに記載する"--save"オプションに対応しています。

## update
$ tsd update


Summary

以上でtsdの紹介は終わりです。

これでTypeScript内からインストールした定義ファイルが読み込めるようになりました。

/* 
 インストールしたライブラリの定義ファイル単体で読み込む場合 
*/
/// <reference path="../typings/jquery/jquery.d.ts" />

/* 
 インストールしたライブラリの定義ファイル全てを読み込む場合 
*/
/// <reference path="../typings/tsd.d.ts" />


tsdはTypeScriptを使う上での鉄板ライブラリなので、これからTypeScriptを使ってプロジェクトを始める人はゼヒ×2導入してください!

GitHub : DefinitelyTyped/tsd

 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ