TypeScript报错TS2339：ApiResponse类型无PRE属性的技术求助

返回的WebService JSON结构 #

{
  "PRE": [
    {
      "DEPO": 979534429484,
      "CLER": "RC3038",
      "INTITULE1": "PORTEFEUILLE RC3038",
      "PHONE": "0999999999999",
      "TOMANY": "FALSE",
      "PREPTF": [
        {
          "NUM": 146662,
          "CLER": "RC3038",
          "SVM": 94533166,
          "ISIN": "BE0945331669",
          "LABEL": "ARKIMEDES FONDS",
          "QUANTITE": 10.00,
          "DATE": "2012-04-18",
          "TYPE": "IN",
          "PERSONNE_CONTACT": "",
          "CONTREPARTIE": "DEXIA",
          "TEL": 0,
          "FAX": 0,
          "STATUT": 9,
          "STATUT_LIB": "Fait",
          "REF_ALPHA": "CO12240000048563",
          "REF_RBC": "",
          "TRADE_DATE": "2012-04-18",
          "VALUE_DATE": "2012-04-19",
          "TRAITEMENT_DATE": "2012-04-18",
          "ANNULATION_DATE": "0001-01-01",
          "RECEPTION_DATE": "2012-04-25",
          "REM1": "",
          "REM2": "",
          "COURS_MOYEN_ACHAT": 160.100000,
          "ACHAT_DATE": "0001-01-01",
          "PMBIS": "N",
          "TIS": 0.000000,
          "CHANGEMENT_BENEF_ECO": "O"
        }
      ]
    }
  ]
}

定义的TypeScript接口 #

export interface TransferResponse extends ApiResponse {
  PRE: PreTransfer[];
}

export interface PreTransfer {
  DEPO: number;
  CLER: string;
  INTITULE1: string;
  PHONE: string;
  TOMANY: string;
  PREPTF: {
    NUM: number;
    CLER: string;
    SVM: number;
    ISIN: string;
    LABEL: string;
    QUANTITE: number;
    DATE: string;
    TYPE: string;
    PERSONNE_CONTACT: string;
    CONTREPARTIE: string;
    TEL: number;
    FAX: number;
    STATUT: number;
    STATUT_LIB: string;
    REF_ALPHA: string;
    REF_RBC: string;
    TRADE_DATE: string;
    VALUE_DATE: string;
    TRAITEMENT_DATE: string;
    ANNULATION_DATE: string;
    RECEPTION_DATE: string;
    REM1: string;
    REM2: string;
    COURS_MOYEN_ACHAT: number;
    ACHAT_DATE: string;
    PMBIS: string;
    TIS: number;
    CHANGEMENT_BENEF_ECO: string;
  }[];
}

数据获取方法代码 #

customerTransfers: PreTransfer;

overviewTransfers(account: string): void {
  this.service.overviewTransfers(account).pipe(
    takeUntil(this.unsubscribe$)
  ).subscribe(res => {
    this.customerTransfers = res.PRE.map(val => {
      return {
        

      }
    });

  });
}

报错信息 #

error TS2339: Property 'PRE' does not exist on type 'ApiResponse'.

67     this.customerTransfers = res.PRE.map(val => {

解决方案 #

问题根因 #

TypeScript类型校验认为res是ApiResponse类型（未包含PRE属性），尽管你定义了TransferResponse继承ApiResponse，但服务方法的返回类型未正确指定为TransferResponse，导致类型不匹配。此外，customerTransfers的类型定义与实际返回的数组类型不符。

具体修复步骤 #

1. 修正服务方法的返回类型
   确保服务中overviewTransfers方法明确返回Observable<TransferResponse>：

   import { Observable } from 'rxjs';
   import { TransferResponse } from './your-interface-path';
   
   // 服务中的方法
   overviewTransfers(account: string): Observable<TransferResponse> {
     return this.http.get<TransferResponse>(`your-api-url/${account}`);
   }
   

2. 修正变量类型
   res.PRE.map返回的是PreTransfer[]数组，因此customerTransfers的类型应改为数组：

   customerTransfers: PreTransfer[] = [];
   

3. 完善map转换逻辑
   当前map函数为空返回，需补充属性映射（若无需修改原数据，可直接赋值数组）：

   // 直接赋值（无需转换时）
   this.customerTransfers = res.PRE;
   
   // 或需要转换属性时
   this.customerTransfers = res.PRE.map(val => ({
     DEPO: val.DEPO,
     CLER: val.CLER,
     INTITULE1: val.INTITULE1,
     PHONE: val.PHONE,
     TOMANY: val.TOMANY,
     PREPTF: val.PREPTF // 嵌套数组如需转换也可在此处理
   }));
   

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