阅读本文你能学到什么什么是类型注解为什么要用它如何为变量、数组添加类型约束联合类型和类型别名的使用场景开发中的注意事项与常见错误前言TypeScript 最核心的特性就是类型系统而类型注解是进入类型世界的第一道门。很多初学者会问“不就是给变量加个类型吗有什么好学的”可别小看这个类型注解它可不只是加个标签那么简单至少能帮你搞定三件大事️ 更安全 —— 在编码阶段就发现类型错误 更智能 —— 编辑器提供精准的代码提示 更可读 —— 类型本身即是最好的文档本文将从零开始带你彻底掌握 TypeScript 的类型注解。一、类型注解是什么类型注解是指为变量添加类型约束让变量只能被赋值为约定好的类型同时还能获得对应的代码提示与智能补全。letmsg:stringHello TypeScript// ↑// 这就是类型注解约束 msg 只能是字符串说明:string就是类型注解约束变量 msg 只能被赋值为 string 类型同时可以有 string 类型的相关提示如 .charAt()、.concat()、.substring() 等方法。为什么需要类型注解对比一下有无类型注解的区别// ❌ 没有类型注解JavaScript 写法functionadd(a,b){returnab}add(1,2)// 结果是 12完全不符合预期但不会报错// ✅ 有类型注解TypeScript 写法functionadd(a:number,b:number):number{returnab}add(1,2)// ❌ TypeScript 直接报错类型“string”不能赋值给类型“number”类型注解的价值把运行时错误提前到编译时发现。二、常用类型概览TypeScript 中的类型主要分为两大类分类包含类型JS 已有类型简单类型number、string、boolean、null、undefined复杂类型数组、函数、对象TS 新增类型联合类型、类型别名、接口interface、字面量类型、泛型、枚举、void、any等本章先聚焦基础类型后续篇章会逐步展开接口、泛型等高级内容。三、简单类型注解简单类型的注解完全按照 JavaScript 中的类型名称全小写格式来书写即可。3.1 语法变量:类型3.2 示例letage:number18// ✅ 数字类型letname:stringJack// ✅ 字符串类型letisLoading:booleanfalse// ✅ 布尔类型letnullValue:nullnull// ⚠️ 极少这样用letundefinedValue:undefinedundefined// ⚠️ 极少这样用⚠️ 常见错误首字母大写初学者容易写成 JavaScript 的包装类型首字母大写// ❌ 错误letage:Number18// ✅ 正确letage:number18记住TypeScript 简单类型一律使用小写number、string、boolean。3.3 关于 null 和 undefinednull 和 undefined 在实际开发中很少单独注解更多用于联合类型// ❌ 极少这样用letdata:nullnull// ✅ 更常见的用法联合类型letdata:string|nullhellodatanull// 允许这种“可能是字符串也可能是空”的场景非常常见比如后端接口返回的数据。四、数组类型注解重点给变量加上数组类型注解后能带来两个很实用的好处4.1 数组注解的好处① 既限制变量为数组又限制数组成员的类型letnumbers:number[][1,2,3]numbers.push(4)// ❌ 报错类型“string”不能赋值给类型“number”② 编码时既有数组方法提示也有成员方法提示当你操作数组时编辑器会智能提示数组本身的方法.push()、.pop()、.map()、.filter() 等数组成员的属性和方法如字符串的 .toUpperCase()4.2 如何注解数组类型TypeScript 提供了两种数组注解方式4.2.1 语法一元素类型 []推荐 ✅在元素类型后面接上 []表示由此类型元素组成的一个数组例如letnumbers:number[][1,2,3]// 数组成员只能是数字letnames:string[][Alice,Bob]// 数组成员只能是字符串4.2.2 语法二数组泛型 Array元素类型使用数组泛型Array元素类型例如letnumbers:Arraynumber[1,2,3]letnames:Arraystring[Alice,Bob]推荐使用语法一类型[]写法更简洁也是社区的主流风格。五、联合类型和别名类型5.1 联合类型Union Types联合类型说白了就是或的关系 —— 通过竖线 | 连接多个类型表示变量可以是其中任意一种类型。// 变量可以是 string 或 numberletid:string|numberiduser-001// ✅id1001// ✅idtrue// ❌ 报错boolean 不在联合类型中联合类型在数组中的应用// 数组中每个元素可以是 string 或 numberletarr:(string|number)[][1,name]⚠️ 注意括号不能省略(string | number)[] 表示数组中的每个元素是 string 或 number而 string | number[] 表示要么是 string要么是 number 数组含义完全不同实际开发场景// 接口返回的数据可能是对象也可能是 null表示未找到functiongetUser(id:number):{name:string}|null{constuserdatabase.find(id)returnuser||null}5.2 类型别名Type Aliases通过type关键字为复杂类型起一个别名方便你到处复用不用反复写一堆。// 定义类型别名typeItemType(string|number)[]// 复用同一个类型letstudentList:ItemType[1,小明,2,小红]letteacherList:ItemType[T001,张老师,T002,李老师]letproductIds:ItemType[1001,P1002,1003]命名规范类型别名推荐使用大驼峰命名法PascalCase如 ItemType、UserId、ApiResponse。类型别名的更多用法// 为联合类型起别名typeIDstring|number// 为对象类型起别名typeUser{name:stringage:number}// 使用别名letuserId:IDu001letuser:User{name:Jack,age:18}六、开发中的常见错误与避坑指南常见错误正确写法说明let a: Number 10let a: number 10使用小写number而非大写Numberlet b: object {}let b: { name: string } { name: Jack }避免使用object应明确指定属性结构let c: string[] | numberlet c: (string | number)[]注意括号位置含义完全不同let d: [] []let d: any[] []或let d: unknown[] []空数组类型应明确成员类型 高频错误详解错误一类型string不能赋值给类型numberletage:number18// ❌ 报错// 解决age 要么改成 string 类型要么赋值为数字错误二数组类型不匹配letarr:number[][1,2,3]// ❌ 报错// 解决如果确实需要混合类型使用 (string | number)[]letarr:(string|number)[][1,2,3]// ✅七、本篇小结类型注解示例说明数字let a: number 10整数或浮点数字符串let b: string hi文本数据布尔let c: boolean truetrue或false数组推荐let d: number[] [1, 2]数字组成的数组数组泛型let e: Arraystring [a]字符串组成的数组联合类型let f: string | number hi可以是字符串或数字类型别名type MyList number[]为类型起别名便于复用核心记忆口诀类型注解小写写数组用中括号联合用竖线别名用 type下篇预告 上篇回顾[为什么学 TypeScript—— 优势、场景与环境搭建]掌握类型注解之后下一章我们将学习如何为函数和对象添加类型这是 TypeScript 在实际项目中最高频的使用场景。 点击阅读下一篇《TypeScript 核心语法进阶 —— 函数与对象类型》欢迎持续关注 参考资料TypeScript 官方文档 —— Basic TypesTypeScript 官方文档 —— Everyday Types————晓说前端 · 正在从“会写”到“搞懂”的路上如果这篇文章帮到了你点个关注一起进阶。