TypeScript泛型类型判断与Angular通用API服务实现问题

原代码没法运行的核心原因是TypeScript的泛型仅存在于编译阶段，运行时会被完全擦除，所以你没办法直接拿TMyType和具体类型做相等判断。下面给你几个可行的实现方案：

方案一：传入类型构造函数（最直接） #

既然运行时拿不到泛型类型，就把类的构造函数作为参数传进去，这样就能在运行时判断具体类型，同时用泛型约束返回值类型。

// 假设你的实体类定义如下
class User { /* 用户属性 */ }
class Product { /* 产品属性 */ }

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  // 泛型T约束为传入构造函数的实例类型
  public fetch<T>(type: new () => T): Observable<T[]> {
    let apiUrl: string;

    if (type === User) {
      apiUrl = '/api/users';
    } else if (type === Product) {
      apiUrl = '/api/products';
    } else {
      throw new Error('不支持该类型的API请求');
    }

    return this.http.get<T[]>(apiUrl);
  }
}

// 组件中调用方式
this.apiService.fetch(User).subscribe(users => {
  // 这里users会被自动推断为User[]类型
});
this.apiService.fetch(Product).subscribe(products => {
  // products自动推断为Product[]类型
});

方案二：维护类型-API配置映射表（更易扩展） #

如果后续要加更多类型，直接在映射表里加配置就行，不用修改判断逻辑：

class User { /* ... */ }
class Product { /* ... */ }

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  // 提前定义类型与API路径的映射
  private typeApiMap: Record<string, string> = {
    [User.name]: '/api/users',
    [Product.name]: '/api/products'
  };

  public fetch<T>(type: new () => T): Observable<T[]> {
    const apiUrl = this.typeApiMap[type.name];
    if (!apiUrl) {
      throw new Error(`未找到类型${type.name}对应的API路径`);
    }
    return this.http.get<T[]>(apiUrl);
  }
}

方案三：给实体类加类型标识（更灵活） #

如果不想依赖构造函数，可以给每个实体类加一个静态标识属性，通过这个标识来判断：

class User {
  static readonly typeKey = 'user';
  // 用户属性...
}

class Product {
  static readonly typeKey = 'product';
  // 产品属性...
}

@Injectable({ providedIn: 'root' })
export class ApiService {
  constructor(private http: HttpClient) {}

  public fetch<T extends { typeKey: string }>(type: { typeKey: T['typeKey'] }): Observable<T[]> {
    switch (type.typeKey) {
      case 'user':
        return this.http.get<T[]>('/api/users');
      case 'product':
        return this.http.get<T[]>('/api/products');
      default:
        throw new Error(`不支持标识为${type.typeKey}的类型请求`);
    }
  }
}

// 调用方式和之前一致
this.apiService.fetch(User).subscribe(...);

核心总结 #

TypeScript泛型是编译时语法，运行时没有痕迹，所以必须通过传入构造函数、静态标识、映射表这类运行时能获取的信息，把编译时的泛型类型和运行时的逻辑绑定起来，才能实现你要的通用API服务。

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