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

下記のクリック回数をカウントするコードでは、fromEvent、map、scanを使っているので、それぞれ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);
  }
}