Angular 检查对象的属性是否存在编译错误

当对象的属性存在时，如何让一些代码只在Angular 4 TypeScript中运行？我尝试过以下代码：

它工作正常，但编译器抛出：

auth guard.service.ts34,23:错误TS2339:类型{name:string；url:string；icon:string；uviewable:string；badge:{variant:string；}；}{124;{…'上不存在属性“children”。 属性“children”在类型“{name:string；url:string；icon:string；uviewable:string；badge:{variant:string；}；}”上不存在

这是哪一行：

x.children.forEach(function(data, key){

以下是导航的外观：

  export const navigation = [
  {
    name: 'Dashboard',
    url: '/dashboard',
    icon: 'icon-speedometer',
    uviewable: '*',
    badge: {
      variant: 'info'
      //text: 'NEW'
    }
  },
  {
      name: 'New Leads',
      url: '/sales',
      icon: 'icon-map',
      uviewable: '*',
      children: [
          {
              name: 'Lead Entry',
              url: '/sales/leadentry',
              icon: 'icon-layers',
              uviewable: '*'
          },
          {
              name: 'Upload Leads',
              url: '/sales/leadup',
              icon: 'icon-cloud-upload',
              uviewable: '*'
          }
      ]
  }, //etc..

---

您还可以使用括号符号x['children']代替点符号x.children，然后编译器将停止抱怨

但是，是的，制作一个接口会很好，这会让编译器感到高兴，并且从长远来看会帮助您。您可以具有可选属性：

interface NavigationItem {
  name: string;
  url: string;
  icon: string;
  uviewable: string;
  badge?: any;
  children?: NavigationItem[]
}

---

您可以使用interfaceThere必须是一种比创建接口、为其分配数据、导出数据、然后遍历接口更简单的方法。

interface NavigationItem {
  name: string;
  url: string;
  icon: string;
  uviewable: string;
  badge?: any;
  children?: NavigationItem[]
}