中安拓也のブログ

プログラミングについて書くブログ

AngularにおけるRxJSのインポートについて整理した

はじめに

ERROR in src/app/app.component.ts(17,6): error TS2339: Property 'map' does not exist on type 'Observable<{}>'.

AngularでRxJSを書いていて、上のエラーみたく"〇〇オペレータがないよ!!"と怒られることが多々あるので、RxJSのインポート方法について整理しました。

バージョン情報

  • Angular: 5.2.7

  • Visual Studio Code: 1.20.1

  • OS: win32 x64

  • Node: 8.9.3

  • typescript: 2.4.2

案1: 使用するオペレーターだけ個別にimport

下記のクリック回数をカウントするコードでは、fromEventmapscanを使っているので、それぞれimport 'rxjs/add/observable/fromEvent';import 'rxjs/add/operator/map';import 'rxjs/add/operator/scan';で個別にインポートしています。

src/app/app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
// RxJSのオペレーターを個別import
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/scan';

@Component({
  selector: 'app-root',
  template: `{{ value }}`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  value = 0;

  ngOnInit() {
    Observable.fromEvent(document, 'click')
    .map(_ => 1)
    .scan((acc, value) => acc + value)
    .subscribe(value => this.value = value);
  }
}

案2: 一括import

app.module.tsに以下の文を追加すると、使用するオペレーターごとにimportする必要がなくなります。

import 'rxjs/Rx';

最後に

f:id:l08084:20180301162425p:plain 一括importを採用すると、容量の増加につながる上に、tslintに怒られたりもするので、状況によって使い分けていきたい。

参考サイト

christianliebel.com

qiita.com