解决Angular中Observable<object>无法赋值为Observable<GameInfo[]>的类型错误

问题分析 #

报错提示Type 'Observable<object>' is not assignable to type 'Observable<GameInfo[]>'，核心原因有两点：

1. 自定义HttpService的get方法固定返回Observable<object>，未支持泛型，无法适配具体业务类型
2. GameInfo接口存在字段名拼写错误，与后端返回数据不匹配

解决方案 #

1. 为HttpService添加泛型支持 #

修改HttpService的get和post方法，使其支持泛型参数，从而返回对应类型的Observable：

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  private httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
    withCredentials: true,
  };
  private domain = environment.domain;

  constructor(private http: HttpClient) {}

  post<T>(
    route: string,
    body: object,
    httpOptions: object = this.httpOptions
  ): Observable<T> {
    return this.http.post<T>(`${this.domain}${route}`, body, {
      ...this.httpOptions,
      ...httpOptions,
    });
  }

  get<T>(
    route: string,
    httpOptions: object = this.httpOptions
  ): Observable<T> {
    return this.http.get<T>(`${this.domain}${route}`, {
      ...this.httpOptions,
      ...httpOptions,
    });
  }
}

2. 修正GameInfo接口的字段名 #

后端返回的字段为nameLocaleKey，但接口中写成了nameLocalKey（拼写错误，缺少字母e），修正后：

export default interface GameInfo {
  type: string;
  prizes: any;
  nameLocaleKey: string; // 修正字段名
  ticketPrice: number;
}

3. 在GameService中正确调用泛型get方法 #

现在可以在getGameList$方法中指定泛型参数，让HttpService返回Observable<GameInfo[]>：

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import BackendRoutes from 'src/app/core/enums/backend-routes';
import { HttpService } from 'src/app/core/services/http.service';
import GameInfo from '../interfaces/game-info';

@Injectable({
  providedIn: 'root',
})
export class GameService {
  constructor(private httpService: HttpService) {}

  getGameList$(): Observable<GameInfo[]> {
    return this.httpService.get<GameInfo[]>(BackendRoutes.GameList);
  }
}

额外优化（可选） #

如果需要更严谨的类型校验，可以为prizes字段定义具体的嵌套接口：

export interface PrizePattern {
  type: string;
  count: number;
}

export interface Prize {
  name: string;
  nameLocaleKey: string;
  winAmount: number;
  patterns: PrizePattern[];
}

export default interface GameInfo {
  type: string;
  prizes: Prize[];
  nameLocaleKey: string;
  ticketPrice: number;
}

内容的提问来源于stack exchange，提问作者Vladimir