javascript - Typescript-gränssnitt för en nästlad matris av objekt

Jag är ny på Typescript och jag måste skapa ett gränssnitt för följande propstyp:

const myProps = [
  {
    name: 'name1',
    on: true,
    children: [
      { name: 'test1', href: '#' },
      { name: 'test2', href: '#' },
      { name: 'test3', href: '#' }
    ]
  },
  {
    name: 'name2',
    on: false,
    children: [
      { name: 'test1', href: '#' },
      { name: 'test2', href: '#' },
      { name: 'test3', href: '#' },
      { name: 'test4', href: '#' },
      { name: 'test5', href: '#' }
    ]
  },
  {
    name: 'name3',
    on: false,
    children: [{ name: 'test1', href: '#' }]
  }
];

Jag vill skapa ett gränssnitt för att det ska kunna användas i en React + Typescript-app.

Det här är gränssnittet hittills:

export interface IChildren {
  name: string,
  href: string
}

export interface IMyProps {
  name: string,
  on: boolean,
  children: IChildren,
}

Det fungerar inte, det borde ha några arrayer antar jag. Några förslag?

Svar #1

Om du använder två gränssnitt kan du använda följande två metoder.

  export interface ChildrenProp {
        name: string,
        href: string
    }

  export interface MyProps {
        name: string;
        on: boolean;
        children: ChildrenProp[]
    }

eller

    export interface MyProps {
        name: string;
        on: boolean;
        children: Array<ChildrenProp>
    }

Om du inte använder två gränssnitt kan du använda följande metod

export interface MyProps {
    name: string;
    on: boolean;
    children: {
       name: string,
       href: string
    }[]
}

Svar #2

Du kan försöka så här,

 export interface CommonProps {
    name: string;
    href: string;
}

export interface MyProps {
    name: string;
    on: boolean;
    children: Array<CommonProps>;
}

Observera också att datagränssnitt inte bör börja med namngivningskonventioner "I". Gränssnitt som har metoddeklarationer bör ha "I" som IMethodService