如何为结构为{String: String[]}的虚拟键盘JSON定义最佳Typescript Typing

可行性结论 #

你设想的用Record类型实现的方案完全可行，是当前场景的最优适配方案。

具体类型定义 #

根据行名是否固定可分为两种实现场景：

场景1：布局内的行名是固定已知集合 #

如果所有布局下的行名是预先确定的（比如固定只有row1、row1_shift、row2等），用以下定义，能获得完整的属性自动提示和类型校验：

// 按你实际支持的行名调整联合类型的取值即可
type KeyboardRowKey = 'row1' | 'row1_shift' | 'row2' | 'row2_shift' | 'row3' | 'row3_shift' | 'row4'

// 单套键盘布局的类型
type SingleKeyboardLayout = Record<KeyboardRowKey, string[]>

// 整个布局配置文件的类型：顶层为任意布局名字符串
type KeyboardLayoutConfig = Record<string, SingleKeyboardLayout>

如果需要更严格限制顶层的布局名（比如只允许default、emoji、number这几个预设布局），可以把顶层的string替换为字面量联合：

type KeyboardLayoutName = 'default' | 'emoji' | 'number'
type KeyboardLayoutConfig = Record<KeyboardLayoutName, SingleKeyboardLayout>

场景2：布局内的行名不固定，支持动态新增任意行 #

如果行名不需要提前预设，可动态生成，直接用嵌套Record即可：

type KeyboardLayoutConfig = Record<string, Record<string, string[]>>

使用示例 #

// 导入你的JSON布局文件
import rawLayoutConfig from './keyboard-layout.json' assert { type: 'json' }

// 绑定类型后使用
const keyboardLayouts: KeyboardLayoutConfig = rawLayoutConfig

// 静态访问有类型提示和校验
const defaultShiftRow1 = keyboardLayouts.default.row1_shift // 自动推断为string[]

// 动态访问也能正确识别类型
const currentLayoutName = 'emoji'
const currentLayout = keyboardLayouts[currentLayoutName] // 自动推断为SingleKeyboardLayout类型

内容的提问来源于stack exchange，提问作者Josh