接口內的接口打字稿

Question

我是angular的新手，我試圖通過interface類產生一些結果。

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是未定義的，該如何解決！

謝謝！

Answer 1

創建對象實例時，語法為propertName: 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'
  }]
}];