Использование фиктивных данных: Typescript не может быть назначен типу

Question

Я новичок в Angular и полагаю, что неправильно настроил свои фиктивные данные, что приводит к следующей ошибке:

Argument of type '{ "name": string; "refCode": string; "contentId": string; "enabled": boolean; "nextCategoryPath": string; "parent": any; "childCategories": { "name": string; "refCode": string; "contentId": string; "enabled": boolean; "nextCategoryPath": string; "parent": any; }[]; } | { ...; }' is not assignable to parameter of type 'Category'.

Обновлено с дополнительными сообщениями об ошибках:

Types of property 'childCategories' are incompatible.
  Type '{ "name": string; "refCode": string; "contentId": string; "enabled": boolean; "nextCategoryPath": string; "parent": any; }[]' is not assignable to type 'Category[]'.
    Property 'childCategories' is missing in type '{ "name": string; "refCode": string; "contentId": string; "enabled": boolean; "nextCategoryPath": string; "parent": any; }' but required in type 'Category'.

Вот мое json содержимое файла:

{
  "data": {
    "categories": [
      {
        "name": "Health Savings Account",
        "refCode": "hsa",
        "childCategories": null,
        "contentId": "0",
        "enabled": true,
        "nextCategoryPath": "empty",
        "parent": null
      },
      {
        "name": "Flexible spending accounts",
        "refCode": "fsa",
        "contentId": "0",
        "enabled": true,
        "nextCategoryPath": "empty",
        "parent": null,
        "childCategories": [
          {
            "name": "Client profile",
            "refCode": "profile",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Previous providers",
            "refCode": "providers",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Shared program settings",
            "refCode": "settings",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Employer contributions",
            "refCode": "contributions",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Health Care FSA and Limited Purpose FSA",
            "refCode": "healthCareFsa",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Dependent care",
            "refCode": "dependents",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Review and confirm",
            "refCode": "review",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          }
        ]
      },
      {
        "name": "Commuter benefits",
        "refCode": "commuter",
        "contentId": "0",
        "enabled": true,
        "nextCategoryPath": "empty",
        "parent": null,
        "childCategories": [
          {
            "name": "Plan configuration",
            "refCode": "plan-configuration",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          },
          {
            "name": "Review and confirm",
            "refCode": "review",
            "contentId": "0",
            "enabled": true,
            "nextCategoryPath": "empty",
            "parent": null
          }
        ]
      },
      {
        "name": "Enrollment and eligibility data",
        "refCode": "enrollment",
        "contentId": "0",
        "enabled": true,
        "nextCategoryPath": "empty",
        "parent": null
      },
      {
        "name": "Contribution data",
        "refCode": "contribution",
        "contentId": "0",
        "enabled": true,
        "nextCategoryPath": "empty",
        "parent": null
      }
    ]
  }
}

В своем классе обслуживания я импортирую его так:

import menuItems from './shared/utils/nav-menu-items.json';

И объявляю это так:

public menuItems: any;

Затем я перебираю элементы здесь в своем классе компонентов:

const categoryData = 
this.navigationService.getMenuItems().data.categories;
const resource = {};
this.categoryComponentRouteMap =
  resource[this.CATEGORY_COMPONENT_ROUTE_MAP]; // A constant
if (categoryData && categoryData.length > 0) {
  this.categories = [];
  categoryData.forEach(element => {
    this.navigationService.applyCategoryName(
      element, // tried to add <Category> but got an error
      this.categoryComponentRouteMap
    );
    this.categories.push(element /*<// tried to add <Category> but got an error*/);
  });
  this.navigationService.categories = this.categories;
}

Наконец, это метод applyCategoryName () , который добавляет категорию и ее дочерние элементы для данная категория:

public applyCategoryName(category: Category, categoryComponentRouteMap: any) {
if (category.childCategories && category.childCategories.length > 0) {
  category.childCategories.forEach(childCategory => {
    childCategory.parent = category;
    this.applyCategoryName(childCategory, categoryComponentRouteMap);
  });
}

}

Модель для Категория объекта находится здесь:

export class Category {
  public childCategories: Category[];
  public contentId: string;
  public enabled: boolean;
  public name: string;
  public nextCategoryPath: string;
  public parent: Category;
  public refCode: string;

  constructor(childCategories: Category[], enabled: boolean, name: string) 
  {
      this.childCategories = childCategories;
      this.enabled = enabled;
      this.name = name;
    }
  }

Как я уже сказал, я ' Я новичок в этом, и я не уверен, что мне не хватает. Любые советы с благодарностью.

Answer 1

Я думаю, что проблема с childCategories должна быть необязательной, поскольку у некоторых дочерних объектов в вашем объекте ее нет. Добавление ? при объявлении сделает его необязательным:

export class Category {
  public childCategories?: Category[];

Или вы всегда можете инициализировать childCategories как пустой массив

  public childCategories: Category[] = [];