TypeScript in 怎么用

很多刚接触前端的朋友，可能只听过JavaScript，偶尔刷到TypeScript的介绍，总觉得它是“高大上的新东西”，其实它就是JavaScript的“进阶工具”——相当于给普通铅笔加了个带刻度的笔帽，能帮你少画歪线条，写代码更省心。

很多人觉得TypeScript难用，其实是没找对入门的小步骤，只要跟着日常开发的小场景走，很快就能摸透用法。

第一步：先搞懂“为什么要用”——不是替代JS，是补漏洞

先讲个生活化的例子：你去超市买水果，要是只说“买水果”，老板可能拿苹果、香蕉甚至萝卜（因为萝卜也是根茎类，也算广义“蔬果”），你得说“买红富士苹果，5斤，不套袋的”——这就是TypeScript的作用：给数据加“规则”。

JavaScript就像模糊说“买水果”，TypeScript就是明确说“买具体的某类、某数量的苹果”。比如你写JS时，不小心把用户输入的年龄（本应是数字）写成了字符串，运行时才报错；用TypeScript提前标好“年龄是数字”，写代码时就会直接提示错误，不用等上线后找bug，这就是它最实用的“提前纠错”功能。

第二步：最基础的用法——给变量加“类型标签”

刚入门不用记复杂的术语，就先给变量贴“标签”就行。比如：

你要存今天的温度，就写const temperature: number = 26——这里的: number就是给变量贴的“数字标签”，贴了之后就不能再存字符串（比如"26度"），不然写代码时就会红底提示；要是存用户的名字，就贴string标签：const username: string = "小明"。

还有数组和对象，也可以贴标签：比如存水果的数组，写const fruits: string[] = ["苹果", "香蕉"]，意思是“这个数组里只能放字符串类型的水果”；要是存用户信息的对象，就给每个属性贴标签：const user: { name: string; age: number } = { name: "小红", age: 18 }，这样对象里多了“性别”或者少了“年龄”，都会直接报错。

第三步：日常开发最常用的“函数用法”

做前端离不开写函数，TypeScript能帮你管好函数的“输入输出”。比如写个计算总价的函数，参数是单价和数量，就给参数都贴number标签，还得指定返回的也是数字：

function calculatePrice(price: number, count: number): number { return price * count }

要是你不小心把参数写成字符串calculatePrice("10", 5)，TypeScript会立刻拦着你，告诉你“参数类型不对”，不用运行就能发现问题。要是函数没有返回值（比如只是打印日志），就用特殊标签void：function logMessage(msg: string): void { console.log(msg) }。

第四步：不用怕“复杂类型”——先从常用的学

很多人一看到“泛型”“接口”就头疼，其实日常开发用最基础的就够。比如你写个能存任意类型的数组（比如既存水果又存数字），就用any标签（注意别乱用，尽量先把能确定类型的都标好）；要是多个函数用同一个对象的结构，就用interface（接口）：比如用户信息的结构，写个interface User { name: string; age: number }，之后所有用到用户对象的地方都用这个接口，不用重复写标签，还能统一规范。

其实TypeScript的核心就是“给代码加明确规则”，不是要你一下子学完所有功能，而是从写变量、函数的小地方开始用，慢慢就能体会到它帮你减少bug、提高效率的好处——不用把它当成“全新的语言”，就把它当成JS的“贴心助手”，用多了就顺手。