TypeScript泛型回调问题：Angular泛型服务new T实例化报错

这个问题我太熟悉了——TypeScript的泛型T只是编译时的类型标记，编译成JavaScript后泛型会被完全擦除，所以运行时根本不存在T这个“值”，自然没法用new T()来实例化对象。这就是你看到'T仅引用类型，不能作为值使用'错误的原因。

下面给你两种靠谱的解决方案，根据你的场景选就行：

方案一：传入实体类的构造函数 #

最直接的方式是让服务接收一个类的构造函数作为参数（因为类在JS里是函数，运行时是存在的），用它来创建实例。

重构后的服务代码 #

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

@Injectable()
export class EntityService<T> {
  private _data: BehaviorSubject<T[]> = new BehaviorSubject<T[]>([]);
  private url = '...url...'; // 你的API地址

  // 新增构造函数参数：接受一个能创建T实例的构造函数
  constructor(
    private http: HttpClient,
    private entityConstructor: new (data: Partial<T>) => T
  ) {
    this.http.get<T[]>(this.url).subscribe(rawData => {
      // 用传入的构造函数创建实例，替代原来的new T()
      const entities = rawData.map(item => new this.entityConstructor(item));
      this._data.next(entities);
    });
  }

  // 对外暴露可观察的数据
  get data$(): Observable<T[]> {
    return this._data.asObservable();
  }
}

定义你的实体类 #

比如你要创建User实例，需要给类写一个能接收部分属性的构造函数：

export class User {
  id: number;
  name: string;
  email: string;

  constructor(data: Partial<User>) {
    // 用Object.assign把后端数据拷贝到实例上
    Object.assign(this, data);
  }

  // 可以添加类的专属方法
  getFullName(): string {
    return this.name;
  }
}

在模块中提供服务 #

因为Angular的DI系统对泛型支持有限，我们用工厂函数来注入带具体构造函数的服务实例：

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { EntityService } from './entity.service';
import { User } from './user.model';

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: EntityService,
      // 工厂函数：传入HttpClient和User构造函数，创建服务实例
      useFactory: (http: HttpClient) => new EntityService(User, http),
      deps: [HttpClient] // 声明依赖的服务
    }
  ]
})
export class UserModule {}

方案二：传入自定义映射函数 #

如果你的实体类不需要构造函数，或者映射逻辑比较复杂（比如需要转换数据格式），可以传入一个映射函数来替代构造函数，灵活性更高。

重构后的服务代码 #

@Injectable()
export class EntityService<T> {
  private _data: BehaviorSubject<T[]> = new BehaviorSubject<T[]>([]);
  private url = '...url...';

  constructor(
    private http: HttpClient,
    private mapper: (rawData: any) => T // 传入自定义映射函数
  ) {
    this.http.get<T[]>(this.url).subscribe(rawData => {
      const entities = rawData.map(this.mapper);
      this._data.next(entities);
    });
  }

  get data$(): Observable<T[]> {
    return this._data.asObservable();
  }
}

提供服务时传入映射函数 #

@NgModule({
  imports: [HttpClientModule],
  providers: [
    {
      provide: EntityService,
      useFactory: (http: HttpClient) => 
        new EntityService(http, (raw) => {
          // 这里可以写复杂的映射逻辑
          const user = new User();
          user.id = raw.id;
          user.name = `${raw.firstName} ${raw.lastName}`; // 合并姓名
          user.email = raw.email;
          return user;
        }),
      deps: [HttpClient]
    }
  ]
})
export class UserModule {}

核心原理总结 #

TypeScript的泛型是编译时类型检查工具，运行时没有任何泛型信息（类型擦除），所以你不能直接用new T()。必须通过传入运行时存在的构造函数或映射函数，告诉代码如何创建具体的实例。

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