嵌套對象數組的打字稿接口

Question

我是 Typescript 的新手，我必須為以下道具類型構建一個界面：

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

我想為它創建一個接口以在 React + Typescript 應用程序中使用。

這是目前的界面：

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

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

它不起作用，我猜它應該有一些數組。 有什么建議？

Answer 1

你可以這樣試試

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

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

另請注意，數據接口不應以命名約定"I"開頭具有方法聲明的接口應具有"I"如IMethodService