TypeScript报错：类型Response不存在info和results属性求助

问题场景 #

我创建了一个用于发起HTTP请求获取用户数据的UserService，但在处理API响应时出现类型错误，尝试多种方法未能解决。

user.service 文件代码 #

export class UserService {
  private readonly apiUrl: string = 'https://randomuser.me/api';

  constructor(private http: HttpClient) {}

  getUsers(size: number = 10): Observable<any> {
    return this.http
      .get<any>(`${this.apiUrl}/?results=${size}`)
      .pipe(map((response) => this.processResponse(response)));
  }

  getUser(uuid: number = 1): Observable<any> {
    return this.http
      .get<any>(`${this.apiUrl}/?uuid=${uuid}`)
      .pipe(map((response) => this.processResponse(response)));
  }

  private processResponse(response: Response): Response {
    return {
      // ERROR 1 - Object literal may only specify known properties, and 'info' does not exist in type 'Response'.
      // ERROR 2 - Property 'info' does not exist on type 'Response'
      info: { ...response.info },
      // ERROR 3 - Property 'results' does not exist on type 'Response'
      results: response.results.map(
        (user: any) =>
          <User>{
            uuid: user.login.uuid,
            firstname: user.name.first,
            lastname: user.name.last,
            email: user.email,
            username: user.login.username,
            gender: user.gender,
            address: `${user.location.street.name} ${user.location.street.number} , ${user.location.city}, ${user.location.state}, ${user.location.country} `,
            dob: user.dob.date,
            phone: user.phone,
            imageUrl: user.picture.medium,
            coordinates: {
              latitude: +user.location.coordinates.latitude,
              longitude: +user.location.coordinates.longitude,
            },
          }
      ),
    };
  }
}

Response 接口代码 #

import { Info } from './info';

export interface Response {
  info: Info;
  results: any[];
}

报错信息 #

1. Object literal may only specify known properties, and 'info' does not exist in type 'Response'.
2. Property 'info' does not exist on type 'Response'
3. Property 'results' does not exist on type 'Response'

解决方案 #

核心问题是自定义的Response接口与全局内置的Response类型（如浏览器Fetch API或Angular中的类型）重名，导致TypeScript无法识别自定义类型。

步骤1：重命名自定义接口 #

将自定义的Response接口重命名为ApiResponse，避免命名冲突：

import { Info } from './info';

export interface ApiResponse {
  info: Info;
  results: any[];
}

步骤2：替换UserService中的类型引用 #

在UserService中把所有用到Response的地方替换为ApiResponse，同时优化类型定义（避免使用any）：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ApiResponse } from './path-to-api-response'; // 替换为你的实际文件路径
import { User } from './path-to-user'; // 确保导入User接口

export class UserService {
  private readonly apiUrl: string = 'https://randomuser.me/api';

  constructor(private http: HttpClient) {}

  getUsers(size: number = 10): Observable<ApiResponse> {
    return this.http
      .get<ApiResponse>(`${this.apiUrl}/?results=${size}`)
      .pipe(map((response) => this.processResponse(response)));
  }

  getUser(uuid: string): Observable<ApiResponse> {
    // 注意：randomuser.me的uuid是字符串类型，不是数字
    return this.http
      .get<ApiResponse>(`${this.apiUrl}/?uuid=${uuid}`)
      .pipe(map((response) => this.processResponse(response)));
  }

  private processResponse(response: ApiResponse): ApiResponse {
    return {
      info: { ...response.info },
      results: response.results.map(
        (user) =>
          <User>{
            uuid: user.login.uuid,
            firstname: user.name.first,
            lastname: user.name.last,
            email: user.email,
            username: user.login.username,
            gender: user.gender,
            address: `${user.location.street.name} ${user.location.street.number}, ${user.location.city}, ${user.location.state}, ${user.location.country}`,
            dob: user.dob.date,
            phone: user.phone,
            imageUrl: user.picture.medium,
            coordinates: {
              latitude: +user.location.coordinates.latitude,
              longitude: +user.location.coordinates.longitude,
            },
          }
      ),
    };
  }
}

额外提示 #

• getUser方法的uuid参数应改为字符串类型，因为randomuser.me返回的用户uuid是字符串，之前的数字类型会导致请求匹配不到用户。
• 尽量避免使用any类型，明确类型定义可以减少后续的类型错误。

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