你的JS代码总在半夜崩溃？TypeScript来“上保险”了

你有没有经历过凌晨三点线上报“Cannot read property ‘name’ of undefined”你爬起来一看原来是后端返回的数据少了一层。如果JS有“类型检查”这种悲剧根本不会发生。今天我们就来认识TypeScript——给JavaScript买了一份“意外险”。前言JavaScript就像个自由散漫的天才你给它一个字符串它当数字用你忘记传参数它给你个undefined你访问对象不存在的属性它笑眯眯地说“没事我给你undefined”。这种灵活在小型项目里很爽但项目一大就成了噩梦。TypeScript简称TS就是来解决这个问题的。它给JS加上了类型系统在代码运行之前就帮你检查类型错误。就像给代码装了安检门不规范的写法根本过不去。一、TypeScript是啥JS的“严格模式”Pro MaxTypeScript是微软开发的开源语言它是JavaScript的超集。意思是所有合法的JS代码在TS里也合法。TS只是给JS加了类型注解和一些新特性然后编译成干净的JS。// JS写法functiongreet(name){returnHello, name;}// TS写法加了类型functiongreet(name:string):string{returnHello, name;}greet(123);// ❌ 报错参数不能是数字你看TS在编译阶段就抓住了错误不用等到运行时。二、为什么要用TS三个字稳、爽、香稳类型错误在写代码时就暴露而不是在用户手里炸。爽编辑器智能提示飞起不用记方法名、参数顺序。香代码即文档看函数签名就知道怎么用。据统计使用TS的项目早期Bug能减少15%~25%。对于中大型项目TS几乎是标配。三、基础类型TS的“基本词汇”TS支持JS的所有类型还加了一些新的。1. 原始类型letname:string张三;letage:number18;letisStudent:booleantrue;letnothing:nullnull;letnotDefined:undefinedundefined;letbig:bigint100n;letsym:symbolSymbol(id);2. 数组letlist1:number[][1,2,3];letlist2:Arraystring[a,b];// 泛型写法3. 元组固定长度和类型的数组letperson:[string,number][张三,18];person[0]李四;// OKperson[1]20;// ❌ 报错第二个元素必须是数字4. 枚举给一组数字起名字enumColor{Red,Green,Blue}letc:ColorColor.Red;console.log(c);// 0默认从0开始// 自定义值enumStatus{Success200,NotFound404}5. Any万能类型慎用letnotSure:any4;notSure字符串;// OKnotSuretrue;// OKany会关闭类型检查相当于回到JS。尽量少用除非你确定这个值无法预知类型。6. Unknown安全的Anyletvalue:unknownhello;value123;// OK// console.log(value.toUpperCase()); // ❌ 报错unknown不能直接调用方法if(typeofvaluestring){console.log(value.toUpperCase());// 类型收窄后可用}unknown比any安全因为使用前必须先判断类型。7. Void没有返回值functionwarnUser():void{console.log(警告);}// 变量声明为void类型只能赋值为null或undefinedstrict模式下只能undefined8. Never永远不会发生的类型functionerror(message:string):never{thrownewError(message);}functioninfiniteLoop():never{while(true){}}四、类型注解给变量贴标签TS的核心就是类型注解在变量、函数参数、返回值后面加上: 类型。letmyName:string张三;functionadd(a:number,b:number):number{returnab;}但TS很智能很多时候可以类型推断不用显式写letage18;// TS自动推断为numberage18;// ❌ 报错五、接口Interface定义对象的形状接口是TS里最常用的功能用来描述对象的结构。interfacePerson{name:string;age:number;email?:string;// 可选属性readonlyid:number;// 只读属性}constzhangsan:Person{name:张三,age:18,id:1};zhangsan.id2;// ❌ 报错只读属性不能改接口还可以描述函数类型interfaceAddFunc{(a:number,b:number):number;}constadd:AddFunc(x,y)xy;六、类型别名Type给类型起外号类型别名和接口很像但能表示联合类型、元组等更复杂的类型。typeIDstring|number;// 联合类型typePoint[number,number];// 元组typeCallback(data:string)void;letuserId:ID123;userIdabc;接口 vs 类型别名接口可以扩展extends类型别名用交叉。接口可以重复定义自动合并类型别名不能重复。推荐优先用接口描述对象用类型别名描述联合、元组等。七、实战用TS写一个简单的函数// 需求格式化用户信息interfaceUser{name:string;age:number;address?:string;}functionformatUser(user:User,withAddress:booleanfalse):string{letbase${user.name},${user.age}岁;if(withAddressuser.address){base, 地址${user.address};}returnbase;}constu:User{name:李四,age:20,address:北京};console.log(formatUser(u,true));// 李四, 20岁, 地址北京如果你在编辑器里打formatUser(它会提示参数类型和返回值类型爽不爽八、常见坑点与建议不要滥用anyany越多TS的价值越低。实在不知道类型先写unknown。严格模式开启strict: truetsconfig.json让TS更严格地检查。第三方库大多数库都有types/xxx类型定义安装后就能获得智能提示。编译后的JSTS只负责编译时检查运行时还是JS类型信息会被擦除。九、总结TS不是敌人是保镖给JS加上类型提前发现错误。基础类型、接口、类型别名是核心工具。用好类型推断少写冗余注解。逐步迁移老项目从.js改成.ts开启allowJs: true。学TS并不难你只需要把“写JS时的心理预期”明确写出来。明天我们继续深入TypeScript聊聊高级类型——泛型、联合类型、交叉类型、类型保护让你写出更灵活更安全的代码。如果你觉得今天的“保险课”够实在点个赞让更多人看到。我们明天见