如何在TypeScript中声明string>string>number结构用于useState泛型

类型填写方案 #

XXXXXX 位置可以直接填入 { [layoutItemId: string]: number }，填入后的完整代码如下：

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

更简洁的优化写法 #

你也可以用TypeScript内置的Record工具类型简化写法，代码可读性更高、也更方便复用：

// 提前抽离单独定义类型，后续复用更方便
type SelectedLayoutItemIds = Record<string, Record<string, number>>

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

两种写法的结构完全匹配你描述的三层规则：

• 第一层键为字符串类型的eventTimeId
• 第二层键为字符串类型的layoutItemId
• 第三层值为数字类型的count

内容的提问来源于stack exchange，提问作者János