CODEWITHSUNDEEP
angulartypescript
EngineSense
EngineSense

Reputation: 3616

Interface inside Interface typescript

I'm new to angular, i've trying to produce some result with the interface class.

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;

}

On the comp.ts file 

 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'
      }]
   }

  ];

So the ChildHeader and SiblingHeader is undefined, how to solve this!.

Thanks!

Upvotes: 3

Views: 14495

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191739

When you create an object instance, the syntax is propertName: value. You cannot use types as values. The error you are getting is that, for example SiblingHeader is being used as a value, but it's not a value -- it's a type.

However, since you already have header: Header, you've already declared the header object as a header which means that its childHeaders property is already an array of ChildHeader, which themselves are arrays of objects with the siblingHeaders property as an array of SiblingHeader. That is to say you don't need properties to have types in object literals since they are derived from the type of the object itself.

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'
  }]
}];

Upvotes: 3

Related Questions