TypeScript 报错看不懂TypeScript-New-Handbook 错误信息阅读指南【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-HandbookTypeScript 报错是无数前端新手入门时遇到的第一道坎明明代码看起来没问题编辑器里却飘着一行行英文错误信息又长又绕根本不知道从哪里读起。别慌这篇文章就是一份专为新手打造的 TypeScript 错误信息阅读指南。它基于 TypeScript 官方新手册孵化项目 TypeScript-New-Handbook 中的《Understanding Errors》章节编写帮你从零掌握阅读 TypeScript 报错的正确姿势从此面对红色波浪线不再焦虑 为什么 TypeScript 报错信息又长又绕很多新手第一次看到 TypeScript 报错时都会怀疑人生我只是写错了一个类型为什么要给我弹出一大段话这其实是 TypeScript 的性格决定的。TypeScript 采用的是结构化类型系统它判断两个类型是否兼容靠的是比较它们的形状属性、方法、嵌套结构而不是名字。因此当它发现错误时会把哪里不匹配、为什么不匹配一层层地描述出来——描述得越详细报错自然就越长。好消息是报错越长说明信息越丰富。只要掌握了阅读方法你反而能更快定位问题。阅读 TypeScript 错误信息的黄金方法层层追问为什么TypeScript 官方手册把这种阅读方法总结得很精辟每一行子消息都是在回答上一行消息的为什么。错误信息的基础结构主消息 子消息每条 TypeScript 报错都由两部分组成组成部分作用举例主消息一句话概括错误Type X is not assignable to type Y.子消息逐层解释为什么属性不兼容 → 元素类型不匹配你可以把子消息想象成洋葱的层层外皮从外往里剥每一层都比上一层更接近问题的根源 实例拆解一个比代码还长的报错以手册中的经典例子来说看这段看似无害的代码let a: { m: number[] }; let b { m: [] }; a b;TypeScript 在最后一行抛出了比代码本身还长的报错Type { m: string[]; } is not assignable to type { m: number[]; }. Types of property m are incompatible. Type string[] is not assignable to type number[]. Type string is not assignable to type number.跟着为什么的思路拆解逻辑瞬间清晰❓b的类型能赋值给a吗不能❓ 为什么因为m属性的类型不兼容❓ 为什么因为string[]不能赋值给number[]❓ 为什么因为数组元素string不能赋值给number看到没最后一层就是问题的真正根源。遇到长报错别慌直接从最后一行子消息读起往往比读第一行更快。新手必懂关键词assignable to可赋值给翻阅 TypeScript 报错时你 90% 的时间都会遇到同一个短语assignable to。它的含义是一个类型能否作为另一个类型的可接受替身。比如Cat可以赋值给Animal因为猫是动物的合理替代品。反之不一定成立——动物不一定是猫。 看到T is not assignable to S时把它翻译成大白话就是T 和 S 类型不兼容。注意这是有方向性的S 能赋值给 T不代表 T 能赋值给 S。三大高频 TypeScript 报错场景逐一破解场景一类型不匹配not assignable to最常见的报错出现在变量赋值、函数传参等场景。解决思路确认两边的类型到底是什么再决定是修改值还是修改类型声明。场景二对象字面量出现多余属性type A { m: number }; const a: A { m: 10, n: }; // 报错报错会提示n does not exist in type A。这是 TypeScript 的新鲜对象字面量检查在保护你你声明的类型里没有n很可能是拼写错误或多余字段。删除多余属性或把n加进类型声明即可。场景三联合类型赋值报错type Thing none | { name: string }; const a: Thing { name: 0 }; // 报错联合类型表示二选一这里{ name: 0 }既不是nonename的类型也不是string于是 TypeScript 逐个比对后给出报错。阅读方法同上从最后一行子消息找根源。开启 strictNullChecks 后报错变多怎么办新手在tsconfig.json里开启strictNullChecks建议开启后会发现null、undefined相关的报错明显变多。这是好事——它在帮你规避数不清的运行时崩溃 此时推荐配合阅读手册中的《Narrowing》章节学习用typeof、instanceof、真值判断等方式收窄类型。例如function padLeft(padding: number | string, input: string) { if (typeof padding number) { return new Array(padding 1).join( ) input; } return padding input; }用typeof检查后TypeScript 就能在每个分支里准确推断类型报错自然消失。完整学习资料TypeScript-New-Handbook 使用指南本文内容主要来源于 TypeScript-New-HandbookTypeScript 官方新手册的孵化仓库中的错误信息专题章节强烈建议配合原文学习本章原文chapters/Understanding Errors.md包含更多报错示例与术语解释渲染后的网页版docs/chapters/understanding-errors/index.html可在浏览器中直接阅读代码块内置交互式报错提示配套章节chapters/Narrowing.md类型收窄、chapters/Everyday Types.md日常类型、chapters/Basics.md入门基础项目构建与发布脚本scripts/site.ts、package.json想本地阅读完整手册可以克隆仓库git clone https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook克隆后进入目录运行npm start即可启动本地预览服务项目依赖 Node.js 环境。写在最后报错不可怕可怕的是不看报错TypeScript 报错不是找茬而是提前帮你规避运行时才爆发的 bug。下次再看到红色波浪线不妨深呼吸按这三步走先读最后一行找到问题的真正根源向上回看确认每一层为什么是否合理动手修复改类型声明或改代码逻辑把 TypeScript-New-Handbook 的《Understanding Errors》章节当作你的报错词典多读多练用不了多久你就能从报错看不懂进阶为看报错秒懂 【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考