接口内部的接口 TypeScript

Question

我是angular的新手，我试图使用接口类来产生一些结果。

export interface Header {
   parentTitles: string;
   childHeaders: ChildHeader[];
   titleIcon: string;
   url: string;
  }

export interface ChildHeader {
   childTitles: string;
   siblingHeaders: SiblingHeader[];
   icon: string;
   url: string;
 }


export interface SiblingHeader {
  siblingTitles: string[];
  icon: string;
  url: string;

在comp.ts文件中

 headers: Header = [
   {
  parentTitles: 'Settings',
  childHeaders: ChildHeader = [{
    childTitles: 'General Setup',
    siblingHeaders: SiblingHeader = [{
      siblingTitles: ['Vessel', 'Port', 'Owner', 'Engine Type', 
    'Vessel Type'],
      icon: '',
      url: ''
    }],
    icon: '',
    url: 'home/general-setup'
      }]
   }

  ];

所以，ChildHeader和SiblingHeader未定义，如何解决这个问题！

谢谢！

- EngineSense

---

你不能在对象字面量中注释类型。你的 headers 是一个 Header[] 而不是一个 Header。我预计你会得到很多编译时错误需要修复。当你说 "ChildHeader 和 SiblingHeader 未定义"，你是指在运行时吗？ - jcalz

Answer 1

创建对象实例时，语法为propertyName: value。您不能将类型用作值。您收到的错误是，例如SiblingHeader被用作值，但它不是值--它是一个类型。

然而，由于您已经有了header: Header，您已经声明了header对象作为标题，这意味着其childHeaders属性已经是ChildHeader的数组，它们本身是具有siblingHeaders属性作为SiblingHeader数组的对象数组。也就是说，在对象字面量中，您不需要为属性指定类型，因为它们来自对象本身的类型。

const headers: Header[] = [{
  parentTitles: 'Settings',
  childHeaders: [{
    childTitles: 'General Setup',
    siblingHeaders: [{
      siblingTitles: ['Vessel', 'Port', 'Owner', 'Engine Type',  'Vessel Type'],
      icon: '',
      url: ''
    }],
    icon: '',
    url: 'home/general-setup'
  }]
}];

- Explosion Pills