0Pricing
TypeScript Academy · 课时

null、undefined 与严格空值检查

使用严格模式安全地处理 null 和 undefined。

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

欢迎

在 JavaScript 中，null 和 undefined 是运行时错误的常见来源。TypeScript 的严格空值检查会强制您显式处理它们。

null 与 undefined

`undefined` 表示变量已经声明但尚未赋值。`null` 表示有意设置的空值。在 TypeScript 中，两者是独立的类型。
let a: undefined = undefined;
let b: null = null;

未启用严格空值检查

如果未启用 `strictNullChecks`，null 和 undefined 就是所有类型的子类型。这是旧版 TypeScript 的默认行为，通常并不安全。
// strictNullChecks: false (unsafe default)
let name: string = null; // allowed — dangerous!

启用严格空值检查

启用 `strictNullChecks: true`（包含在 `strict` 中）后，null 和 undefined 只能赋值给自身类型，或显式声明的联合类型。
// strictNullChecks: true
let name: string = null; // Error!
let maybeName: string | null = null; // OK

可选属性

标记为 `?` 的对象属性会隐式成为 `T | undefined`。您必须处理属性不存在的情况。
interface Config {
  host: string;
  port?: number; // number | undefined
}

const c: Config = { host: 'localhost' };
console.log(c.port?.toString()); // optional chaining

缩小可空类型

在访问属性之前，使用 if 检查来缩小包含 null 或 undefined 的联合类型。
function greet(name: string | null): string {
  if (name === null) return 'Guest';
  return 'Hello, ' + name;
}

可选链（?.）

如果左侧为 null 或 undefined，`?.` 运算符会短路并返回 `undefined`，从而避免运行时崩溃。
const user = getUser();
const city = user?.address?.city; // undefined if any step is null

空值合并（??）

只有当左侧为 null 或 undefined 时，`??` 运算符才会返回右侧；而 `||` 在任何假值出现时都会触发。
const port = config.port ?? 3000; // 3000 if port is null/undefined
const label = name ?? 'Anonymous';

非空断言运算符（!）

后缀运算符 `!` 告诉 TypeScript，您确定某个值不是 null 或 undefined。只有在绝对确定时才使用它。
const el = document.getElementById('root')!;
el.textContent = 'Loaded'; // no null check needed

返回 null 还是 undefined

建议使用 `null` 表示有意产生的空结果，使用 `undefined` 表示缺失值或可选值。在代码库中保持一致。
function findUser(id: number): User | null {
  return db.find(u => u.id === id) ?? null;
}

strictNullChecks 防止价值十亿美元的错误

Tony Hoare 将 null 称为“价值十亿美元的错误”。TypeScript 的 strictNullChecks 通过要求您显式处理这些值，避免 null/undefined 导致的崩溃。

快速检查

`??`（空值合并）运算符会在什么情况下返回右侧的值？

回顾

启用 strictNullChecks，防止 null/undefined 错误。使用联合类型表示可为空的值，使用可选链（?.）安全地访问嵌套内容，并使用空值合并（??）提供默认值。

常见问题解答

「null、undefined 与严格空值检查」课时是免费的吗？

是的 — 「null、undefined 与严格空值检查」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「null、undefined 与严格空值检查」这节课中我会学到什么？

使用严格模式安全地处理 null 和 undefined。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「null、undefined 与严格空值检查」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. 基本类型：string、number、boolean
  2. any 类型与避免使用它的原因
  3. unknown 与 any：更安全的选择
  4. null、undefined 与严格空值检查
← 返回 TypeScript Academy