Typescript - 如何为 json 对象创建嵌套接口答案

【问题标题】：Typescript - How to create nested interface for json objectTypescript - 如何为 json 对象创建嵌套接口
【发布时间】：2018-11-05 13:11:48
【问题描述】：

我正在尝试创建已为其创建接口的嵌套 json 对象。我收到错误为Type of property serservicesAndHeads are incompatible 并说Property is missing。我的界面如下：

  interface  Head {
    HeadNumber?: string;
    HeadDescription?: string;
  };

  interface  ServicesAndHead {
    majorService?: string;
    subMajorService?: string;
    servicesAndHeads:Head[];
  }

  export interface MyTableItem {
   demandNo?: string;
   demandName?: string;
   servicesAndHeads?:ServicesAndHead;
   //servicesAndHeads?:ServicesAndHead[];
  }

我的 json 看起来像这样：

  const dataItem: MyTableItem =
  {
    demandNo: 'Demand Number 2',
    demandName: 'Animal Husbandary, Livestock, Fisheries and Veterinary Services',
    servicesAndHeads: [
    {
      majorService: 'C-Economic Service',
      subMajorService: '(a) Agriculture and Allied Activities',
      majorHead: [
       { majorHeadNumber: '3098', majorHeadDescription: 'Animal Husbandry' },
       { majorHeadNumber: '3999', majorHeadDescription: 'Diary Development' },
       { majorHeadNumber: '4902', majorHeadDescription: 'Fisheries' }
      ]
    },
    {
      majorService: 'C- Capital Account of Economic Services',
      subMajorService: '(a) Capital Account of Agriculture and Allied Activities',
      majorHead: [
        { majorHeadNumber: '0012', majorHeadDescription: 'Capital Outlay on Animal ' },
        { majorHeadNumber: '3245', majorHeadDescription: 'Capital Outlay on Fisheries' }
      ]
     }
   ]
  }

我也试过这个嵌套 serviceAndHead

  servicesAndHeads?: {
      [key: string]:ServicesAndHead,
      majorHeads?: {
        [key: string]:MajorHead
      };
  };

我将如何纠正我的代码以接受上述 json。

【问题讨论】：

如何将 JSON 类型转换为接口对象？我尝试使用进行类型转换，但它不适用于嵌套接口。

标签： angularjs json typescript interface angular6

【解决方案1】：

定义接口如下：

interface  Head {
   majorHeadNumber?: string;
   majorHeadDescription?: string;
};

interface  ServicesAndHead {
   majorService?: string;
   subMajorService?: string;
   majorHead: Head[];
}

export interface MyTableItem {
   demandNo?: string;
   demandName?: string;
   servicesAndHeads?:ServicesAndHead[];
}

这将与您的 Json 对象兼容。

const dataItem: MyTableItem = {

    demandNo: 'Demand Number 2',
    demandName: 'Animal Husbandary, Livestock, Fisheries and Veterinary Services',
    servicesAndHeads: [
    {
       majorService: 'C-Economic Service',
       subMajorService: '(a) Agriculture and Allied Activities',
       majorHead: [
       { 
          majorHeadNumber: '3098', 
          majorHeadDescription: 'Animal Husbandry' 
       },
       { 
          majorHeadNumber: '3999', 
          majorHeadDescription: 'Diary Development'
       },
       { 
          majorHeadNumber: '4902', 
          majorHeadDescription: 'Fisheries'
       }]
     },
     {
       majorService: 'C- Capital Account of Economic Services',
       subMajorService: '(a) Capital Account of Agriculture and Allied Activities',
       majorHead: [
       { 
          majorHeadNumber: '0012', 
          majorHeadDescription: 'Capital Outlay on Animal '
       },
       { 
          majorHeadNumber: '3245', 
          majorHeadDescription: 'Capital Outlay on Fisheries'
       }]
     }]
    }

【讨论】：

【解决方案2】：

ServicesAndHead 接口将servicesAndHeads 属性定义为强制属性，但dataItem.servicesAndHeads 的两个数组元素都缺少此属性。它们具有 majorHead 属性。也许，你的意思是

interface  ServicesAndHead {
  majorService?: string;
  subMajorService?: string;
  majorHead: Head[];
}

如果是这样，还需要调整Head接口如下：

interface  Head {
  majorHeadNumber?: string;
  majorHeadDescription?: string;
};

【讨论】：