TypeScript Academy · 课时

使用 ?. 进行可选链调用

Q: 「使用 ?. 进行可选链调用」这节课中我会学到什么？

安全地访问可能为 null 的深层嵌套属性。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

安全地访问可能为 null 的深层嵌套属性。

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

可选链运算符

可选链（?.）让您可以安全地访问某个值可能为 null 或 undefined 时的属性。如果该值为空，整个表达式会短路为 undefined，而不是抛出错误。

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

遇到空值时短路

当 ?. 前的操作数是 null 或 undefined 时，求值会立即停止并返回 undefined。链中的其余部分不会执行。

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

串联多个层级

您可以在深层访问的每个不确定步骤使用 ?.。任何一个为空的链接都会使整个链短路，从而避免“无法读取未定义值的属性”这类错误。

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

结果类型包含 undefined

由于链式访问可能产生 undefined，TypeScript 会将 undefined 添加到结果类型中。如果属性类型是 string，链式访问的结果就是 string | undefined。

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

处理 undefined 结果

由于结果可能是 undefined，您通常需要检查它，或为它提供回退值。类型系统会提醒您处理缺失的情况。

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

与 && 链比较

在 ?. 出现之前，开发者会编写很长的 && 链：a && a.b && a.b.c。可选链以更加简洁的方式表达相同意图，而且从上到下更易读。

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

为什么 ?. 比 && 更好

&& 方式会将任何假值（0、''、false）视为停止点，这可能导致错误。可选链只会在遇到 null 或 undefined 时停止，这通常才是您想要的行为。

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

对对象数组使用可选链

可选链适用于任何属性访问。结合元素访问后，它可以安全地访问嵌套的对象数组。

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

短路会停止整个表达式

链发生短路后，即使短路之后写有未使用 ?. 的属性访问，也会被跳过。整个表达式会立即求值为 undefined。

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

对函数返回值使用可选链

您可以从函数调用的结果继续使用可选链。如果函数返回一个空值，后续访问就会安全地短路。

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

一个实际的配置示例

读取 partial 配置或应用程序接口响应时，可选链特别有用，因为其中的嵌套字段可能不存在。它让访问过程清晰易读，并避免程序崩溃。

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

快速检查

测试您对可选链的理解。

回顾：可选链

您已经学会，?. 会：

安全地访问可能为 null/undefined 的值上的属性。
当链中的链接为空时，将整个表达式短路为 undefined。
将 undefined 添加到结果类型中。
改进 && 链：只在遇到空值时停止，而不是在遇到所有假值时停止。

接下来学习空值合并运算符。

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

常见问题解答

「使用 ?. 进行可选链调用」课时是免费的吗？

是的 — 「使用 ?. 进行可选链调用」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「使用 ?. 进行可选链调用」这节课中我会学到什么？

安全地访问可能为 null 的深层嵌套属性。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「使用 ?. 进行可选链调用」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy