abcdefGets

ゲッツ!

typescriptでRxjs5を使う

タイトルのとおりです。
現在Rxjsはv4とv5がありますが、今回はv5を取り扱います。
またjspmとnpm両方の場合について記述します。
typescriptのバージョンは2.0以前とv2.0以降の両方で書きます。

typescript 2.0以降

npm

npmの場合はmoduleResolutionオプションを利用することで自動で解決されます。

tsconfig.json

{
  "compilerOptions": {
    "moduleResolution": "node"
  }
}
jspm

jspmでインストールした場合はjspm_packages以下にインストールされるので、moduleResolution: nodeのオプションでも解決できません。
そのためtsconfig.jsonのPath mapping機能を利用します。
Path mapping機能とはモジュールのパス解決を独自に指定できる機能です。

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "rxjs/*": ["jspm_packages/npm/rxjs@5.0.3/*"]
    }
  }
}

このrxjs/*の指定を行うことで、rxjs配下のファイルにアクセスすることが可能になります。

typescript 2.0以前

npm

2.0以降と全く同じです。

jspm

Path mappingの機能がないので、jspm_packagesと同じ階層にnode_modulesを用意して、npm経由でもrxjsをインストールしておきます。
tsconfig.jsonの設定はtypescript2.0以降のnpmと全く同じ設定にしておけば、コンパイル時やエディタ利用時はnode_modules配下のrxjsを参照しますし、
ランタイムにはjspm_packagesの方を参照するようになります。
管理が二重でやや冗長になりますが仕方ありません。ないんだもん。

使う

import {
  Observable,
  Subject
} from 'rxjs/Rx';

この例のようにすべてをRxモジュールからインポートすることもできますし、

import {
  Observable
} from 'rxjs/Observable'

個別にインポートすることも可能です。

jspmとtypescriptはだいぶ相性が良くなったのでうまく活用していきたいですね。