Typescript interface for a nested array of objects

Question

I'm new to Typescript and I have to build an interface for the following props type:

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

I want to create an interface for it to be used in a React + Typescript app.

This is the interface so far:

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

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

It is not working, it should have some arrays I guess. Any suggestions?

Type of children property in IMyProps should be an array, either Array<IChildren> or IChildren[] — Wazeed
– Wazeed, Commented Nov 11, 2021 at 9:13

Ishan Fernando · Accepted Answer · 2022-05-04 17:47:07Z

3

If you are using two interfaces you can use the following two methods.

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

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

or

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

If you are not using two interfaces you can use the following method

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

answered May 4, 2022 at 17:47

Ishan Fernando

2,8781 gold badge34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sohan · Accepted Answer · 2021-11-11 09:22:21Z

2

You can try like this,

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

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

Also Note data interfaces should not start with naming conventions "I" Interfaces those have method declarations should have "I" like IMethodService

answered Nov 11, 2021 at 9:22

Sohan

6,8796 gold badges40 silver badges59 bronze badges

Collectives™ on Stack Overflow

Typescript interface for a nested array of objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related