TypeScript Academy · 课时

为什么会有 satisfies

了解 satisfies 如何填补类型注解与类型推断之间的空白。

第 1 / 4 课13 个步骤

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

相互制衡的两个目标

声明 config 时,通常需要同时满足两个目标:根据已知结构进行验证,以及对字面量值进行精确推断。这两个目标往往相互冲突。

type Color = "red" | "green" | "blue";
// We want both: check the values AND remember exactly which ones.

注解会丢失字面量窄化

添加类型注解可以验证对象,但会widened这些值。编译器会忘记您写下的确切字面量。

type Config = { color: string; retries: number };
const cfg: Config = { color: "red", retries: 3 };
// cfg.color is string, not "red" anymore.
console.log(cfg.color.toUpperCase());

为什么扩大类型会带来问题

如果 color 被扩大为 string,您就无法再将它用于需要特定字面量的地方,例如索引另一个类型。

const cfg = { color: "red" } as { color: string };
// const exact: "red" = cfg.color; // Error: string not assignable to "red"
console.log(cfg.color);

不使用注解会失去验证

删除注解可以保留精确推断,但也会移除安全保障。拼写错误和错误的结构都可能未被发现。

const cfg = { color: "rad", retries: 3 };
// No error on the typo "rad" because nothing validates it.
console.log(cfg.color);

验证缺口

没有检查时,拼写错误的颜色等无效值会悄悄流经程序,并可能在距离错误发生位置很远的地方造成故障。

const palette = { primary: "blu" }; // typo, no error
console.log(palette.primary); // "blu"

引入 satisfies 运算符

satisfies 运算符会根据某个类型验证表达式,同时保留精确推断出的类型。两全其美。

type Config = { color: string; retries: number };
const cfg = { color: "red", retries: 3 } satisfies Config;
console.log(cfg.color); // type is "red", value validated

satisfies 保留字面量

使用 satisfies 后,cfg.color 仍然是字面量 "red",而不是宽泛的 string。推断结果得以保留。

type Config = { color: string };
const cfg = { color: "red" } satisfies Config;
const exact: "red" = cfg.color; // OK
console.log(exact);

satisfies 仍会进行验证

如果对象与类型不匹配,satisfies 会报告错误,就像类型注解一样。

type Config = { retries: number };
// const bad = { retries: "three" } satisfies Config; // Error
const good = { retries: 3 } satisfies Config;
console.log(good.retries);

示例动机

请考虑一个路由映射:键必须是已知路由,值则是处理程序名称。我们希望键具有自动补全功能,同时AND验证值,而 satisfies 正好可以做到。

type Routes = Record<string, { method: "GET" | "POST" }>;
const routes = {
  home: { method: "GET" },
  submit: { method: "POST" }
} satisfies Routes;
console.log(routes.home.method); // "GET" literal

三种方法对比

注解:会验证,但会扩大类型。不使用注解:推断精确,但不进行验证。satisfies:既验证又保持精确。对于配置对象,第三种方法更胜一筹。

type C = { color: string };
const a: C = { color: "red" };          // widened
const b = { color: "red" };             // unvalidated
const c = { color: "red" } satisfies C; // validated + precise
console.log(a.color, b.color, c.color);

何时使用 satisfies

每当您定义的常量值必须符合某个类型,同时之后还想使用其中的确切内容时,就应使用 satisfies。

type Sizes = Record<string, number>;
const sizes = { sm: 8, md: 16, lg: 24 } satisfies Sizes;
// keys "sm" | "md" | "lg" stay known for autocomplete
console.log(sizes.md);

快速检查:为什么需要 satisfies

请测试您对 satisfies 存在原因的理解。

回顾:为什么需要 satisfies

您已经了解到,注解可以验证但会扩大类型;不使用注解可以保留精确推断但不会验证;而 satisfies 同时提供验证和精确推断,是配置对象的理想选择。

type C = { color: string };
const c = { color: "blue" } satisfies C;
const exact: "blue" = c.color;
console.log(exact);
免费开始

用 AI 导师学习 TypeScript — 免费

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

课程
101
课程
352

常见问题解答

「为什么会有 satisfies」课时是免费的吗?

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

「为什么会有 satisfies」这节课中我会学到什么?

了解 satisfies 如何填补类型注解与类型推断之间的空白。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗?

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

「为什么会有 satisfies」课时需要多长时间?

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

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

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

此课程中的所有课时

  1. 为什么会有 satisfies
  2. satisfies 与类型注解
  3. satisfies 与 as 断言
  4. satisfies 的实用模式
← 返回 TypeScript Academy