【个人学习||ts】

学习地图1. TypeScript 是干什么的TypeScript简称 TS本质上是 JavaScript 的超集。你可以把它理解成JavaScript 负责“运行”TypeScript 负责“在运行前帮你发现问题”它最核心的能力不是让代码“更高级”而是让代码在变大、变多人协作、变复杂之后依然能维护、能重构、能少出错。一句话理解TypeScript 给 JavaScript 增加类型系统、编辑器智能提示、重构能力和更强的工程可维护性。2. 它解决什么问题JavaScript 很灵活但灵活过头时问题也会很多变量本来应该是数字结果传成了字符串函数本来要{ name, age }结果只传了{ name }接口返回的数据字段拼错了运行时才报错项目大了以后不知道一个函数到底该接收什么、返回什么重构改名时怕改漏TypeScript 主要解决的是这几类问题提前发现错误在编码阶段或编译阶段而不是上线后让代码可读参数、返回值、对象结构更清晰让协作更稳定团队成员更容易理解代码契约让重构更安全IDE 和类型系统能帮你发现影响范围3. 它和哪些相关技术有关系TS 不是孤立存在的它和下面这些技术强相关技术和 TS 的关系JavaScriptTS 是 JS 的超集最终通常会编译成 JSNode.jsTS 常用于 Node 后端、脚本、工具链开发浏览器浏览器不能直接执行 TS通常要先编译成 JSnpm/pnpm/yarn用来安装 TS 和工程依赖Babel / tsc / SWC / esbuild负责把 TS 转成 JS或参与构建流程React / Vue / AngularTS 在前端框架中非常常见ESLint / Prettier配合 TS 做代码规范和质量控制tsconfig.jsonTS 项目的核心配置文件类型声明文件.d.ts用来描述库的类型信息4. 学它之前需要哪些前置知识必须有的前置知识基础 JavaScript 语法变量、函数、对象、数组、条件、循环模块化基础import、export命令行基础会执行node、npm、npx最好有但没有也可以边学边补Node.js 基础ES6 常用语法一个编辑器环境比如 VS Code如果你 JS 还很弱不用等“学完 JS 再学 TS”可以边学边补但至少要看得懂基础 JS 代码。5. 真正重要的 20% 核心内容是什么这是 TS 最值得优先拿下的主干也是最有实战价值的 20%基本类型string、number、boolean、null、undefined类型推断什么时候可以不手写类型对象类型、数组类型、函数类型接口interface和类型别名type联合类型、字面量类型、可选属性泛型的基本使用类型缩小typeof、in、判空、分支判断any、unknown、never的区别模块系统和类型声明tsconfig.json的核心配置常见报错的阅读与排查必须吃透TS 只在开发阶段做类型检查运行时没有类型系统TS 的很多能力来自“静态分析”不是魔法好的 TS 不是“写满类型”而是“写出清晰可靠的类型边界”6. 哪些内容是初学者容易陷入、但不值得一开始深挖的先知道后深入特别复杂的条件类型高级类型体操过度追求 100% 完美类型推导大量研究编译器源码冷门配置项的全部细节很复杂的声明文件手写技巧装饰器的历史演变和提案细节初学者最容易学偏的地方只记语法不理解“为什么要做静态类型约束”把 TS 学成“给每个变量强行标注类型”过度使用any只会写不会看报错不理解 TS 和 JS/Node/构建工具之间的关系7. 学习本质学 TypeScript 的本质不是背语法而是建立这三个能力用类型描述数据结构和函数契约用类型系统约束错误流入系统用工程配置把“可维护性”落地如果你最终能做到这三点TS 就学对了。8. 设计哲学TypeScript 的设计哲学可以概括为三句话尽量兼容 JavaScript而不是推翻 JavaScript在开发阶段尽早暴露错误而不是在运行时赌运气类型系统服务于工程实践而不是服务于炫技学习顺序推荐按下面的顺序学这是对初学者最稳、对面试也最有效的路径入门认知TS 是什么、为什么存在、怎么运行第一段代码基础类型原始类型、数组、对象、函数、类型推断类型建模interface、type、可选属性、只读属性、联合类型类型收窄分支判断、判空、typeof、in、类型保护泛型泛型函数、泛型接口、泛型约束工程配置tsconfig.json、模块系统、编译目标、严格模式实战协作第三方库类型、.d.ts、Node 项目与前端项目中的 TS常见报错与排错类型不兼容、模块找不到、声明缺失、配置冲突面试强化高频问题、手写题、项目表达进阶扩展条件类型、映射类型、工具类型、装饰器、编译流程正确学习顺序的方法论第一遍先抓主干不追求全第二遍把“为什么这样设计”补上第三遍通过项目把知识连起来第四遍用面试题反查薄弱点企业里通常怎么用 TS前端项目React TS / Vue TSNode 服务端Express / NestJS / Fastify TS脚本工具构建脚本、CLI、小型自动化SDK 和公共库用 TS 定义清晰的 API 契约必须掌握类型基础函数和对象类型interface与type泛型基础tsconfig.json常见报错排查知道即可很高级的类型运算编译器内部实现细节极端复杂的声明文件设计第一阶段入门认知这一阶段的目标不是“学会所有语法”而是先把这三个问题吃透TS 到底是什么为什么前端和后端项目都在用它它是怎么从.ts变成可运行.js的1. 学什么这一节学习TS 和 JS 的关系TS 出现的原因TS 的基本工作方式第一个最小 TS 程序如何运行tsc、node、ts-node分别是什么这一节的定位是“建立方向感”。你只要把方向感建立起来后面学类型才不会乱。2. 为什么重要如果第一阶段没学明白后面很容易出现三个典型问题把 TS 误以为是另一门完全不同的语言不知道为什么代码能运行却报类型错误不理解“编译错误”和“运行错误”的区别为什么它重要它决定你后面看待 TS 的视角它决定你能不能快速理解工程里的构建链路它决定你遇到报错时知道去查“类型层”还是“运行层”3. 核心概念3.1 直觉类比可以把 JS 和 TS 理解成JavaScript已经煮好的菜直接能吃TypeScript菜谱加检查表先检查食材、步骤、份量再做成菜真正运行的是“菜”也就是 JS。TS 更像一套“做菜前的校验系统”。3.2 技术定义TypeScriptJavaScript 的超集增加了静态类型系统静态类型检查在代码运行前根据类型规则分析代码是否可能出错编译把.ts转成.js类型注解手动声明变量、参数、返回值的类型类型推断TS 根据上下文自动推导出类型3.3 易混淆概念对比概念本质发生时机JavaScript真正运行的代码运行时TypeScript带类型信息的开发代码开发时、编译时tscTypeScript 官方编译器编译时Node.jsJS 运行环境运行时类型错误类型系统认为不安全编译时或编辑器中运行错误程序执行真的失败运行时3.4 这一节解决什么实际问题这一节要解决的是为什么要学 TS而不是只学 JS为什么浏览器和 Node 不能直接理解 TS为什么有些错误能提前发现4. 原理解释4.1 工作流程或运行机制TypeScript 最常见的工作流程你编写.ts文件TypeScript 编译器读取代码和tsconfig.json编译器先做类型检查如果配置允许再把 TS 转成 JSNode 或浏览器执行生成后的 JS这说明一个关键事实TypeScript 不直接执行它通常先变成 JavaScript再执行。4.2 底层原理或设计思想为什么 TS 不是“运行时类型系统”因为 JavaScript 生态太大了TS 选择了一条更现实的路尽量不破坏 JS 的运行方式把价值放在开发阶段用静态分析提升质量这就是它设计得非常成功的原因它能无缝接入 JS 项目学习成本相对低工程收益很高4.3 一个关键认知必须吃透TypeScript 的类型在绝大多数情况下只存在于编译阶段编译成 JS 后类型信息通常不会保留。所以TS 能帮你提前发现很多错误但不能替代运行时校验举例用户从接口传来的是脏数据你即使写了 TS 类型也不能保证运行时数据一定真的符合这也是为什么真实项目里常常还会搭配参数校验接口校验数据清洗5. 示例5.1 最小可运行示例创建一个文件hello.tsconstuserName:stringZhang;constage:number20;functionintroduce(name:string,userAge:number):string{return我叫${name}今年${userAge}岁;}console.log(introduce(userName,age));如果你把age改成constage:string20;再调用console.log(introduce(userName,age));TS 会在运行前提醒你函数需要number你却传了string。5.2 最小操作步骤npminit-ynpminstall-Dtypescript ts-node types/node npx tsc--init然后运行npx ts-node hello.ts或者先编译再运行npx tsc hello.tsnodehello.js5.3 这段示例说明了什么TS 可以描述变量和函数契约类型错误会在运行前暴露真正执行的仍然是 JS 代码6. 工程实践6.1 真实工程场景场景你在做一个用户系统页面要调用后端接口拿到用户信息。后端预期返回typeUser{id:number;name:string;isVip:boolean;};你在页面里写functionshowUser(user:User){console.log(user.name.toUpperCase());}如果有人误把接口返回当成constuser{id:1,username:Tom};TS 能很快提醒你id类型不对缺少name没有isVip这就是工程价值问题在开发阶段暴露错误在“边界”被拦住后续重构更安全6.2 明确操作步骤第一阶段你只需要会完成下面这套动作安装 Node.js初始化一个 npm 项目安装typescript生成tsconfig.json写一个.ts文件用ts-node直接运行或者用tsc编译后运行看懂最基础的类型报错6.3 企业里通常怎么做企业中一般不会手工一个个编译文件而是放到工程脚本里{scripts:{dev:ts-node src/index.ts,build:tsc,start:node dist/index.js}}后面你会逐步理解开发阶段怎么跑构建阶段怎么编译生产环境怎么运行7. 常见误区误区 1TS 会直接在浏览器里运行不对。通常浏览器执行的是编译后的 JS不是原始 TS。误区 2用了 TS 就不会有运行时错误不对。TS 主要防“写代码时就能看出来的问题”对外部脏数据、网络异常、空值等运行时问题仍然需要校验和防御。误区 3TS 就是给每个地方都写类型不对。TS 很多时候能自动推断类型。好代码不是“标注最多”而是“边界最清晰”。误区 4JS 学得一般不能学 TS不完全对。只要你有基础 JS就完全可以边学 TS 边补 JS。真正困难的往往不是语法而是对数据结构和函数契约的理解。误区 5只要不报错类型就一定设计得好不对。有些代码虽然“不报错”但你可能用了大量any这等于把 TS 的价值直接关掉了。8. 面试题高频面试题TypeScript 和 JavaScript 的关系是什么为什么说 TypeScript 是 JavaScript 的超集TypeScript 是如何运行的tsc、node、ts-node分别是什么TypeScript 能不能避免所有运行时错误为什么很多大型项目更偏向使用 TypeScriptTypeScript 的核心价值是语法增强还是工程可维护性为什么面试回答方向回答这类题建议按这个顺序说先定义TS 是 JS 的超集增加静态类型系统再说目的提前发现错误、提升可维护性再说机制编译检查后转成 JS再由运行环境执行最后说边界TS 不能替代运行时校验9. 自测题概念自测为什么说 TypeScript 最终通常还是要转成 JavaScript 才能运行什么是静态类型检查为什么 TS 在大型项目里比纯 JS 更有优势类型错误和运行错误有什么区别tsc和node各自负责什么动手自测自己创建一个hello.ts写一个带参数和返回值类型的函数故意传错参数类型观察报错分别尝试npx ts-node hello.tsnpx tsc hello.tsnode hello.js用自己的话写出 TS 的执行链路第一阶段练习题练习 1判断题TypeScript 可以脱离 JavaScript 单独存在。Node.js 可以原生直接执行所有.ts文件。TypeScript 的主要价值之一是提前发现类型问题。使用 TypeScript 后就不需要做接口参数校验了。练习 2填空题TypeScript 是 JavaScript 的 ______。.ts文件通常要先经过 ______再交给运行环境执行。真正负责运行 JavaScript 代码的环境可以是浏览器或 ______。练习 3简答题用你自己的话解释为什么大型项目更需要 TypeScript解释为什么说 TS 的类型系统主要发生在开发阶段而不是运行阶段说出tsc、ts-node、node的区别。练习 4实操作业请你独立完成下面任务创建一个hello.ts声明两个变量姓名和年龄并写上类型写一个introduce函数接收姓名和年龄返回一段介绍语正常运行一次故意把年龄改成字符串再观察报错用一句话总结这次实验说明了什么10. 学完标志学完这一节后你应该能做到能清楚解释 TS 是什么不再把它当成“另一门完全陌生的语言”能解释 TS 为什么在工程上有价值能说清 TS、JS、Node、tsc、ts-node之间的关系能独立跑通一个最小 TS 示例能区分“编译期类型错误”和“运行期错误”能回答基础面试题TS 为什么存在它解决了什么问题如果你还做不到下面这三件事说明第一阶段还没真正学会用自己的话讲明白 TS 的执行流程自己搭一个最小 TS 运行环境故意制造一个类型错误并解释它为什么报错下一阶段预告不在这一轮展开基础类型系统类型推断对象、数组、函数类型any、unknown、never当前阶段先把“方向感”和“第一段代码跑通”打牢这一步非常关键。