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 演示链接。