如何在 TypeScript 中声明字符串 > 字符串 > 数字结构？

Question

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
  >(); 

Answer 1

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.

Answer 2

Finally I declared a new interface:

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

and used here:

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