Angular5升6后Observable<Object>无法赋值给Observable<Todo>求助

嘿，我明白你升级Angular到6后遇到的这个类型错误了，这其实是Angular HttpClient和RxJS 6的一些API变化导致的，咱们一步步来修复：

问题根源分析 #

你看到loadTodos方法没问题，是因为你给httpClient.get()指定了泛型<Todo[]>，明确告诉TypeScript返回的是Observable<Todo[]>。但addTodo、editTodo、deleteTodo这几个方法里的post/put/delete没有指定泛型，HttpClient默认会返回Observable<Object>，而你的方法声明是Observable<Todo>，自然就出现了类型不兼容的报错。

另外还有个小问题：你现在用的Observable.throw(error)在RxJS 6里已经被废弃了，得换成新的API。

具体修复步骤 #

1. 给HttpClient方法添加泛型 #

给post、put、delete都加上<Todo>泛型，明确返回类型：

// addTodo修改后
addTodo(todo: Todo): Observable<Todo> {
  return this.httpClient.post<Todo>(`${environment.api}${environment.path}`, todo).pipe(
    catchError((error: any) => throwError(error))
  );
}

// editTodo修改后
editTodo(todo: Todo): Observable<Todo> {
  return this.httpClient.put<Todo>(`${environment.api}${environment.path}/${todo.id}`, todo).pipe(
    catchError((error: any) => throwError(error))
  );
}

// deleteTodo修改后
deleteTodo(todo: Todo): Observable<Todo> {
  return this.httpClient.delete<Todo>(`${environment.api}${environment.path}/${todo.id}`).pipe(
    catchError((error: any) => throwError(error))
  );
}

注意：HttpClient会自动帮你序列化请求体为JSON，所以不需要手动调用JSON.stringify(todo)，直接传入todo对象即可。

2. 替换RxJS的废弃API #

把Observable.throw换成throwError，并且更新导入语句：

// 替换旧的导入
import { Observable, of, throwError } from 'rxjs';
// 删除这行废弃的导入
// import 'rxjs/add/observable/throw';

RxJS 6已经全面改用pipeable操作符，这类补丁式的导入已经不需要了。

完整修复后的TodoService代码 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../environments/environment';
import { Todo } from '../../../models/Todo';
import { Observable, of, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class TodoService {
  todos: Todo[];

  constructor(
    private httpClient: HttpClient
  ) { }

  loadTodos(): Observable<Todo[]> {
    return this.httpClient.get<Todo[]>(`${environment.api}${environment.path}`).pipe(
      catchError((error: any) => throwError(error))
    );
  }

  addTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.post<Todo>(`${environment.api}${environment.path}`, todo).pipe(
      catchError((error: any) => throwError(error))
    );
  }

  editTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.put<Todo>(`${environment.api}${environment.path}/${todo.id}`, todo).pipe(
      catchError((error: any) => throwError(error))
    );
  }

  deleteTodo(todo: Todo): Observable<Todo> {
    return this.httpClient.delete<Todo>(`${environment.api}${environment.path}/${todo.id}`).pipe(
      catchError((error: any) => throwError(error))
    );
  }
}

这样修改后，类型不匹配的错误应该就消失了，同时也符合RxJS 6的最佳实践。

内容的提问来源于stack exchange，提问作者Sami-L