how you can type complex object of object in typescript?

Question

Hi I have this complex object and I need to create a type or interface for it in my react --typescript-template app

const columnsFromBackend = {
  ["0"]: {
    name: "Terminator Group",
    items: [
      {
        filepath: "0.jpg",
        group: "terminator",
        id: "0",
        isClicked: false,
        title: "image_0",
      },
      {
        filepath: "1.jpg",
        group: "terminator",
        id: "1",
        isClicked: false,
        title: "image_1",
      },
     ]
   }
}

I have tried this

export type Character = {
    name: string;
    items: {
      filepath: string;
      group: string;
      id: string;
      isClicked: boolean;
    }
  xxxxxxx
  const [columns, setColumns] = useState<Character{}>(columnsFromBackend);

but it didn't work?

@NatalieMae's answer should have you covered. But you probably also want an array of characters for you state. useState<Character[]>. [] not {}. — Alex Wayne
– Alex Wayne, Commented Aug 2, 2022 at 0:12

Natalie Mae · Accepted Answer · 2022-08-02 00:07:10Z

1

You have defined your items only as an object rather than an array of objects.

Try:

export type CharacterItem = {
    filepath: string;
    group: string;
    id: string;
    isClicked: boolean;
   }

export type Character = {
    name: string;
   items: CharacterItem[]
   }

Or something similar!

edited Aug 2, 2022 at 0:07

answered Aug 2, 2022 at 0:03

Natalie Mae

374 bronze badges

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

3 Comments

Alex Wayne Over a year ago

Array<CharacterItem/> is invalid syntax. You probably meant Array<CharacterItem>. Although, CharacterItem[] is probably more common.

Natalie Mae Over a year ago

I sure did! I've been playing with TSX too much! Thanks pal!

Yusuf Over a year ago

thank you, however, its still lenting red line underneath columnsFromBackend as in const [columns, setColumns] = useState<Character[]>(columnsFromBackend); with this error message ``` Argument of type '{ 0: { name: string; items: { filepath: string; group: string; id: string; isClicked: boolean; title: string; }[]; }; 1: { name: string; items: { filepath: string; group: string; id: string; isClicked: boolean; title: string; }[]; }; }' is not assignable to parameter of type 'Character[] | (() => Character[])'.ts(2345) ```

Collectives™ on Stack Overflow

how you can type complex object of object in typescript?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related