typescript - 如何在 TypeScript 中定义扩展接口类型以避免“类型中不存在”错误？

Question

我需要定义一个名为：ApplicationSubSectionIntegrations 的 TypeScript 接口，它是来自后端的模拟数据，如下所示：

{data : [
      {
        "@id": "e6a99ed0-b7be-4f57-866b-58da27e5090d",
        "formSubSectionId": 10359,
        "formSubSectionDisplayName": "Clinical & Work Experiences",
        "actions": [
          {
            "@id": "760e9408-29b1-41b5-a823-f3217b08bee2",
            "id": 315,
            "name": "Complete Tile",
            "description": "This will complete the Time2Track subsection when the integration notification is sent",
            "standardName": "CompleteTile",
            "tableName": "INTEGRATION_ACTION",
            "createdDate": "2020-04-16 15:40:51",
            "updatedDate": "2020-04-16 15:40:53",
            "customBlocksAllowed": false,
            "standardSubsectionBlocksAllowed": false,
            "standardSubSectionTypesAllowed": false,
            "webAdmitName": null,
            "required": false,
            "enabled": false,
            "catalogueModels": [],
            "parentCatalogueEntityId": '314',
            "inUse": false
          }
        ],
        "dataSources": [
          {
            "@id": "ccf7625c-b0a5-446a-b8ad-4d06daa4115f",
            "id": 317,
            "name": "Time2Track-SummaryOfPracticumExperiences",
            "description": "Time2Tracks datasource for tile completion",
            "standardName": "Time2Track-SummaryOfPracticumExperiences",
            "tableName": "INTEGRATION_DATASOURCE",
            "createdDate": "2020-04-16 15:44:17",
            "updatedDate": "2020-04-16 15:44:19",
            "customBlocksAllowed": false,
            "standardSubsectionBlocksAllowed": false,
            "standardSubSectionTypesAllowed": false,
            "webAdmitName": null,
            "required": false,
            "enabled": false,
            "catalogueModels": [],
            "parentCatalogueEntityId": '314',
            "inUse": false
          }
        ]
      }
    ]
}; 

我以这种方式实现：

import { CatalogueEntity } from './catalogue-entity.model';


interface ActionItem extends CatalogueEntity {
    ['@id']?: string;
    customBlocksAllowed: boolean;
    standardSubsectionBlocksAllowed: boolean;
    standardSubSectionTypesAllowed: boolean;
    webAdmitName?: string;
    required: boolean;
    inUse: boolean;
}

interface ApplicationSubSectionIntegrationItem {
    ['@id']?: string;
    formSubSectionId: number;
    formSubSectionDisplayName: string;
    actions: ActionItem[];
    dataSources: ActionItem[];
}

export interface ApplicationSubSectionIntegrations {
   data: Array<ApplicationSubSectionIntegrationItem>;
}

目录实体.model.ts：

import { CatalogueModel } from './catalogue-model.model';

export interface CatalogueEntity {
  id: number;
  name: string;
  description: string;
  standardName: string;
  tableName: string;
  catalogueModels: CatalogueModel[];
  enabled: boolean;
  createdDate: string;
  updatedDate: string;
  parentCatalogueEntityId?: string;
}

目录-model.model.ts：

export interface CatalogueModel {
  ['@id']?: string;
  id?: number;
  name?: string;
  value?: any;
  description: null;
  standardName?: string;
  type?: string;
  catalogueEntity?: string;
  createdDate?: string;
  updatedDate?: string;
  enabled?: boolean;
}

但是，当我将它分配给这样的变量时，它给了我这样的错误：

 applicationSubSectionIntegrationList: ApplicationSubSectionIntegrations[];
 this.applicationSubSectionIntegrationList = {data : [...]}

对象字面量只能指定已知属性，并且 'ApplicationSubSectionIntegrations[]'.ts(2322) 类型中不存在“数据”

有谁知道如何正确实现这个接口？提前表扬！

标签： typescriptinterface