如何从TypeScript泛型函数返回硬编码模拟对象数组用于测试？

问题背景 #

现有泛型函数：

public getData<T>(url: string): Observable<T> {
  return this.httpClient.get<T>(url);
}

测试时想返回硬编码的模拟数组：

return of([{id: 1, value: 'test1'}, {id: 2, value: 'test2'}]);

但遇到TypeScript错误：

TS2322: Type 'Observable<{ id: number; value: string; }[]>' is not assignable to type 'Observable'.
Type '{ id: number; value: string; }[]' is not assignable to type 'T'.
'T' could be instantiated with an arbitrary type which could be unrelated to '{ id: number; value: string; }[]'.

错误原因 #

泛型T是由调用方指定的任意类型，硬返回的数组类型和T没有必然关联，TypeScript类型检查会报错——毕竟调用方可能指定T为User、Product这类和模拟数组完全不兼容的类型。

可行实现方式 #

方式1：给泛型加类型约束 #

先定义模拟数据对应的接口，让T继承该接口的数组类型，确保T和模拟数据类型兼容：

interface MockItem {
  id: number;
  value: string;
}

// 修改泛型约束
public getData<T extends MockItem[]>(url: string): Observable<T> {
  // 测试时返回模拟数据，断言为T类型
  return of([{id: 1, value: 'test1'}, {id: 2, value: 'test2'}] as T);
}

这样调用时T只能是MockItem[]或其子类型，类型检查即可通过。

方式2：调用时明确指定泛型类型 #

如果不想修改原函数的泛型约束，在测试调用时直接指定T为模拟数据的类型，同时在函数内部把模拟数据转成T：

// 调用getData时明确T的类型
const data$ = getData<{id: number; value: string}[]>('test-url');

// 函数内部实现
public getData<T>(url: string): Observable<T> {
  // 用unknown中转避免类型不安全警告
  return of([{id: 1, value: 'test1'}, {id: 2, value: 'test2'}] as unknown as T);
}

方式3：单元测试中Mock HttpClient（推荐） #

如果是做单元测试，更合理的做法是不修改原函数，而是Mock掉HttpClient的get方法，让它返回模拟数据（以Angular单元测试为例）：

import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { TestBed } from '@angular/core/testing';
import { YourService } from './your-service';

describe('YourService', () => {
  let service: YourService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [YourService]
    });
    service = TestBed.inject(YourService);
    httpMock = TestBed.inject(HttpTestingController);
  });

  it('should return mock data', () => {
    const mockData = [{id: 1, value: 'test1'}, {id: 2, value: 'test2'}];
    
    service.getData<typeof mockData>('test-url').subscribe(data => {
      expect(data).toEqual(mockData);
    });

    // 捕获HTTP请求并返回模拟数据
    const req = httpMock.expectOne('test-url');
    req.flush(mockData);
    httpMock.verify();
  });
});

这种方式保留原函数逻辑，仅在测试环境Mock依赖，更符合单元测试的设计原则。

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