javascript - 用于嵌套对象数组的 Typescript 接口

我刚接触 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,
}

它不起作用，我猜它应该有一些数组。有什么建议吗？

答案＃1

如果你正在使用两个接口，你可以使用以下两种方法。

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

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

或

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

如果你没有使用两个接口，你可以使用以下方法

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

答案＃2

你可以这样尝试，

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

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

另请注意，数据接口不应以命名约定 "I" 开头。有方法声明的接口应以 "I" 开头，例如 IMethodService