当前位置：首页 > news >正文

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

news 2026/6/5 21:14:41

你有没有经历过：凌晨三点，线上报“Cannot read property ‘name’ of undefined”，你爬起来一看，原来是后端返回的数据少了一层。如果JS有“类型检查”，这种悲剧根本不会发生。今天我们就来认识TypeScript——给JavaScript买了一份“意外险”。

前言

JavaScript就像个自由散漫的天才：你给它一个字符串，它当数字用；你忘记传参数，它给你个undefined；你访问对象不存在的属性，它笑眯眯地说“没事，我给你undefined”。这种灵活在小型项目里很爽，但项目一大，就成了噩梦。

TypeScript（简称TS）就是来解决这个问题的。它给JS加上了类型系统，在代码运行之前就帮你检查类型错误。就像给代码装了安检门，不规范的写法根本过不去。

一、TypeScript是啥？JS的“严格模式”Pro Max

TypeScript是微软开发的开源语言，它是JavaScript的超集。意思是：所有合法的JS代码，在TS里也合法。TS只是给JS加了类型注解和一些新特性，然后编译成干净的JS。

// JS写法functiongreet(name){return'Hello, '+name;}// TS写法（加了类型）functiongreet(name:string):string{return'Hello, '+name;}greet(123);// ❌ 报错：参数不能是数字

你看，TS在编译阶段就抓住了错误，不用等到运行时。

二、为什么要用TS？三个字：稳、爽、香

稳：类型错误在写代码时就暴露，而不是在用户手里炸。
爽：编辑器智能提示飞起，不用记方法名、参数顺序。
香：代码即文档，看函数签名就知道怎么用。

据统计，使用TS的项目，早期Bug能减少15%~25%。对于中大型项目，TS几乎是标配。

三、基础类型：TS的“基本词汇”

TS支持JS的所有类型，还加了一些新的。

1. 原始类型

letname:string='张三';letage:number=18;letisStudent:boolean=true;letnothing:null=null;letnotDefined:undefined=undefined;letbig:bigint=100n;letsym:symbol=Symbol('id');

2. 数组

letlist1:number[]=[1,2,3];letlist2:Array<string>=['a','b'];// 泛型写法

3. 元组（固定长度和类型的数组）

letperson:[string,number]=['张三',18];person[0]='李四';// OKperson[1]='20';// ❌ 报错，第二个元素必须是数字

4. 枚举（给一组数字起名字）

enumColor{Red,Green,Blue}letc:Color=Color.Red;console.log(c);// 0（默认从0开始）// 自定义值enumStatus{Success=200,NotFound=404}

5. Any（万能类型，慎用）

letnotSure:any=4;notSure='字符串';// OKnotSure=true;// OK

any会关闭类型检查，相当于回到JS。尽量少用，除非你确定这个值无法预知类型。

6. Unknown（安全的Any）

letvalue:unknown='hello';value=123;// OK// console.log(value.toUpperCase()); // ❌ 报错，unknown不能直接调用方法if(typeofvalue==='string'){console.log(value.toUpperCase());// 类型收窄后可用}

unknown比any安全，因为使用前必须先判断类型。

7. Void（没有返回值）

functionwarnUser():void{console.log('警告');}// 变量声明为void类型只能赋值为null或undefined（strict模式下只能undefined）

8. Never（永远不会发生的类型）

functionerror(message:string):never{thrownewError(message);}functioninfiniteLoop():never{while(true){}}

四、类型注解：给变量贴标签

TS的核心就是类型注解：在变量、函数参数、返回值后面加上: 类型。

letmyName:string='张三';functionadd(a:number,b:number):number{returna+b;}

但TS很智能，很多时候可以类型推断，不用显式写：

letage=18;// TS自动推断为numberage='18';// ❌ 报错

五、接口（Interface）：定义对象的形状

接口是TS里最常用的功能，用来描述对象的结构。

interfacePerson{name:string;age:number;email?:string;// 可选属性readonlyid:number;// 只读属性}constzhangsan:Person={name:'张三',age:18,id:1};zhangsan.id=2;// ❌ 报错，只读属性不能改

接口还可以描述函数类型：

interfaceAddFunc{(a:number,b:number):number;}constadd:AddFunc=(x,y)=>x+y;

六、类型别名（Type）：给类型起外号

类型别名和接口很像，但能表示联合类型、元组等更复杂的类型。

typeID=string|number;// 联合类型typePoint=[number,number];// 元组typeCallback=(data:string)=>void;letuserId:ID=123;userId='abc';

接口 vs 类型别名：

接口可以扩展（extends），类型别名用交叉（&）。
接口可以重复定义自动合并，类型别名不能重复。
推荐优先用接口描述对象，用类型别名描述联合、元组等。

七、实战：用TS写一个简单的函数

// 需求：格式化用户信息interfaceUser{name:string;age:number;address?:string;}functionformatUser(user:User,withAddress:boolean=false):string{letbase=`${user.name},${user.age}岁`;if(withAddress&&user.address){base+=`, 地址：${user.address}`;}returnbase;}constu:User={name:'李四',age:20,address:'北京'};console.log(formatUser(u,true));// "李四, 20岁, 地址：北京"