2026/9/20 19:17:57
FEATURED · 精选文章 
教程【免费下载链接】typescript-book:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 项目地址https://gitcode.com/gh_mirrors/ty/typescript-book点击查看免费下载导读本文基于《The definitive guide to TypeScript》本仓库 typescript-book的 docs/types/typeGuard.md 一章系统讲解 TypeScript 中**类型守卫Type Guard**的全部形态内置的typeof、instanceof、in字面量守卫以及在strictNullChecks下的 null/undefined 排除再到可完全自定义的用户定义类型守卫。读完本文你将能理解 TypeScript 代码流分析如何在条件块内自动收窄联合类型掌握判别可辨识联合的实战写法并规避回调函数中类型守卫失效这一经典陷阱。文中所有示例均可在仓库 code/types/typeGuard.ts 中直接运行验证对应的编译产物见 code/types/typeGuard.js。一、什么是 Type Guard条件块内的类型收窄Type Guard类型守卫允许你在一个条件块内收窄对象的类型。这是 TypeScript 代码流分析control flow analysis能力在语法层面上的直接体现当程序执行流进入某个由守卫表达式控制的代码块时编译器会基于该表达式的语义把变量在此块内的类型收窄为更具体的子集。一个典型场景是联合类型参数函数接收number | string时只有先确定当前值是哪种类型才能安全调用该类型独有的方法。下面的 code/types/typeGuard.ts 中quick命名空间展示了最朴素的用法function doSomething(x: number | string) { if (typeof x string) { // 块内 TypeScript 知道 x 一定是 string console.log(x.substr(1)); // OK } x.substr(1); // Error: 无法保证 x 是 string }类型守卫的价值在于既能在编译期发现错误又不需要任何运行时成本——它完全基于你本来就该写的 JavaScript 条件判断typeof、instanceof等TypeScript 只是顺便把这些判断的结果内化到了类型系统里。守卫之外的代码不会继承收窄结果这正是上面x.substr(1)报错的原因。二、内置守卫一typeofTypeScript 对 JavaScript 的instanceof和typeof操作符有原生认知。只要在条件块中使用它们TypeScript 就会认为该块内变量的类型发生了变化。原文档给出了一个绝佳的例子TypeScript 能识别出某个方法在string上不存在从而揪出用户的拼写错误function doSomething(x: number | string) { if (typeof x string) { // 块内 TypeScript 知道 x 一定是 string console.log(x.subtr(1)); // Error: subtr 不存在于 string console.log(x.substr(1)); // OK } x.substr(1); // Error: 无法保证 x 是 string }要点归纳typeof返回值是字符串字面量string、number、boolean、symbol、bigint、undefined、object、function。只有与这些字面量精确比较时TypeScript 才会执行收窄。typeof x string会把string | number收窄为string同理typeof x number收窄为number。类型守卫的作用域严格限定在条件块内else分支和块外代码都不会错误地继承收窄结论因此x.substr(1)位于 if 之外必然报错。局限性typeof对复杂对象无能为力——对象返回的都是object数组、日期、普通对象无法靠它区分。在仓库中quick命名空间的编译产物可以在 code/types/typeGuard.js 查看可见类型守卫只是编译期的信息运行时依然只是普通的typeof判断function doSomething(x) { if (typeof x string) { console.log(x.subtr(1)); console.log(x.substr(1)); } x.substr(1); }三、内置守卫二instanceof当处理的是类class实例而不是普通对象时instanceof是比typeof更合适的守卫。因为typeof new Foo()只会得到object无法区分Foo与Bar而instanceof能精确判断原型链上的构造函数。原文档的instance示例见 code/types/typeGuard.tsclass Foo { foo 123; common 123; } class Bar { bar 123; common 123; } function doStuff(arg: Foo | Bar) { if (arg instanceof Foo) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } if (arg instanceof Bar) { console.log(arg.foo); // Error! console.log(arg.bar); // OK } console.log(arg.common); // OK —— 两个类共有成员无需收窄即可访问 console.log(arg.foo); // Error! console.log(arg.bar); // Error! } doStuff(new Foo()); doStuff(new Bar());这个例子同时展示了收窄的两种方向正向收窄arg instanceof Foo块内arg被收窄为Foo因此可以访问arg.foo访问arg.bar报错无收窄时的基线状态在函数体其余位置arg仍是联合类型Foo | Bar只能访问两个成员都具备的common属性这正是结构类型系统下共有属性的天然判别能力。3.1 TypeScript 甚至理解elseTypeScript 对if/else结构有额外的智能当if收窄掉一种类型后else块内它肯定不是该类型。这意味着联合类型的其余成员在else中同样被精确收窄无需重复判断function doStuff(arg: Foo | Bar) { if (arg instanceof Foo) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } else { // 必然是 Bar console.log(arg.foo); // Error! console.log(arg.bar); // OK } }对二成员联合而言else分支是全自动的穷尽分支即便联合有更多成员else内收窄得到的也是除 Foo 外的其余成员集合同样安全。四、内置守卫三in操作符in操作符用于安全地检查对象上是否存在某属性它同样可以作为类型守卫。原文档示例interface A { x: number; } interface B { y: string; } function doStuff(q: A | B) { if (x in q) { // q: A } else { // q: B } }实践要点in守卫非常适合纯接口interface联合——这些类型在运行时没有类原型可供instanceof判别也没有办法用typeof区分而结构上成员集合又互不相同判别条件应使用与某个联合成员强绑定的独有属性如A独有的x此时if与else两个分支都能得到精确收窄若某属性在多个成员中都存在in只能收窄为包含该属性的成员集合无法精确到单一成员此时应改用下文的可辨识联合discriminated union方案。五、字面量守卫与可辨识联合Literal Type Guard5.1 用/区分字面量你可以用//!/!来区分联合类型中的字面量成员。原文档的三态示例type TriState yes | no | unknown; function logOutState(state: TriState) { if (state yes) { console.log(User selected yes); } else if (state no) { console.log(User selected no); } else { console.log(User has not made a selection yet); } }字面量类型string / number / boolean 的精确值是 TypeScript 的基础能力详见 docs/types/literal-types.md。单独的yes类型用处有限但把它们组合进联合类型如TriState后每一次比较都能让 TypeScript 精确收窄剩余取值。5.2 用共有属性名判别联合成员可辨识联合字面量守卫更强大的用法是当联合的每个成员都拥有一个同名属性且该属性是互不相同的字面量类型时可以检查这个共享属性来判别整个联合——这就是著名的可辨识联合Discriminated Union。原文档示例type Foo { kind: foo, // 字面量类型 foo: number } type Bar { kind: bar, // 字面量类型 bar: number } function doStuff(arg: Foo | Bar) { if (arg.kind foo) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } else { // 必然是 Bar console.log(arg.foo); // Error! console.log(arg.bar); // OK } }这里kind就是判别属性discriminant property。一旦arg.kind foo成立TypeScript 能确定arg只能是Foo从而在块内安全访问arg.fooelse分支则自动收窄为Bar。这种字面量类型 共享判别属性的模式是本仓库 docs/types/discriminated-unions.md 的主题后续可进一步做穷尽性检查exhaustive checks为联合新增成员后编译器会要求所有分支必须处理新情况否则落入never类型的兜底分支时报错相关原理可参阅 docs/types/never.md。六、strictNullChecks下的 null / undefined 守卫默认情况下TypeScript 允许把null和undefined赋给任意类型见 docs/options/strictNullChecks.md。一旦开启strictNullChecks它们成为独立类型此时类型守卫对于消除 Object is possibly undefined 类错误至关重要。原文档给出了一条极简但高效的规则function foo(a?: number | null) { if (a null) return; // a 现在是 number }要点说明使用宽松相等 null/! null而不是一次判断即可同时排除null和undefined这是 JavaScript 语义null undefined为真在if (a null) return;之后编译器知道a已经不可能为null或undefined于是自动收窄为number该写法同时覆盖了可选参数可能为undefined和显式传入null两种情况是处理可空联合最实用的惯用法。七、用户定义类型守卫User Defined Type Guards7.1 为什么需要自定义守卫JavaScript 的内建运行时内省能力有限。当你处理的只是普通 JavaScript 对象借助结构类型系统建模时既没有instanceof可用的类原型也没有办法靠typeof区分不同形状的对象。此时你需要自己编写类型守卫函数。7.2 类型谓词arg is SomeType语法用户定义类型守卫本质上是返回类型为类型谓词type predicate的特殊函数函数名(参数名) 的返回类型写成 someArgumentName is SomeType。原文档示例见 code/types/typeGuard.tsinterface Foo { foo: number; common: string; } interface Bar { bar: number; common: string; } /** * 用户定义类型守卫 */ function isFoo(arg: any): arg is Foo { return arg.foo ! undefined; } /** * 用户定义类型守卫的使用示例 */ function doStuff(arg: Foo | Bar) { if (isFoo(arg)) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } else { console.log(arg.foo); // Error! console.log(arg.bar); // OK } } doStuff({ foo: 123, common: 123 }); doStuff({ bar: 123, common: 123 });语法与语义细节arg is Foo是类型谓词位于返回类型位置。arg必须是函数参数列表中声明的参数名函数体返回布尔值但类型谓词让 TypeScript 把true与参数是 Foo绑定isFoo(arg)为真时arg被收窄为Fooelse中收窄为Bar谓词只是编译器契约运行时仍执行普通逻辑这里是arg.foo ! undefined的鸭子类型检查——守卫的运行时正确性由你负责写错谓词与实现不符时TypeScript 不会替你兜底参数常用any或unknown以便接受任意联合成员再在函数内部用自定义逻辑判别。从编译产物 code/types/typeGuard.js 可以看到类型谓词完全不影响运行时生成的 ES5 代码中isFoo就是一个返回布尔值的普通函数这也印证了类型守卫是纯编译期特性这一事实。7.3 常见自定义守卫形态属性存在性判别return arg.foo ! undefined;如上例数组判定return Array.isArray(arg);字段类型判定return typeof arg.id number;判别属性判定return arg.kind foo;可与可辨识联合组合让isFoo内部只做字面量比较。八、类型守卫与回调函数一个经典的收窄失效陷阱8.1 问题守卫不会在回调中保持TypeScript 不会假设类型守卫在回调中仍然有效因为做这种假设是危险的——回调的调用时机与调用环境不受当前作用域控制守卫保护的变量可能在回调执行前已被外部修改。原文档示例// 示例环境 declare var foo:{bar?: {baz: string}}; function immediate(callback: ()void) { callback(); } // 类型守卫 if (foo.bar) { console.log(foo.bar.baz); // 可以 functionDoingSomeStuff(() { console.log(foo.bar.baz); // TS 错误Object is possibly undefined }); }注意immediate是同步立即调用的守卫理论上仍然成立但 TypeScript 出于安全考量一律不再信任守卫在回调内的结论于是foo.bar.baz在回调内报错。这与本仓库 code/types/typeGuard.ts 中守卫示例的严格检查风格一致——宁可保守也不放过潜在的undefined访问。8.2 修复把收窄后的值存入局部变量解决方案非常简单把守卫推断出的安全值存入一个局部常量。局部变量不可能被外部作用域修改TypeScript 可以轻松确认它的类型// 类型守卫 if (foo.bar) { console.log(foo.bar.baz); // 可以 const bar foo.bar; functionDoingSomeStuff(() { console.log(bar.baz); // 可以 —— bar 是捕获的局部常量 }); }这条经验可以推广到一切异步/回调 可空值场景在守卫通过后立即用const快照安全值后续无论回调还是闭包都引用该常量既消除了类型报错也让代码免受外部修改的隐患。九、仓库实操如何在本项目中运行守卫示例仓库code/types/目录为所有类型系统章节提供了可编译的 TypeScript 源码与对应的 ES5 编译产物守卫源码code/types/typeGuard.ts含quick、instance、instanceElse、userDefined四个命名空间分别对应typeof、instanceof、else收窄、用户定义守卫四类主题编译产物code/types/typeGuard.js可用node直接执行观察运行时行为编译配置code/types/tsconfig.json其中target: es5、module: commonjs是本书示例的标准配置noImplicitAny: false便于示例聚焦类型守卫本身而不被严格模式噪音干扰。在仓库根目录执行以下命令即可复现编译cd code/types npx tsc提示示例中的报错行如x.subtr(1)、arg.bar是有意为之的教学示例用于展示类型守卫的收窄边界并非代码缺陷运行时请以不报错的行为为准。十、总结六种守卫形态与选型速查守卫形态适用场景关键语法仓库出处typeof原始类型联合string/number/boolean…typeof x stringcode/types/typeGuard.ts#L1-L9instanceof类实例联合arg instanceof Foocode/types/typeGuard.ts#L11-L39in接口对象联合、按成员属性区分x in qdocs/types/typeGuard.md字面量守卫字面量联合、可辨识联合判别arg.kind foodocs/types/discriminated-unions.md null守卫开启strictNullChecks后排除 null/undefinedif (a null) return;docs/options/strictNullChecks.md用户定义守卫普通对象、无类原型的结构化数据function isFoo(arg: any): arg is Foocode/types/typeGuard.ts#L66-L103最后三条进阶阅读路径供继续深入字面量类型基础见 docs/types/literal-types.md可辨识联合的穷尽性检查、never兜底与switch写法见 docs/types/discriminated-unions.mdnever类型作为底类型与守卫配合做编译期穷尽性保障的原理见 docs/types/never.md。掌握了类型守卫你就在 TypeScript 的联合类型世界中拥有了分而治之的能力先收窄再安全地访问成员把运行时的判断转化为编译期的保证。赞分享教程【免费下载链接】typescript-book:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 项目地址https://gitcode.com/gh_mirrors/ty/typescript-book点击查看免费下载相关推荐如何掌握RedwoodJS联合类型类型守卫与类型收窄实用指南如何掌握RedwoodJS联合类型类型守卫与类型收窄实用指南 RedwoodJS是一个全栈JavaScript框架它结合了React、GraphQL和Pri后端前端Web框架开发工具MCP Apps视图状态持久化不丢状态的完整配方MCP Apps视图状态持久化不丢状态的完整配方 MCP Appsext apps 官方规范与 SDK 仓库让 MCP 服务器能向 AI 聊天客户端推送可MCP 服务前端AI 技能claude-skills 项目 typescript-pro 技能指南TypeScript 类型守卫与类型窄化Type Guards and Narrowing实战claude skills 项目 typescript pro 技能指南TypeScript 类型守卫与类型窄化Type Guards and NarrowAI 技能AI 插件后端前端DevOps上一篇终极指南如何判断一个API的好坏Public APIs项目质量评估标准详解下一篇终极指南如何用Resilience4j实现kkFileView的服务熔断与降级创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
typescript-book 之 Type Guard 完全指南：利用类型守卫实现精准的类型收窄
教程【免费下载链接】typescript-book:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 项目地址https://gitcode.com/gh_mirrors/ty/typescript-book点击查看免费下载导读本文基于《The definitive guide to TypeScript》本仓库 typescript-book的 docs/types/typeGuard.md 一章系统讲解 TypeScript 中**类型守卫Type Guard**的全部形态内置的typeof、instanceof、in字面量守卫以及在strictNullChecks下的 null/undefined 排除再到可完全自定义的用户定义类型守卫。读完本文你将能理解 TypeScript 代码流分析如何在条件块内自动收窄联合类型掌握判别可辨识联合的实战写法并规避回调函数中类型守卫失效这一经典陷阱。文中所有示例均可在仓库 code/types/typeGuard.ts 中直接运行验证对应的编译产物见 code/types/typeGuard.js。一、什么是 Type Guard条件块内的类型收窄Type Guard类型守卫允许你在一个条件块内收窄对象的类型。这是 TypeScript 代码流分析control flow analysis能力在语法层面上的直接体现当程序执行流进入某个由守卫表达式控制的代码块时编译器会基于该表达式的语义把变量在此块内的类型收窄为更具体的子集。一个典型场景是联合类型参数函数接收number | string时只有先确定当前值是哪种类型才能安全调用该类型独有的方法。下面的 code/types/typeGuard.ts 中quick命名空间展示了最朴素的用法function doSomething(x: number | string) { if (typeof x string) { // 块内 TypeScript 知道 x 一定是 string console.log(x.substr(1)); // OK } x.substr(1); // Error: 无法保证 x 是 string }类型守卫的价值在于既能在编译期发现错误又不需要任何运行时成本——它完全基于你本来就该写的 JavaScript 条件判断typeof、instanceof等TypeScript 只是顺便把这些判断的结果内化到了类型系统里。守卫之外的代码不会继承收窄结果这正是上面x.substr(1)报错的原因。二、内置守卫一typeofTypeScript 对 JavaScript 的instanceof和typeof操作符有原生认知。只要在条件块中使用它们TypeScript 就会认为该块内变量的类型发生了变化。原文档给出了一个绝佳的例子TypeScript 能识别出某个方法在string上不存在从而揪出用户的拼写错误function doSomething(x: number | string) { if (typeof x string) { // 块内 TypeScript 知道 x 一定是 string console.log(x.subtr(1)); // Error: subtr 不存在于 string console.log(x.substr(1)); // OK } x.substr(1); // Error: 无法保证 x 是 string }要点归纳typeof返回值是字符串字面量string、number、boolean、symbol、bigint、undefined、object、function。只有与这些字面量精确比较时TypeScript 才会执行收窄。typeof x string会把string | number收窄为string同理typeof x number收窄为number。类型守卫的作用域严格限定在条件块内else分支和块外代码都不会错误地继承收窄结论因此x.substr(1)位于 if 之外必然报错。局限性typeof对复杂对象无能为力——对象返回的都是object数组、日期、普通对象无法靠它区分。在仓库中quick命名空间的编译产物可以在 code/types/typeGuard.js 查看可见类型守卫只是编译期的信息运行时依然只是普通的typeof判断function doSomething(x) { if (typeof x string) { console.log(x.subtr(1)); console.log(x.substr(1)); } x.substr(1); }三、内置守卫二instanceof当处理的是类class实例而不是普通对象时instanceof是比typeof更合适的守卫。因为typeof new Foo()只会得到object无法区分Foo与Bar而instanceof能精确判断原型链上的构造函数。原文档的instance示例见 code/types/typeGuard.tsclass Foo { foo 123; common 123; } class Bar { bar 123; common 123; } function doStuff(arg: Foo | Bar) { if (arg instanceof Foo) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } if (arg instanceof Bar) { console.log(arg.foo); // Error! console.log(arg.bar); // OK } console.log(arg.common); // OK —— 两个类共有成员无需收窄即可访问 console.log(arg.foo); // Error! console.log(arg.bar); // Error! } doStuff(new Foo()); doStuff(new Bar());这个例子同时展示了收窄的两种方向正向收窄arg instanceof Foo块内arg被收窄为Foo因此可以访问arg.foo访问arg.bar报错无收窄时的基线状态在函数体其余位置arg仍是联合类型Foo | Bar只能访问两个成员都具备的common属性这正是结构类型系统下共有属性的天然判别能力。3.1 TypeScript 甚至理解elseTypeScript 对if/else结构有额外的智能当if收窄掉一种类型后else块内它肯定不是该类型。这意味着联合类型的其余成员在else中同样被精确收窄无需重复判断function doStuff(arg: Foo | Bar) { if (arg instanceof Foo) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } else { // 必然是 Bar console.log(arg.foo); // Error! console.log(arg.bar); // OK } }对二成员联合而言else分支是全自动的穷尽分支即便联合有更多成员else内收窄得到的也是除 Foo 外的其余成员集合同样安全。四、内置守卫三in操作符in操作符用于安全地检查对象上是否存在某属性它同样可以作为类型守卫。原文档示例interface A { x: number; } interface B { y: string; } function doStuff(q: A | B) { if (x in q) { // q: A } else { // q: B } }实践要点in守卫非常适合纯接口interface联合——这些类型在运行时没有类原型可供instanceof判别也没有办法用typeof区分而结构上成员集合又互不相同判别条件应使用与某个联合成员强绑定的独有属性如A独有的x此时if与else两个分支都能得到精确收窄若某属性在多个成员中都存在in只能收窄为包含该属性的成员集合无法精确到单一成员此时应改用下文的可辨识联合discriminated union方案。五、字面量守卫与可辨识联合Literal Type Guard5.1 用/区分字面量你可以用//!/!来区分联合类型中的字面量成员。原文档的三态示例type TriState yes | no | unknown; function logOutState(state: TriState) { if (state yes) { console.log(User selected yes); } else if (state no) { console.log(User selected no); } else { console.log(User has not made a selection yet); } }字面量类型string / number / boolean 的精确值是 TypeScript 的基础能力详见 docs/types/literal-types.md。单独的yes类型用处有限但把它们组合进联合类型如TriState后每一次比较都能让 TypeScript 精确收窄剩余取值。5.2 用共有属性名判别联合成员可辨识联合字面量守卫更强大的用法是当联合的每个成员都拥有一个同名属性且该属性是互不相同的字面量类型时可以检查这个共享属性来判别整个联合——这就是著名的可辨识联合Discriminated Union。原文档示例type Foo { kind: foo, // 字面量类型 foo: number } type Bar { kind: bar, // 字面量类型 bar: number } function doStuff(arg: Foo | Bar) { if (arg.kind foo) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } else { // 必然是 Bar console.log(arg.foo); // Error! console.log(arg.bar); // OK } }这里kind就是判别属性discriminant property。一旦arg.kind foo成立TypeScript 能确定arg只能是Foo从而在块内安全访问arg.fooelse分支则自动收窄为Bar。这种字面量类型 共享判别属性的模式是本仓库 docs/types/discriminated-unions.md 的主题后续可进一步做穷尽性检查exhaustive checks为联合新增成员后编译器会要求所有分支必须处理新情况否则落入never类型的兜底分支时报错相关原理可参阅 docs/types/never.md。六、strictNullChecks下的 null / undefined 守卫默认情况下TypeScript 允许把null和undefined赋给任意类型见 docs/options/strictNullChecks.md。一旦开启strictNullChecks它们成为独立类型此时类型守卫对于消除 Object is possibly undefined 类错误至关重要。原文档给出了一条极简但高效的规则function foo(a?: number | null) { if (a null) return; // a 现在是 number }要点说明使用宽松相等 null/! null而不是一次判断即可同时排除null和undefined这是 JavaScript 语义null undefined为真在if (a null) return;之后编译器知道a已经不可能为null或undefined于是自动收窄为number该写法同时覆盖了可选参数可能为undefined和显式传入null两种情况是处理可空联合最实用的惯用法。七、用户定义类型守卫User Defined Type Guards7.1 为什么需要自定义守卫JavaScript 的内建运行时内省能力有限。当你处理的只是普通 JavaScript 对象借助结构类型系统建模时既没有instanceof可用的类原型也没有办法靠typeof区分不同形状的对象。此时你需要自己编写类型守卫函数。7.2 类型谓词arg is SomeType语法用户定义类型守卫本质上是返回类型为类型谓词type predicate的特殊函数函数名(参数名) 的返回类型写成 someArgumentName is SomeType。原文档示例见 code/types/typeGuard.tsinterface Foo { foo: number; common: string; } interface Bar { bar: number; common: string; } /** * 用户定义类型守卫 */ function isFoo(arg: any): arg is Foo { return arg.foo ! undefined; } /** * 用户定义类型守卫的使用示例 */ function doStuff(arg: Foo | Bar) { if (isFoo(arg)) { console.log(arg.foo); // OK console.log(arg.bar); // Error! } else { console.log(arg.foo); // Error! console.log(arg.bar); // OK } } doStuff({ foo: 123, common: 123 }); doStuff({ bar: 123, common: 123 });语法与语义细节arg is Foo是类型谓词位于返回类型位置。arg必须是函数参数列表中声明的参数名函数体返回布尔值但类型谓词让 TypeScript 把true与参数是 Foo绑定isFoo(arg)为真时arg被收窄为Fooelse中收窄为Bar谓词只是编译器契约运行时仍执行普通逻辑这里是arg.foo ! undefined的鸭子类型检查——守卫的运行时正确性由你负责写错谓词与实现不符时TypeScript 不会替你兜底参数常用any或unknown以便接受任意联合成员再在函数内部用自定义逻辑判别。从编译产物 code/types/typeGuard.js 可以看到类型谓词完全不影响运行时生成的 ES5 代码中isFoo就是一个返回布尔值的普通函数这也印证了类型守卫是纯编译期特性这一事实。7.3 常见自定义守卫形态属性存在性判别return arg.foo ! undefined;如上例数组判定return Array.isArray(arg);字段类型判定return typeof arg.id number;判别属性判定return arg.kind foo;可与可辨识联合组合让isFoo内部只做字面量比较。八、类型守卫与回调函数一个经典的收窄失效陷阱8.1 问题守卫不会在回调中保持TypeScript 不会假设类型守卫在回调中仍然有效因为做这种假设是危险的——回调的调用时机与调用环境不受当前作用域控制守卫保护的变量可能在回调执行前已被外部修改。原文档示例// 示例环境 declare var foo:{bar?: {baz: string}}; function immediate(callback: ()void) { callback(); } // 类型守卫 if (foo.bar) { console.log(foo.bar.baz); // 可以 functionDoingSomeStuff(() { console.log(foo.bar.baz); // TS 错误Object is possibly undefined }); }注意immediate是同步立即调用的守卫理论上仍然成立但 TypeScript 出于安全考量一律不再信任守卫在回调内的结论于是foo.bar.baz在回调内报错。这与本仓库 code/types/typeGuard.ts 中守卫示例的严格检查风格一致——宁可保守也不放过潜在的undefined访问。8.2 修复把收窄后的值存入局部变量解决方案非常简单把守卫推断出的安全值存入一个局部常量。局部变量不可能被外部作用域修改TypeScript 可以轻松确认它的类型// 类型守卫 if (foo.bar) { console.log(foo.bar.baz); // 可以 const bar foo.bar; functionDoingSomeStuff(() { console.log(bar.baz); // 可以 —— bar 是捕获的局部常量 }); }这条经验可以推广到一切异步/回调 可空值场景在守卫通过后立即用const快照安全值后续无论回调还是闭包都引用该常量既消除了类型报错也让代码免受外部修改的隐患。九、仓库实操如何在本项目中运行守卫示例仓库code/types/目录为所有类型系统章节提供了可编译的 TypeScript 源码与对应的 ES5 编译产物守卫源码code/types/typeGuard.ts含quick、instance、instanceElse、userDefined四个命名空间分别对应typeof、instanceof、else收窄、用户定义守卫四类主题编译产物code/types/typeGuard.js可用node直接执行观察运行时行为编译配置code/types/tsconfig.json其中target: es5、module: commonjs是本书示例的标准配置noImplicitAny: false便于示例聚焦类型守卫本身而不被严格模式噪音干扰。在仓库根目录执行以下命令即可复现编译cd code/types npx tsc提示示例中的报错行如x.subtr(1)、arg.bar是有意为之的教学示例用于展示类型守卫的收窄边界并非代码缺陷运行时请以不报错的行为为准。十、总结六种守卫形态与选型速查守卫形态适用场景关键语法仓库出处typeof原始类型联合string/number/boolean…typeof x stringcode/types/typeGuard.ts#L1-L9instanceof类实例联合arg instanceof Foocode/types/typeGuard.ts#L11-L39in接口对象联合、按成员属性区分x in qdocs/types/typeGuard.md字面量守卫字面量联合、可辨识联合判别arg.kind foodocs/types/discriminated-unions.md null守卫开启strictNullChecks后排除 null/undefinedif (a null) return;docs/options/strictNullChecks.md用户定义守卫普通对象、无类原型的结构化数据function isFoo(arg: any): arg is Foocode/types/typeGuard.ts#L66-L103最后三条进阶阅读路径供继续深入字面量类型基础见 docs/types/literal-types.md可辨识联合的穷尽性检查、never兜底与switch写法见 docs/types/discriminated-unions.mdnever类型作为底类型与守卫配合做编译期穷尽性保障的原理见 docs/types/never.md。掌握了类型守卫你就在 TypeScript 的联合类型世界中拥有了分而治之的能力先收窄再安全地访问成员把运行时的判断转化为编译期的保证。赞分享教程【免费下载链接】typescript-book:books: The definitive guide to TypeScript and possibly the best TypeScript book :book:. Free and Open Source 项目地址https://gitcode.com/gh_mirrors/ty/typescript-book点击查看免费下载相关推荐如何掌握RedwoodJS联合类型类型守卫与类型收窄实用指南如何掌握RedwoodJS联合类型类型守卫与类型收窄实用指南 RedwoodJS是一个全栈JavaScript框架它结合了React、GraphQL和Pri后端前端Web框架开发工具MCP Apps视图状态持久化不丢状态的完整配方MCP Apps视图状态持久化不丢状态的完整配方 MCP Appsext apps 官方规范与 SDK 仓库让 MCP 服务器能向 AI 聊天客户端推送可MCP 服务前端AI 技能claude-skills 项目 typescript-pro 技能指南TypeScript 类型守卫与类型窄化Type Guards and Narrowing实战claude skills 项目 typescript pro 技能指南TypeScript 类型守卫与类型窄化Type Guards and NarrowAI 技能AI 插件后端前端DevOps上一篇终极指南如何判断一个API的好坏Public APIs项目质量评估标准详解下一篇终极指南如何用Resilience4j实现kkFileView的服务熔断与降级创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
