Angular と TypeScript 1.8 で発生する「プロパティ 'map' は型 'Observable' に存在しません」エラー
Angular と TypeScript 1.8 で発生する「プロパティ 'map' は型 'Observable<Response>' に存在しません」エラー
エラーの原因
map 演算子は RxJS ライブラリに属しており、Observable 型のオブジェクトに適用することで、そのオブジェクトの値を変換することができます。しかし、TypeScript 1.8 では、map 演算子はデフォルトで Observable<Response> 型のオブジェクトに含まれていません。
解決方法
このエラーを解決するには、以下のいずれかの方法で map 演算子を Observable<Response> 型のオブジェクトに適用できるようにする必要があります。
RxJS ライブラリの map 演算子をインポートする
以下のコードのように、rxjs/add/operator/map モジュールをインポートすることで、map 演算子を Observable<Response> 型のオブジェクトに適用できるようになります。
import 'rxjs/add/operator/map';
// ...
const response: Observable<Response> = ...;
const mappedResponse = response.map((data: Response) => {
// データの変換処理
});
map 演算子を拡張メソッドとして定義する
以下のコードのように、map 演算子を拡張メソッドとして定義することで、Observable<Response> 型のオブジェクトに対して直接 map 演算子を呼び出すことができるようになります。
interface Observable<T> {
map<U>(project: (value: T) => U): Observable<U>;
}
// ...
const response: Observable<Response> = ...;
const mappedResponse = response.map((data: Response) => {
// データの変換処理
});
TypeScript 2.x 以降では、map 演算子はデフォルトで Observable 型のオブジェクトに含まれているため、上記のいずれかの方法を実行する必要はありません。
Angular アプリケーションで TypeScript 1.8 を使用しているときに、map 演算子を Observable<Response> 型のオブジェクトに適用しようとすると、「プロパティ 'map' は型 'Observable<Response>' に存在しません」というエラーが発生します。このエラーを解決するには、上記のいずれかの方法で map 演算子を Observable<Response> 型のオブジェクトに適用できるようにする必要があります。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
getData(): Observable<Response> {
return this.http.get('https://api.example.com/data');
}
// RxJS ライブラリの `map` 演算子をインポート
import 'rxjs/add/operator/map';
// map 演算子を拡張メソッドとして定義
interface Observable<T> {
map<U>(project: (value: T) => U): Observable<U>;
}
// map 演算子を呼び出す
getData(): Observable<any> {
return this.http.get('https://api.example.com/data')
.map((response: Response) => {
// データの変換処理
return response.json();
});
}
}
このコードでは、ApiService クラスの getData メソッドが Observable<Response> 型のオブジェクトを返します。このオブジェクトに対して、map 演算子を呼び出すことで、オブジェクトの値を変換することができます。
map 演算子の引数には、変換処理を行う関数を指定します。この関数には、元のオブジェクトの値が渡され、変換後の値を返す必要があります。
上記の例では、map 演算子の変換処理で、Response オブジェクトを JSON 形式に変換しています。
- TypeScript 2.x 以降を使用している場合は、上記のコードのように
map演算子をインポートしたり、拡張メソッドとして定義する必要はありません。 map演算子は、Observable型のオブジェクトの値を変換するだけでなく、新しいObservable型のオブジェクトを作成するためにも使用できます。
map 演算子を使用しない方法
subscribe メソッドを使用すると、Observable 型のオブジェクトの値を購読することができます。購読時に、値を変換する処理を記述することができます。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
getData(): Observable<Response> {
return this.http.get('https://api.example.com/data');
}
getData(): void {
this.http.get('https://api.example.com/data')
.subscribe((response: Response) => {
// データの変換処理
console.log(response.json());
});
}
}
上記の例では、getData メソッドで subscribe メソッドを使用しています。subscribe メソッドの引数には、購読時に実行される関数を指定します。
この関数には、Observable 型のオブジェクトの値が渡されます。この値に対して、データの変換処理を行うことができます。
pipe 演算子は、複数の演算子を連結して実行することができます。map 演算子の代わりに、pipe 演算子を使用して、値を変換する処理を記述することができます。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class ApiService {
constructor(private http: HttpClient) { }
getData(): Observable<Response> {
return this.http.get('https://api.example.com/data');
}
getData(): Observable<any> {
return this.http.get('https://api.example.com/data')
.pipe(
map((response: Response) => {
// データの変換処理
return response.json();
})
);
}
}
上記の例では、pipe 演算子を使用して、map 演算子を呼び出しています。pipe 演算子の引数には、処理を連結する演算子を配列で指定します。
map 演算子の変換処理は、subscribe メソッドを使用する場合と同じです。
map 演算子を使用せずに、Observable<Response> 型のオブジェクトの値を変換するには、subscribe メソッドまたは pipe 演算子を使用することができます。
angular typescript1.8
