TypeScript 新手怎么学

TypeScript 新手怎么学？从“用JS踩坑”到“写得更稳”的小步骤

很多人学前端时，都会先接触JavaScript——毕竟它是网页的“原生语言”，写起来灵活，比如做个轮播图、弹个提示框，几行代码就能搞定。但写得多了就会发现，有时候明明调试半小时，却因为“变量类型不对”出了错：比如把数字和字符串加起来，本该是5，结果变成“5abc”，找bug找得头大。TypeScript就是为解决这类问题来的，它给JavaScript加了“类型检查”，新手学它，不用怕太复杂，跟着生活化的步骤走就好。

第一步：先搞懂“TypeScript不是新语言，是JS的‘升级版’”

不用一上来就记一堆术语，先把它和你熟悉的JS绑在一起。打个比方：JS像你平时穿的运动服，舒服但偶尔会磨脚；TypeScript像给运动服加了个“防磨贴”——它不是要你换掉原来的代码，而是在JS的基础上，多了“提醒你哪里可能出错”的功能。

比如你写JS时，会写let age = 20，之后不小心写成age = "二十"，浏览器可能不会报错，只是输出“二十”，但用TypeScript的话，它会提前告诉你“这里类型不对”，就像朋友在你写错字时指出来，省了后面调试的时间。这一步不用急着装复杂工具，先在浏览器的“开发者工具”里试试在线的TypeScript编辑器，感受一下“提前纠错”的感觉，比死记定义有用。

第二步：从“最常用的类型”开始，别贪多

新手最容易犯的错，是一开始就啃完所有类型，结果越学越乱。就像学做饭，先从“盐和糖”开始，而不是先记全所有香料。TypeScript里常用的类型只有5个：

• 数字：比如let price: number = 9.9；
• 字符串：比如let fruit: string = "苹果"；
• 布尔值：只有true和false，比如isLogin: boolean = true；
• 数组：比如存储一串水果，let fruits: string[] = ["苹果", "香蕉"]；
• 空值：比如某个变量暂时没值，let empty: null = null。

举个生活化的例子：你要做一个“购物车总价”的功能，用TypeScript的话，直接告诉它“总价必须是数字”，如果不小心加了个字符串，它会立刻提醒你，就像收银员不会把“30元”和“一袋”加在一起算总价，避免算错。这一步只要能在代码里给变量加这5种类型，就算入门了，不用管那些偏门的“元组”“枚举”。

第三步：用“小项目”练手，别光看教程

光看别人写的代码，永远学不会。就像学骑车，光看别人骑，自己不摔几次永远学不会。新手可以做两个超小的项目：

第一个是“待办清单”：用TypeScript写，给每个待办项加类型——比如“待办内容是字符串，完成状态是布尔值”，写完后故意把完成状态写成数字，看看TypeScript怎么提醒你；

第二个是“简单的计算工具”：输入两个数字，输出它们的和，加个类型检查，防止用户输入非数字的内容。

练的时候不用追求完美，哪怕代码有冗余，只要能让TypeScript帮你提前发现错误，就算进步。而且可以用简单的工具，比如VSCode编辑器，它会自动提示你哪里错了，不用折腾复杂的配置。

最后：接受“会有不懂的地方”，慢慢来

很多新手学TypeScript时，会因为某个报错卡壳，就放弃。其实TypeScript的报错只是“提醒”，不是“禁止”——就像导航说“前方修路”，不是不让你走，只是让你换条路。比如如果想让某个变量接受“数字或字符串”，不用硬抠术语，直接写let something: number | string就好，慢慢用得多了，就会越来越顺手。

其实TypeScript就是给前端代码“加个保险”，新手不用怕它难，先从解决JS的“常见小麻烦”入手，一点点练，慢慢就会发现，写代码时的bug少了，效率也高了。