TypeScript Academy · 课时

新鲜度与多余属性检查

了解为什么多余属性会在某些上下文中触发错误

第 3 / 4 课13 个步骤

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

什么是新鲜性

新鲜性是 TypeScript 中的一个概念:对象字面量在创建时会被视为“新鲜”的。新鲜对象会进行严格的多余属性检查,而拓宽后的对象不会。

interface Point { x: number; y: number; }
const p: Point = { x: 1, y: 2, z: 3 }; // Error: 'z' not in Point

多余属性检查实战

将对象字面量直接赋值给具有类型的变量,或将其作为函数参数传递时,TypeScript 会报告目标类型中不存在的额外属性。

function setPoint(p: { x: number; y: number }) {}
setPoint({ x: 1, y: 2, z: 3 }); // Error: 'z' excess property

为什么存在多余属性检查

它可以捕获配置对象中的拼写错误和意外属性,而这些正是 JavaScript 中常见的错误来源。

interface Options { timeout: number; retry?: boolean; }
const opts: Options = { timeout: 3000, retrey: true }; // Error — typo!

新鲜性如何丢失

对象字面量一旦被赋值给中间变量,就不再是“新鲜”的,多余属性检查也不会应用于拓宽后的类型。

const opts = { timeout: 3000, retry: true, extra: "surprise" };
const o: Options = opts; // No error — freshness lost on assignment

类型断言会绕过新鲜性

使用 as 类型断言也会绕过多余属性检查,这可能会隐藏错误。

const o = { timeout: 3000, typo: true } as Options; // No error

交叉类型中的多余属性检查

交叉类型有时会放宽多余属性检查,因为额外属性可能属于交叉类型中的某个成员。

type A = { x: number };
type B = { y: number };
const ab: A & B = { x: 1, y: 2 }; // OK

Readonly 与多余属性

多余属性检查同样适用于只读对象类型——这条规则关注的是结构形状,而不是可变性。

interface Cfg { readonly host: string; }
const c: Cfg = { host: "localhost", port: 3000 }; // Error

索引签名与多余属性

向类型添加索引签名后,该类型可以接受任意其他字符串键属性,从而实际上禁用了多余属性检查。

interface Flexible { name: string; [key: string]: unknown; }
const f: Flexible = { name: "ts", extra: true }; // OK

可选属性与新鲜性

可选属性不会放宽多余属性检查。完全没有列出的属性——即使它本可以是可选属性——仍然会被报告为多余属性。

interface Shape { color?: string; }
const s: Shape = { color: "red", size: 10 }; // Error: 'size' excess

实用模式

如果要在不产生错误的情况下,将额外的配置属性传递给具有类型的接口,请使用中间变量,或在接口中使用索引签名。

// Option 1: intermediate variable (freshness lost)
const cfg = { timeout: 3000, debugMode: true };
const o: Options = cfg;
// Option 2: index signature in interface

回顾:新鲜性

新鲜性适用于新鲜的对象字面量,使赋值时能够执行多余属性检查。要允许额外属性,请赋值给中间变量,或使用索引签名。

快速检查

多余属性检查在什么情况下不适用?

您学到的内容

新鲜性和多余属性检查可以保护您免受对象字面量中的拼写错误和意外属性影响。请理解新鲜性何时会丢失,以避免令人意外的类型错误或隐藏的错误。

免费开始

用 AI 导师学习 TypeScript — 免费

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

课程
101
课程
352

常见问题解答

「新鲜度与多余属性检查」课时是免费的吗?

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

「新鲜度与多余属性检查」这节课中我会学到什么?

了解为什么多余属性会在某些上下文中触发错误 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗?

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

「新鲜度与多余属性检查」课时需要多长时间?

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

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

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

此课程中的所有课时

  1. 类型扩展与收窄机制
  2. 上下文类型:从上下文推断
  3. 新鲜度与多余属性检查
  4. const 断言与 as const
← 返回 TypeScript Academy