字面量类型与 null/undefined 处理指南如何用 TypeScript-New-Handbook 快速消灭空值报错【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-HandbookTypeScript 新手最常踩的两个坑一个是**字面量类型Literal Types**用不好另一个是null/undefined 处理不到位导致满屏报错。这份 TypeScript-New-Handbook 基础篇精读将带你用最快速度掌握这两大核心概念从会写 TypeScript进阶到写得安全又优雅彻底告别Cannot read properties of null这类运行时噩梦。为什么字面量类型是 TypeScript 的隐藏王牌在 chapters/Everyday Types.md 中官方把字面量类型定义为除了string、number这类宽泛类型你还可以在类型位置上引用具体的字符串和数字。比如let x: hello hello这个变量只能被赋值为hello。单独看它没什么用但一旦与联合类型组合就能写出非常严谨的函数签名function printText(s: string, alignment: left | right | center) { // ... } printText(Hello, left); printText(Gday, centre); // ❌ 报错centre 不在允许列表内数字字面量类型同理经典的-1 | 0 | 1就是排序比较函数的返回值类型。布尔字面量也很特别boolean其实就是true | false的别名。字面量推断陷阱为什么方法传参会莫名报错这是新手最容易懵的地方。当你这样写时TypeScript 会报错declare function handleRequest(url: string, method: GET | POST): void; const req { url: https://example.com, method: GET }; handleRequest(req.url, req.method); // ❌ 报错原因在于对象属性可能被后续改写所以req.method被推断为宽泛的string而不是字面量GET。官方给出的两种修复方案是类型断言const req { url: https://example.com, method: GET as GET }; // 或 handleRequest(req.url, req.method as GET);理解这一点你就掌握了如何控制 TypeScript 的字面量推断这是日常开发的高频考点。null 与 undefined先分清它们到底是什么JavaScript 有两个用于表示缺失的原始值null和undefined。TypeScript 也有两个同名类型但它们的行为完全取决于strictNullChecks开关详见 chapters/Basics.md 的严格模式章节关闭时null/undefined可以赋给任何类型代码写起来随意但容易埋雷——官方直言这是无数 bug 的源头。开启时使用可能为null/undefined的值前必须先做检查。官方强烈建议新项目一律开启strictNullChecks配合--strict全家桶使用。处理空值的四种实战方法附代码1. 显式检查 类型收窄最推荐这是最直观、最安全的写法利用if分支让 TypeScript 自动收窄类型function doSomething(x: string | null) { if (x null) { // 什么都不做 } else { console.log(Hello, x.toUpperCase()); // ✅ x 已被收窄为 string } }2. 警惕 typeof null 的历史陷阱在 chapters/Narrowing.md 中有一个经典案例typeof null返回的是object所以用typeof strs object判断数组时null也会混进来必须配合真值检查if (strs typeof strs object) { for (const s of strs) { /* ... */ } }3. 宽松相等一次性剔除 null 和 undefined这是官方推荐的高效技巧 null同时匹配null和undefinedif (container.value ! null) { // ✅ 此时 value 的类型是 number两种空值都被剔除了 container.value * factor; }4. 非空断言操作符!谨慎使用写x!等于向类型检查器承诺这里绝对不是 null/undefined。它能让你跳过检查直接调用方法但不改变运行时行为一旦承诺失误照样崩溃请只在百分百确定时使用。快速上手本手册一分钟跑通示例想亲自验证上述代码克隆仓库后本地体验https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook项目的章节文件如 chapters/Everyday Types.md、chapters/Narrowing.md都带可运行的代码示例配合tsc编译器即时查看报错是新手最快的实战路径。相关构建与渲染逻辑可参考 scripts/render.ts 与 scripts/sample-compiler.ts。小结把空值报错扼杀在编译期总结这份指南的核心要点字面量类型 联合类型让函数签名自文档化strictNullChecks 让空值无处遁形而收窄Narrowing技巧让你用最少的代码安全处理 null/undefined。掌握这三板斧你的 TypeScript 代码不仅编译通过率更高运行时崩溃也会大幅减少。赶紧打开 TypeScript-New-Handbook 动手试一遍吧【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考