TypeScript Academy · 课时

区域设置感知的类型推断

确保所有区域设置共享相同的键结构。

第 4 / 4 课13 个步骤

区域设置感知的类型推断 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 4 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

基于区域设置的类型推断

应用会提供多个区域设置(en、tr、de……)。我们希望有一种类型,能够在任何区域设置缺少基础区域设置中已有的键时报告错误,这样翻译就不会在不知不觉中失去同步。

基础区域设置

选择一个区域设置(通常是en)作为规范的键结构。所有其他区域设置都必须匹配其结构。

const en = {
  greeting: "Hello",
  cart: { empty: "Empty", checkout: "Checkout" },
} as const;

type Base = typeof en;

约束其他区域设置

将每个额外区域设置的类型设为基础结构。现在,如果该区域设置文件缺少键,就会产生编译错误。

const tr: Base = {
  greeting: "Merhaba",
  cart: { empty: "Bo\u015f", checkout: "\u00d6deme" },
};
// Omitting cart.checkout -> Error: property missing

同时捕获额外键

使用基础类型作为注解,还可以标记区域设置中存在但基础结构中不存在的未知键,从而捕获残留或拼写错误的条目。

const de: Base = {
  greeting: "Hallo",
  cart: { empty: "Leer", checkout: "Kasse" },
  extra: "oops", // Error: not in Base
};

定义区域设置的辅助函数

泛型辅助函数会强制结构保持一致,同时保留每个值,从而提供清晰的单区域设置定义位置。

function defineLocale<T extends Base>(loc: T): T {
  return loc;
}

const fr = defineLocale({
  greeting: "Bonjour",
  cart: { empty: "Vide", checkout: "Paiement" },
});

所有区域设置的注册表

将区域设置收集到一个记录中。将每个值约束为Base,可以保证整个应用具有统一的结构。

const locales: Record<string, Base> = { en, tr, de: fr };
// every entry must have the full Base key structure

类型层面的深度相等性

若要获得更严格的保证,您可以构建一个SameKeys类型,深入比较键结构;当结构不同时,它会解析为错误类型,其检查范围超出普通注解的能力。

type SameKeys<A, B> =
  keyof A extends keyof B
    ? keyof B extends keyof A ? true : false
    : false;

只推导一次键

由于所有区域设置都共享Base,键路径类型(来自前一课)只需从Base计算一次,之后便可供每个区域设置复用,因此t的类型定义与区域设置无关。

type Key = LeafPaths<Base>;
// same valid keys regardless of active locale

运行时选择区域设置

在运行时,您可以使用当前区域设置作为键从注册表中进行索引;类型系统已经保证每个区域设置具有相同的键,因此查找是安全的。

function translate(locale: keyof typeof locales, key: Key): string {
  return getPath(locales[locale], key);
}

检测区域设置之间的缺失键

如果无法直接为每个文件添加注解(例如导入对象表示法文件时),构建时类型检查可以将每个导入的区域设置与Base进行比较,并显示一个列出缺失键的差异类型。

type Missing<L> = Exclude<keyof Base, keyof L>;
type TrMissing = Missing<typeof tr>; // never if complete

为何重要

无类型的国际化代码会逐渐偏离:添加到en中的键可能被遗忘在de中,最终显示空字符串或英文字符串。将每个区域设置约束为共享的基础结构,可以把这种遗漏转化为编译错误,从而确保所有区域设置完整且一致。

快速检查

确认您对基于区域设置的类型推断的理解。

回顾

您选择了一个基础区域设置作为规范结构,并将所有其他区域设置约束为该结构,因此缺少键或存在额外键都会导致编译失败。defineLocale辅助函数和受约束的注册表可以让所有区域设置在结构上保持一致,而键路径只需从基础结构推导一次。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
101
课程
352

常见问题解答

「区域设置感知的类型推断」课时是免费的吗?

是的 — 「区域设置感知的类型推断」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 TypeScript Academy 课程的其余内容,请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「区域设置感知的类型推断」这节课中我会学到什么?

确保所有区域设置共享相同的键结构。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 4 节课,共 4 节。

「区域设置感知的类型推断」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗?

能。每节 TypeScript Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 翻译键的类型标注
  2. 插值的类型安全
  3. 使用类型处理复数形式
  4. 区域设置感知的类型推断
← 返回 TypeScript Academy