TypeScript 如何做类型注释

日常写代码时，你有没有过这样的经历：写了几百行JS代码，运行时突然报“某某变量是undefined，没法调用方法”的错，翻来覆去找半天才发现是某个参数传错了类型？比如本来要传用户的数字年龄，结果不小心传了字符串“25”，直接导致功能崩了。其实只要提前给代码加个“类型提示标签”，就能提前拦住大部分这种坑，这个标签就是我们今天要说的——类型注释，而帮我们轻松做这件事的工具，就是TypeScript。

什么是类型注释？就像给变量贴“身份标签”

你可以把类型注释理解成给代码里的每个变量、函数参数、返回值贴个“身份标签”，明确告诉它“你只能装什么类型的东西”。举个生活化的例子：你有个装水果的保鲜盒，贴个“只能装苹果”的标签，就不能往里面塞橘子或香蕉，不然会乱套。

在TypeScript里，这个“标签”的写法特别简单，只要在变量或参数后面加个冒号，再跟上类型就行，完全不用改原来的代码逻辑。比如你要声明一个存储用户年龄的变量，直接写let age: number = 25就好，这里的number就是类型注释，意思是“age这个变量只能存数字，不能存字符串或布尔值”。

给不同代码元素加类型注释，新手也能快速上手

类型注释不是只能用在变量上，日常写代码的关键地方都能加，而且写法都很简单，不用记复杂的规则。

给函数参数加注释，避免传错内容

写函数时，参数是最容易出错的地方，比如写一个计算两个数字相加的函数，如果你不提前给参数加类型，别人可能会不小心传字符串进去，结果变成字符串拼接（比如1 + "2" = "12"），根本不是你要的结果。加了类型注释就不一样，你可以这样写：

`typescript

function add(a: number, b: number): number {

return a + b;

}

`

这里a: number和b: number就是给两个参数加的注释，明确要求必须传数字；最后的: number是给函数返回值加的注释，告诉别人这个函数返回的一定是数字。要是有人调用时写add(1, "2")，TypeScript会直接标红报错，根本等不到代码运行就拦住错误。

给对象属性加注释，管好复杂数据

平时存用户信息时，会用到对象，比如const user = { name: "小明", age: 18 }，如果不加类型，别人可能不小心给age设成字符串“18”。给对象属性加注释，有两种简单方法：一种是直接写在变量后：

`typescript

const user: { name: string; age: number } = { name: "小明", age: 18 };

`

另一种更简洁的是用TypeScript的“类型别名”，相当于给这个对象格式起个名字，以后用的时候直接调用就行：

`typescript

type User = { name: string; age: number };

const user: User = { name: "小明", age: 18 };

`

这样一来，只要是User类型的对象，就必须同时有name（字符串）和age（数字）两个属性，少一个或属性类型不对都不行。

给数组加注释，统一数组内容

数组也是常用的数据类型，比如存用户的爱好，写const hobbies = ["看书", "打球"]，如果不加类型，很容易不小心加个数字进去，变成["看书", 123]，后续处理时就会出问题。给数组加类型注释也很简单，只要在类型后面加个方括号就行：

`typescript

const hobbies: string[] = ["看书", "打球"];

`

这里的string[]就表示“这个数组里只能存字符串”，加其他类型的内容TypeScript都会报错。

类型注释的核心作用，帮你少踩90%的代码坑

很多人刚用TypeScript时会觉得，加类型注释太麻烦，不如直接写JS。但用多了就会发现，它能帮你省超多排查错误的时间：你不用等代码上线后才发现参数传错，写的时候就能提前收到提示；团队协作时，不用反复问别人“这个函数要传什么类型的参数”，看一眼类型注释就懂。

而且TypeScript的类型注释不是死板的，它还能自动“推断”大部分常用类型，比如你写let name = "小明"，TypeScript会自动认为name是字符串类型，不用手动加注释；只有在类型不明确、或者需要明确约束的时候，才需要手动加类型注释，完全不会给你增加额外负担。