Converting json object to typescript interface causing error in the mock object while unit testing in Angular 11

Question

我在 Angular 11 應用程序中收到 json 響應，我創建了一個與該 json ZA8CFDE6311BD59EB2AC966B8 對應的接口 json object 是

{
  "division": {
      "uid": "f5a10d90-60d6-4937-b917-1d809bd180b4",
      "name": "Sales Division",
      "title": "Sales",
      "type": "Form",
      "formFields": [
          {
              "id": 1,
              "name": "firstName",
              "label": "First Name",
              "value": "John"
          },
          {
              "id": 2,
              "name": "lastName",
              "label": "Last Name",
              "value": "Smith"
          }
      ]
   }
}

我為此 json object 創建的 typescript 接口是

export interface FormField {
   id: number;
   name: string;
   label: string;
   value: string;
}

export interface Division {
   uid: string;
   name: string;
   title: string;
   type: string;
   formFields: FormField[];
}

export interface Division {
   division: Division;
}

我正在使用服務Division.sevice.ts從 API 獲取上述 json 響應，一切正常。 我正在嘗試在division.service.spec.ts文件中為此服務編寫單元測試。 我在這個文件中創建了一個mockDivisionObj用於測試目的，如下所示。

mockDivisionObj = {
  "division": {
      "uid": "f5a10d90-60d6-4937-b917-1d809bd180b4",
      "name": "Sales Division",
      "title": "Sales",
      "type": "Form",
      "formFields": [
          {
              "id": 1,
              "name": "firstName",
              "label": "First Name",
              "value": "John"
          },
          {
              "id": 2,
              "name": "lastName",
              "label": "Last Name",
              "value": "Smith"
          }
      ]
  }
}

顯示一個錯誤，它說

Property 'division' is missing in type '{ uid: string; name: string; title: string; type: 
string; formFields: { id: number; name: string; label: string; value: string; }[]; }' but 
required in type 'Division'.

我認為我創建界面的方式可能是錯誤的，但我無法弄清楚究竟是什么導致了這個問題。 這個你能幫我嗎。

Answer 1

我可以通過將文件中的一個接口的名稱更改為“AppDivision”來解決此問題，如下所示。

export interface FormField {
   id: number;
   name: string;
   label: string;
   value: string;
}

export interface Division {
   uid: string;
   name: string;
   title: string;
   type: string;
   formFields: FormField[];
}

export interface AppDivision {
   division: Division;
}

兩個接口同名導致單元測試mock object報錯。

Answer 2

您的代碼很好。要解決此錯誤，您可以嘗試以下代碼 =>

  this.division = this.mockDivisionObj.division as Division;

檢查鏈接： StackBlitz 演示鏈接。