从零开始学前端 | 第二十一章：为什么要学 TypeScript

本章定位走到这一章说明你已经完成了 JavaScript 第二阶段的系统学习也正式进入了第三阶段TypeScript 基础。前面你已经掌握了很多很重要的能力会写变量、条件判断、循环和函数。会用数组和对象组织数据。会操作 DOM让页面内容真正变化。会绑定事件让页面响应用户操作。会处理定时器、异步和网络请求。会写一部分现代 JavaScript也完成了待办事项应用这样的综合实战。也就是说你现在已经不是“完全不会写代码”的状态了。你已经可以真正做出一个有数据、有界面、有交互的小应用。但这时候新的问题也会跟着出现。例如为什么我明明写的是“数字处理逻辑”却不小心传进了字符串为什么对象字段明明写错了代码运行前却没人提醒我为什么一个函数接收什么、返回什么项目一复杂就越来越容易搞混为什么我自己写的小练习还能撑住但只要代码一多问题就变得越来越隐蔽这些问题背后其实都在指向同一个核心主题JavaScript 很灵活但这种灵活在项目变大后也会带来真实成本。TypeScript就是为了解决这类问题而越来越重要的一种工具。这一章要解决的核心问题不是“怎么写复杂类型”而是更基础的一件事JavaScript 已经能写功能了为什么还要学 TypeScript本章学习目标学完这一章后你应该能做到理解 JavaScript 的灵活性为什么既是优点也是潜在问题来源。理解 TypeScript 到底是什么以及它和 JavaScript 的关系。知道 TypeScript 最直接能帮你减少哪些低级错误。理解“类型检查”在代码运行前提前发现问题的价值。理解为什么 TypeScript 对团队协作和长期维护特别重要。认识 TypeScript 能帮什么、不能帮什么。初步建立“先看懂报错提示再慢慢学会写类型”的正确节奏。一、JavaScript 已经能写功能了为什么还要学 TypeScript这是几乎每个初学者都会问的问题。而且这个问题非常合理。因为从你的真实体验来看JavaScript 确实已经能做很多事情了改页面做交互发请求写小项目那为什么还要再学一层 TypeScript先说结论不是因为 JavaScript 不好而是因为当代码从“小练习”走向“更真实的项目”时你会越来越需要一种方式帮你更早发现低级错误让数据和逻辑边界更清楚。1. JavaScript 的确很好用我们不能一提到 TypeScript就把 JavaScript 说得好像一无是处。事实恰恰相反。JavaScript 有非常明显的优点上手快。反馈快。直接就能在浏览器里运行。很适合前端入门和快速做原型。你前面能够这么快做出交互页面和待办应用正是因为 JavaScript 足够灵活。2. 但“能写出来”和“更稳地写下去”不是一回事这正是问题的关键。在练习阶段很多代码量都不大函数不多文件不多数据结构不复杂你自己也知道自己刚写了什么所以很多潜在问题还不容易暴露出来。但项目只要稍微变大一点你就会慢慢发现灵活有时意味着“边界不够清楚”。这也是 TypeScript 开始变得重要的地方。二、先承认一件事JavaScript 的灵活性真的很有价值在真正理解 TypeScript 之前我们先不要急着批评 JavaScript。反而应该先把它的优点说清楚。1. JavaScript 很适合快速开始例如你想先写一个函数functiongetWelcomeMessage(userName){return你好${userName};}你几乎不需要额外准备什么就能立刻开始写。2. JavaScript 很适合边写边试你可以改一行代码刷新页面马上看结果这对初学者特别友好。3. JavaScript 让你不会一开始就被“规则”压住这也是很多人刚学编程时能够快速建立信心的原因之一。你不用一开始就处理很多类型声明、配置、约束就能先把页面跑起来。所以从入门角度看JavaScript 的灵活是帮助你快速开始的一大优势。三、但灵活也会带来潜在问题问题并不在于“灵活本身错了”而在于灵活如果缺少约束代码一变多低级错误就更容易藏起来。这也是为什么很多 JavaScript 项目在变大之后会越来越依赖 TypeScript。当前阶段你可以先把这些问题分成三类来看。1. 参数类型传错问题常常要到运行时才暴露先看一个非常典型的 JavaScript 例子functionformatPrice(price){returnprice.toFixed(2);}console.log(formatPrice(99));你在写这段代码时脑子里可能默认认为price应该是一个数字。但 JavaScript 本身并不会在你写代码时主动拦住你。于是formatPrice(99)这种把字符串传进去的写法也可能先被你写出来。最后等代码真正运行时才可能报错。2. 对象字段写错时结果常常不是立刻报错而是悄悄变成undefined例如constuserInfo{userName:小白,age:18};console.log(userInfo.username);注意这里正确字段是userName你却写成了usernameJavaScript 在很多场景下不会提前告诉你这里字段名写错了。结果往往是运行时只得到一个undefined然后你还要继续往后查到底是哪一层写错了是数据没回来还是字段拼错了3. 数据结构一变很多位置都可能悄悄跟着出问题例如你本来约定每个待办项长这样{id:1,text:学习 TypeScript,completed:false}但如果某一天你不小心写成了{id:1,title:学习 TypeScript,completed:false}而渲染代码还是按todoItem.text去读取那页面就可能开始出现空内容。问题是这种错误有时候不会在你写下那一刻就被指出来而是要等页面渲染时才表现出来。四、为什么这些问题在小练习里不总是明显这是一个很值得现在就想清楚的问题。很多纯小白会说“可我前面写 JavaScript 的时候也没觉得它问题这么大啊。”这其实非常正常。1. 小练习的范围通常很小例如只有一两个函数只有一个页面数据结构非常简单代码都是你刚刚自己写的这时即使出了问题你也很容易靠记忆找回去。2. 项目一变大问题就开始积累当代码逐渐变成下面这种情况时文件变多函数变多数据对象字段变多逻辑之间开始互相依赖很多“原本还能靠脑子记住”的东西就会开始失控。3. 所以 TypeScript 不是为“最简单的演示代码”准备的而是为更真实的工程场景准备的。你现在正好学完一个 JavaScript 阶段的小应用这个节点开始接触 TypeScript其实是非常自然的。因为你已经开始能感受到代码不只是“写出来”还得“写得更稳、改得更安心”。五、TypeScript 到底是什么很多初学者第一次听到 TypeScript会下意识觉得这是不是另一门全新的语言你现在可以先把它理解成一句非常重要的话TypeScript 不是另一门完全独立的新语言而是 JavaScript 的增强工具。1. 它本质上是在 JavaScript 上加了一层“类型检查”也就是说TypeScript 并不是要把 JavaScript 推翻重来。它更像是在告诉你你原本写的 JavaScript 逻辑能不能在代码运行前就先帮你检查出一些明显不合理的地方。2. 你仍然是在写前端代码你不会因为用了 TypeScript就突然不写函数数组对象DOM事件这些东西。你写的仍然是前端逻辑只是会在表达这些逻辑时增加更明确的类型信息。3. 当前阶段怎么理解“类型”你前面其实已经接触过“类型”这个概念了。例如字符串数字布尔值数组对象TypeScript 做的事情本质上就是把这些“这个值应该属于哪一类”的信息变得更明确并在代码运行前帮你检查。六、TypeScript 最直接帮了什么忙如果要把 TypeScript 的价值说得最朴素一点可以先记住它最直接的价值是帮你在代码真正运行前就提前发现很多低级错误。这点非常关键。因为有些错误如果等到运行时才暴露成本更高更难查影响范围更大1. 先看一个函数参数的对比例子这是 JavaScript 版本functionformatPrice(price){returnprice.toFixed(2);}console.log(formatPrice(99));这是 TypeScript 版本functionformatPrice(price:number){returnprice.toFixed(2);}// 这里故意传错类型观察 TypeScript 在运行前就给出提示console.log(formatPrice(99));在 TypeScript 里你通常会更早看到类似这样的提示这里期待的是number但你传进来的是string2. 再看一个对象字段的对比例子JavaScript 版本constuserInfo{userName:小白,age:18};console.log(userInfo.username);TypeScript 版本constuserInfo:{userName:string;age:number}{userName:小白,age:18};// 这里故意拼错字段名观察编辑器提示console.log(userInfo.username);这里 TypeScript 的价值就在于它更有机会在你真正运行页面之前就提醒你这个字段名不在当前对象结构里。3. 你现在不用追求把这些写法都背下来例如上面这行constuserInfo:{userName:string;age:number}...你现在不用急着完全掌握细节。这一章更重要的是先建立一层认知TypeScript 的意义是让“我以为这个值应该长这样”这件事变成代码里更清楚、也更可检查的一部分。七、类型检查到底在做什么“类型检查”这个词听起来像很技术化。但当前阶段你可以先这样理解检查你对数据的使用方式和你对它的预期是不是一致。1. 它会关心哪些问题例如这里应该是数字你为什么传了字符串这里应该有userName为什么你访问的是username这个函数应该返回一个布尔值为什么你返回了字符串这个数组应该放用户对象为什么你塞进去一个数字2. 为什么这件事这么有价值因为这类问题很多都属于本来完全可以更早发现却经常拖到运行时才暴露的错误。而 TypeScript 的价值之一就是尽量把这些问题往前提。3. 你可以把它理解成“更早的自检”这不是最严格的技术定义但对入门非常有帮助。你现在可以先把类型检查理解成在代码真正跑起来之前先帮你做一轮“你是不是把数据用对了”的检查。八、TypeScript 帮你减少的通常是哪一类错误这一点很重要因为它能帮你对 TypeScript 建立合理预期。TypeScript 特别擅长帮你减少的通常是这些错误1. 参数类型不匹配例如本来该传数字却传成了字符串。2. 对象字段名写错例如本来是userName却写成了username。3. 返回值类型不符合预期例如你以为某个函数返回的是布尔值结果实际返回了字符串。4. 数据结构和使用方式不一致例如你以为数组里装的是商品对象但某个位置实际塞进了别的类型。5. 空值相关问题更早暴露例如某个值可能不存在、某个字段可能没传这类问题在 TypeScript 体系里通常也会更容易被看见。九、TypeScript 不能帮你解决什么这是一个必须讲清楚的边界。因为如果你把 TypeScript 想得过于万能后面也会失望。TypeScript 很有价值但它不是魔法。1. 它不能自动帮你写对业务逻辑例如functioncalculateTotalPrice(price:number,quantity:number){returnpricequantity;}这段代码从“类型”角度看没有问题price是数字quantity是数字返回值也是数字但从业务逻辑看它可能是错的。因为你真正想要的也许是price*quantity而不是pricequantityTypeScript 不会替你判断业务是否合理。2. 它不能代替需求分析你前一章刚学过数据怎么拆逻辑怎么排页面怎么接这些能力TypeScript 不能替代。3. 它不能代替调试即使有 TypeScript你仍然需要打印日志看页面变化查逻辑流程所以更准确的说法应该是TypeScript 能减少一类错误但不能替代思考、调试和设计。十、为什么 TypeScript 对团队协作特别重要很多初学者一开始会觉得“我现在一个人写小练习团队协作离我还很远。”这个想法并不奇怪。但其实 TypeScript 的很多价值正好会在“代码不是只给当前的你自己看”时变得特别明显。1. 当函数输入输出更明确时别人更容易用对例如一个函数如果只叫functioncreateUser(user){...}别人就会开始猜user里应该有哪些字段age是不是必填email能不能不传而如果类型信息更明确这种猜测空间就会小很多。2. 当对象结构更明确时团队沟通成本会下降例如用户对象到底长什么样商品对象应该有哪些字段接口返回数据是什么结构这些事情如果只靠口头说很容易变形。而类型系统的一大价值就是把这些结构约定从“脑子里的默认理解”变成“代码里明确写出来的规则”。3. 当项目越来越大时改动会更安心例如你要改一个字段名如果项目里完全没有清晰的类型约束那就很容易漏改很多地方。而类型检查的存在会让很多“受影响的位置”更早暴露出来。这对长期维护非常有价值。十一、为什么 TypeScript 对代码维护也很重要就算不是团队项目只是“几周后的你自己回来接着改代码”TypeScript 也会越来越有帮助。因为代码维护的本质之一就是未来还能不能快速看懂并安全修改过去写的东西。1. 当变量、参数、返回值更明确时重读代码压力会下降很多时候真正难的不是“第一次写”而是过了一段时间之后你还记不记得当时自己默认了什么。类型信息能帮助你把一部分“默认前提”直接放到代码里。2. 当文件变多后跨文件理解会更容易尤其你前面已经接触了模块化。一旦代码拆成多个文件后这个函数接收什么那个对象长什么样另一个模块导出了什么结构如果完全靠脑补会越来越吃力。TypeScript 在这里就会非常有存在感。十二、为什么初学者也值得现在开始接触 TypeScript有些人会觉得“我都还是前端纯小白了再学 TypeScript 会不会太早”这其实要看“怎么学”。1. 如果你把 TypeScript 理解成“上来就学很复杂的高级类型”那当然会很痛苦。2. 但如果你把它理解成“帮助你更清楚地描述数据和函数”那现在其实正是很合适的节点。因为你刚好已经学过变量函数数组对象也就是说你现在脑子里已经有了“值属于什么类型”的基础意识。TypeScript 只是把这层意识再往前推进一步。3. 更重要的是它会反过来帮助你把 JavaScript 学得更扎实为什么这么说因为很多 TypeScript 报错本质上都在逼你重新想清楚这个值到底是什么这个函数到底要什么参数这个对象到底应该有哪些字段这其实会反过来帮你把 JavaScript 基础打得更牢。十三、一个完整对比例子无类型写法和有类型写法下面我们来看一个更完整、也更贴近实际开发的对比例子。目标是格式化用户信息并输出展示文案。1. JavaScript 版本functionformatUserCard(user){returnuser.userName - user.age 岁;}constuserInfo{userName:小白,age:18};console.log(formatUserCard(userInfo));这当然可以工作。但问题是你其实是靠“默认理解”在写。也就是说user应该是对象这个对象里应该有userName这个对象里应该有age这些规则都没有被明确写出来。2. TypeScript 版本functionformatUserCard(user:{userName:string;age:number}){return${user.userName}-${user.age}岁;}constuserInfo{userName:小白,age:18};console.log(formatUserCard(userInfo));这时候你虽然还没正式学接口但已经能很直观地看到user这个参数到底应该长什么样被写得更清楚了。3. 故意传错一次看看例如console.log(formatUserCard(小白));这时 TypeScript 通常就更容易提前指出这里期待的是一个带userName和age的对象不是一个字符串。4. 这个对比例子最想说明什么它最想说明的不是“TypeScript 写法更长”或者“更高级”。它真正想说明的是TypeScript 把原本只存在于你脑子里的“默认约定”变成了代码里更明确、更容易检查的规则。十四、TypeScript 的工作流程当前阶段怎么理解这一章你不需要深入配置但至少要先建立一个非常基础的认知TypeScript 不是浏览器直接理解的一套最终运行代码它通常会先经过检查和转换再变成 JavaScript 去运行。1. 你可以先把流程想成这样你写.ts文件TypeScript 帮你检查类型问题再转换成浏览器能运行的 JavaScript2. 为什么这点值得现在就知道因为它能帮你更好地理解为什么 TypeScript 重点是“增强开发阶段体验”为什么它很多价值体现在“运行前先发现问题”十五、怎么看待 TypeScript 的报错提示很多初学者第一次看到 TypeScript 报错第一反应是“完了我是不是不会写了”其实正好相反。很多时候报错恰恰说明它在帮你更早看到问题。1. 报错不是在否定你而是在告诉你哪里不一致当前阶段你可以先把 TypeScript 报错理解成一种提醒你这里对数据的使用方式和它当前的预期不一致。2. 第一次看报错时不要试图一下子全懂更实际的做法是先抓四件事报错发生在哪个文件报错发生在哪一行它期待的是什么类型你实际给的是什么类型只要先抓住这四件事很多报错就已经能开始慢慢看懂。3. 初学阶段最重要的能力不是“会写复杂类型”而是能看懂最基础的类型提示和报错说明。这点你一定要放轻松。因为第三阶段一开始重点就是先建立这层感觉。十六、为什么现在不必急着学高级类型这一点非常重要。很多纯小白一听 TypeScript就会被一些词吓到泛型映射类型条件类型类型推导这些内容以后当然会接触但不是现在最先要啃的。1. 当前阶段最重要的不是复杂而是清楚你现在最该优先关心的是变量是什么类型函数参数是什么类型函数返回什么类型对象有哪些字段数组里装的是什么只要这些基础意识先建立起来后面才走得稳。2. 所以第三阶段的学习节奏应该是什么你现在可以先给自己一个很稳的预期先理解为什么要学 TypeScript先学基础类型和类型标注先学怎么描述对象和函数先学怎么看报错这条路是很自然的不需要一上来就挑战高级类型。十七、初学者最容易踩的坑这一章虽然还没正式大量写类型但已经有一些典型误区值得现在就提醒。1. 把 TypeScript 想成“完全另一门语言”这会让你产生不必要的心理负担。更准确的理解应该是它是 JavaScript 的增强工具不是把你前面学的都推翻重来。2. 以为用了 TypeScript 就不会再有 Bug这显然不现实。TypeScript 能帮你减少很多低级错误但逻辑错了还是会错需求理解错了还是会错页面渲染写错了还是会错3. 一看到报错就害怕当前阶段更推荐你把报错当成帮你早发现问题的提示信息而不是“自己不行”的证据。4. 一上来就追求写得很复杂现在不是比谁能写更花的类型。现在最重要的是先把基础数据和函数关系描述清楚。5. 觉得“我一个人写小练习用不到类型”短期可能感觉不明显但越往后你越会发现类型系统并不是只服务团队也会服务未来回来看代码的你自己。十八、本章实践练习这一章的练习重点不是让你立刻掌握很多类型语法而是先真正体会为什么 TypeScript 会对前端开发有价值。1. 练习 1对比一段有类型和无类型的代码请你自己找一个前面写过的 JavaScript 小函数例如价格格式化函数用户信息展示函数待办项渲染函数然后试着想一想这个函数最希望收到什么类型的数据如果传错类型会发生什么如果加上类型信息问题能不能更早暴露这个练习的重点是训练“默认约定变明确”的感觉。2. 练习 2故意传错参数观察 TypeScript 报错提示你可以参考下面这个例子functionformatPrice(price:number){returnprice.toFixed(2);}// 这里故意传错重点不是制造错误本身而是观察提示在说什么formatPrice(99);请重点观察两件事报错出在哪一行它提示你“期待的类型”和“实际传入的类型”分别是什么3. 练习 3总结类型系统能帮你解决什么问题建议你自己写一份小总结至少回答下面三个问题TypeScript 最直接能帮我减少哪类错误它对“对象字段”和“函数参数”为什么特别有帮助它为什么更适合项目慢慢变大之后的代码维护这个练习特别重要因为它能帮你把“听懂”变成“自己能说清楚”。十九、学习重点提示这一章最重要的不是马上记住很多新语法而是先真正建立对 TypeScript 价值的认知。请重点记住JavaScript 的灵活性很有价值但也会带来潜在问题。TypeScript 不是另一门完全独立的语言而是 JavaScript 的增强工具。它最直接的价值是帮你在代码运行前更早发现很多低级错误。类型检查的核心是检查“你对数据的使用方式”和“你的预期”是否一致。TypeScript 特别适合减少参数类型错误、对象字段错误和结构不一致问题。它不能替你写对业务逻辑也不能替代调试。初学阶段先关注“能看懂错误提示”不要急着学高级类型。如果你只记一句话请记住学 TypeScript 的核心不是为了把代码写得更复杂而是为了让原本就存在的数据规则和函数约定变得更明确、更早被检查出来。二十、本章小结这一章我们没有急着往 TypeScript 里冲很多新语法而是先把最根本的问题想清楚了为什么前端项目会越来越需要 TypeScript。你已经理解了JavaScript 的灵活性为什么既是优点也是潜在问题来源TypeScript 到底是什么类型检查最直接在帮什么忙它能减少哪些错误、不能解决哪些问题为什么它对团队协作和长期维护特别重要为什么初学阶段应该先学会看懂报错而不是急着学复杂类型这一步非常关键。因为从这一章开始你不再只是把 TypeScript 当成“一个新语法包”而是开始真正理解它为什么会成为现代前端开发里的重要基础能力。二十一、课后思考题请你思考下面几个问题为什么说 JavaScript 的灵活性既是优点也是潜在问题来源为什么很多问题在小练习里不明显但代码一变多就会暴露TypeScript 最直接帮你提前发现的是哪一类错误为什么说 TypeScript 不能替代业务逻辑思考和调试为什么团队协作和长期维护会让类型系统的价值变得更明显为什么初学时应该先关注“看懂报错提示”而不是一上来就追求复杂类型建议你用自己的话把答案写下来。只要你能把这些问题说清楚说明你已经真正开始建立 TypeScript 的第一层认知了。二十二、下一章预告下一章我们会继续学习从零开始学前端 | 第二十二章基础类型与类型注解到那时你会开始真正上手 TypeScript 最基础的写法包括变量类型函数参数类型返回值类型数组和对象的基础类型标注也就是说下一章我们会从“为什么要学”正式走到“开始怎么写”。