TypeScriptのtsdがオワコンになったのでtypingsを使ってみた

photo by Daniel Foster

TypeScriptでの型定義管理で使っていたtsdがオワコンになった。
代わりに typings を使ってくれとのこと。

▶ Deprecate TSD · Issue #269 · DefinitelyTyped/tsd

ということで、typingsを使ってみた。

開発環境

• Mac OS X Yosemite
• npm 3.3.12
• typings 0.6.8

詳しいTypeScriptの開発環境構築は以下のエントリを参照してほしい。

typingsをインストール

# フォルダを作成&移動
$ mkdir typings-demo && cd typings-demo

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

# typingsの初期化(typings.jsonが作成される)
$ typings init

型定義ファイル（.d.ts）を使ってみる

試しにjQueryの型定義ファイルをインストールしてみる

# jqueryの型定義を検索してみる
$ typings search jquery --ambient
Showing 16 results...
（以下略）

# jqueryの型定義をインストールする
$ typings install jquery --save --ambient
? Found jquery typings for DefinitelyTyped. Continue? (Y/n) > Y

だいたいnpmと同じ感覚で使うことができる。

install {pkg} [—save|--save-dev] に関してもnpmと同じ
--save は配布するとき用のもの（jQueryやAngularJSとか）
--save-dev が開発者のためのもの（gulpとかJasmineとか）

--ambient はインターフェースだけが宣言されたものという意味。型定義ファイルなのでほとんどが –-ambientオプションが必要になる。

typings i {pkg} -D -A という短縮形ももちろん使える。


ここまでのコマンドを実行すると以下のようなディレクトリになる。

.
├── typings
│   ├── browser
│   │   └── ambient
│   │   └── jquery
│   │   └── jquery.d.ts
│   ├── browser.d.ts
│   ├── main
│   │   └── ambient
│   │   └── jquery
│   │   └── jquery.d.ts
│   └── main.d.ts
└── typings.json

browserとmainの2つがある理由は、
browser は開発用のプロジェクトのみで使う場合に参照する。
main はフロントエンドのパッケージを作成するときに参照する。

---

追記: 2016/06/17 12:00
typingsのバージョンをあげたところv1.3.0にあげたところ、以下のようなエラーが発生した。

typings ERR! message Unable to find "{package}" ("npm") in the registry.
typings ERR! message However, we found "{package}" for 1 other source: "dt"
typings ERR! message You can install these using the "source" option.
typings ERR! message We could use your help adding these typings to the registry: https://github.com/typings/registry
typings ERR! caused by https://api.typings.org/entries/npm/{package}/versions/latest responded with 404, expected it to equal 200

とか

typings ERR! message Attempted to compile "{package}" as an external module, but it looks like a global module. Did you want to remove the global flag?

そんなときは以下のコマンドに変更して実行してみてほしい。

$ typings install --save dt~jquery --global

.
├── typings
│   ├── globals
│   │   ├── jquery
│   │   │   └── index.d.ts
│   │   │   └── typings.json
│   └── index.d.ts
└── typings.json

dt~{package}のdtは、typings search {package}をしたときに、SOURCE列のモノを指定する
ほかにもnpm~{package}などもある。

保存先はbrowser、mainというフォルダがなくなりglobalsに統一された。
reference pathで読み込むときは typings/index.d.ts を参照すればよい。

---

その他のコマンド

# インストールした一覧を表示
$ typings ls [--ambient]

# アンインストールする
$ typings uninstall {pkg} [--save|--save-dev] [--ambient]
# アンインストールする（省略形）
$ typings uninstall {pkg} [-S|-D] [-A]

実際にコーディングしてみる

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

$(document).ready(() => {
  $('#app').html('hello typings!');
});

main.d.ts または browser.d.ts を参照しておけばOK。
tsd時代の tsd.d.ts と同じ役割なので、これさえ参照しておけばtypingsで型定義をインストールしてもいちいち reference を書かなくてすむ。

使ってみた感想

QuickStartを試してみただけでまだ詳細については把握していないが、npmライクで使えるので非常に便利だ。
tsdだと tsd query {pkg} –-save –-resolve –-action install とか tsd query {pkg} –rosa install という謎コマンドがストレスだったので、スッキリした感じ！

ただ –-ambient はどうにかならなかったのかな？とは思う。


ちなみに本格的なTypeScriptの開発環境を構築する手順は、以下のエントリにまとめているので、ぜひ参考にしていただきたい。




以上

written by @bc_rikko