Angular导出类触发Partial observer及Observable类型不匹配报错

所有类型报错和strictPropertyInitialization配置无关，由两个核心问题导致：

• list.model.ts缺少List类的定义与导出，你贴出的该文件代码仅包含两个属性声明，无类结构和export关键字
• WebRequestService封装的HttpClient请求方法未指定响应类型泛型，Angular HttpClient默认返回Observable<Object>，无法匹配业务代码中声明的List、Task类型，触发重载不匹配、类型不兼容的全量报错。

1. 补全模型文件定义 #

• 修复list.model.ts，补全类导出：

export class List {
  _id: string;
  title: string;
}

• 后续报错提示Task类缺少completed属性，在task.model.ts的Task类中补充对应字段，和后端返回字段对齐：

export class Task {
  _id: string;
  title: string;
  _listId: string;
  completed: boolean;
}

• 检查new-list.component.ts的导入项，若缺少@Component、OnInit的引入，在文件顶部补充：

import { Component, OnInit } from '@angular/core';

2. 改造WebRequestService支持泛型 #

修改webrequestservice.ts，给所有请求方法加泛型声明，明确返回的Observable类型：

import { Injectable } from '@angular/core';
import{ HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class WebRequestService {
  readonly ROOT_URL: string;

  constructor(private http: HttpClient) {
    this.ROOT_URL = 'http://localhost:3000';
  }

  get<T>(uri: string): Observable<T> {
    return this.http.get<T>(`${this.ROOT_URL}/${uri}`);
  }

  post<T>(uri: string, payload: Object): Observable<T> {
    return this.http.post<T>(`${this.ROOT_URL}/${uri}`, payload);
  }

  patch<T>(uri: string, payload: Object): Observable<T> {
    return this.http.patch<T>(`${this.ROOT_URL}/${uri}`, payload);
  }

  delete<T>(uri: string): Observable<T> {
    return this.http.delete<T>(`${this.ROOT_URL}/${uri}`);
  }
}

3. 调整TaskService的方法返回类型 #

调用WebRequestService方法时传入对应泛型，明确每个接口的返回类型：

import { Injectable } from '@angular/core';
import { WebRequestService } from './web-request.service';
import { Task } from './models/task.model';
import { List } from './models/list.model';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TaskService {

  constructor(private webReqService: WebRequestService) { }

  getLists(): Observable<List[]> {
    return this.webReqService.get<List[]>('lists');
  }

  createList(title: string): Observable<List> {
    return this.webReqService.post<List>('lists', { title });
  }

  updateList(id: string, title: string): Observable<List> {
    return this.webReqService.patch<List>(`lists/${id}`, { title });
  }

  updateTask(listId: string, taskId: string, title: string): Observable<Task> {
    return this.webReqService.patch<Task>(`lists/${listId}/tasks/${taskId}`, { title });
  }

  deleteTask(listId: string, taskId: string): Observable<any> {
    return this.webReqService.delete<any>(`lists/${listId}/tasks/${taskId}`);
  }

  deleteList(id: string): Observable<any> {
    return this.webReqService.delete<any>(`lists/${id}`);
  }

  getTasks(listId: string): Observable<Task[]> {
    return this.webReqService.get<Task[]>(`lists/${listId}/tasks`);
  }

  createTask(title: string, listId: string): Observable<Task> {
    return this.webReqService.post<Task>(`lists/${listId}/tasks`, { title });
  }
}

修改完成后所有类型报错会自动清除，HTTP请求返回值类型会和组件subscribe时声明的List、Task类型完全匹配。

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