AngularJS & TypeScriptでngResourceを使ってみた。(下準備編)

2015.06.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

AngularJS 2.0でTypeScriptが採用されるとのことでしたので、ngResouce周りを中心に触ってみることにしました。

dtsm

TypeScriptで用いる型定義ファイルを管理してくれるツールです。
TypeScript - dtsmのご紹介 - Qiita

pecoを導入しておくと、インタラクティブにライブラリを検索できます。

$ brew install peco
$ npm init
$ npm install dtsm -save
$ dtsm install -i -save

dtsm & pecoを用いたインタラクティブなライブラリの検索・導入方法については、
vvakame/dtsm 内にgif画像があるので、それを見ればわかるかと思います。

angular.js angular-resouceを取り込んだdtsmの定義ファイルは以下のようになりました。

dtsm.json

  "repos": [
    {
      "url": "https://github.com/borisyankov/DefinitelyTyped.git",
      "ref": "master"
    }
  ],
  "path": "typings",
  "bundle": "typings/bundle.d.ts",
  "link": {
    "npm": {
      "include": true
    }
  },
  "dependencies": {
    "angularjs/angular.d.ts": {
      "ref": "43b6bf88758852b9ab713a9b011487f047f94f4e"
    },
    "angularjs/angular-resource.d.ts": {
      "ref": "84dfeeac378552c22297a5d555b1999a396d7e7c"
    }
  }
}

npm install -g を行わない。

上記のコマンドなのですが、dtsmをグローバルインストールしていません。
相対パスで参照するように環境変数を指定することで、
ミドルウェアのインストールもpackage.jsonに記載して
グローバルインストールは行わないようにしています。
Zsh - コマンドパスを自動で通し npm install -g しない - Qiita

最後に

使ってみたと名を打っておきながら下準備編のみになってしまいました。
次回はREST APIからの一覧取得を行いたいと思います。