How to declare string > string > number structure in TypeScript?-CodePudding

I need to declare a useState, but I do not clealy understand TypeScript. What should I write in place of XXXXXX. I have a strict JSON with string > string > number structure and I will populate selectedLayoutItemIds from it. Top level id is called eventTimeId, 2nd level I would call layoutItemId, 3rd level count. Would you help a bit?

const [selectedLayoutItemIds, setSelectedLayoutItemIds] = useState<
    { [eventTimeId: string]: XXXXXX } | undefined
  >();

CodePudding user response：

You only have to describe the structure of the data as you would do in a regular json and the 1st & 2nd level keys will be treated as strings:

interface LayoutItemIds { 
    eventTimeId: {
        layoutItemId: {
            count: number;
        }
    } 
}

const [selectedLayoutItemIds, setSelectedLayoutItemIds] = useState<LayoutItemIds | undefined>();

Here is a playground to see it in action.

CodePudding user response：

Finally I declared a new interface:

export type LayoutItemIdsWithAvailability = {
  [layoutItemId: string]: number;
};

and used here:

const [selectedLayoutItemIds, setSelectedLayoutItemIds] = useState<
  { [eventTimeId: string]: LayoutItemIdsWithAvailability } | undefined
>();