跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

如何通过 TypeScript 模板字面量类型构建具备强约束的国际化翻译 Key 体系

能从编译期锁定结构、防止拼错、支持自动补全;通过模板字面量组合模块与字段名生成层级键(如"user.profile"),用satisfies校验语言包结构,keyof typeof自动推导所有合法key并格式化,再结合泛型与运行时检查实现双重安全。 直接用模板字面量类型定义翻译键,能从编译期锁定结构、防止拼错、支持自动补全,比字符串常量或普通接口更精准。 用模板字面量生成带层级的 key 把嵌套路径转为扁平 key,比如
user.profile.name
→
"user.profile.name"
,再用模板字面量约束其格式: 先定义合法的一级模块名:
type Module = "user" | "settings" | "common";
再定义二级字段名:
type UserKey = "profile" | "avatar" | "logout";
组合成完整 key:
type TranslationKey = `${Module}.${UserKey}`;
(如
"user.profile"
) 支持多层嵌套:
type DeepKey = `${Module}.${UserKey}.${"name" | "email"}`;
结合 satisfies 验证真实语言包结构 光有类型不够,还得确保实际 JSON 或对象符合该 key 体系。用
satisfies
在赋值时校验,又不丢失字面量精度: TypeScript-45分钟入门课件源码 TypeScript-45分钟入门课件源码 下载 定义 key 类型:
type AppKey = "common.ok" | "user.login.title" | "settings.theme.dark";
写语言包时强制匹配:
const en = { "common.ok": "OK", "user.login.title": "Sign In" } satisfies Record;
若漏掉某个 key 或写错拼写(如
"commom.ok"
),TS 编译直接报错 自动推导所有可用 key(零手动维护) 避免硬编码 key 字符串,让 TypeScript 从语言包对象里“掏”出全部合法 key: 用
keyof typeof en
获取 en 对象的所有键字面量类型 再用映射类型 + 模板字面量统一格式化:
type AllKeys = keyof typeof en extends infer K ? K extends string ? `prefix.${K}` : never : never : never;
最终得到类似
"prefix.common.ok" | "prefix.user.login.title"
的联合类型 这个类型可直接用于
translate(key: AllKeys)
参数校验 运行时 key 安全兜底(可选但推荐) 类型再严,也不能替代运行时检查。建议在
translate()
方法里加一层验证: 接收泛型参数
(key: K)
,确保调用时是合法 key 内部仍做
if (!(key in translations)) console.warn(`Missing translation for ${key}`)
这样既保编译安全,又防部署后漏翻译导致白屏

相关文章