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はだいぶ相性が良くなったのでうまく活用していきたいですね。