TypeScript 类型全解分类、用法与区分指南本文完整梳理 TypeScript 全量类型体系包含分类定义、代码示例、核心区分要点可直接作为学习手册使用。一、原始类型Primitive Types原始类型是 TypeScript 最基础的类型对应 JavaScript 的原始值按值存储是构成所有复杂类型的最小单元。类型核心说明代码示例核心区分要点string字符串类型对应所有文本内容let str: string hello TS仅匹配文本内容单/双引号/反引号包裹的值number数字类型包含整数、浮点数、NaN、Infinitylet num: number 100JS 中所有数值统一用number无 int/float 区分boolean布尔类型仅两个合法值let isDone: boolean true仅匹配true/false不匹配 0/1 等真值symbolES6 新增的唯一值类型let sym: symbol Symbol(key)每次调用Symbol()都会生成全局唯一的值bigintES2020 新增的大整数类型let big: bigint 100n用于超出Number.MAX_SAFE_INTEGER的超大整数以n结尾null空值类型代表“无对象”let n: null null仅能赋值null代表主动定义的空值undefined未定义类型代表“未赋值”let u: undefined undefined变量声明未赋值时的默认值仅能赋值undefined补充开启strictNullChecks后null和undefined只能赋值给自身和any/unknown避免空值报错。二、复合类型Composite Types由多个基础类型组合而成的集合类型用于描述一组值的结构。2.1 数组Array用于描述同类型、长度不固定的有序集合有两种标准写法// 写法1类型 方括号推荐简洁直观letnumArr:number[][1,2,3,4];letstrArr:string[][a,b,c];// 写法2泛型数组写法letboolArr:Arrayboolean[true,false];// 联合类型数组支持多种类型元素letmixArr:(number|string)[][1,hello,2,world];核心区分要点所有元素类型必须与声明一致或为声明的联合类型长度不固定可动态增删元素方括号写法是泛型写法的语法糖功能完全一致2.2 元组Tuple用于描述固定长度、固定位置类型的有序数组是数组的子类型// 声明一个长度为3对应位置类型分别为 string、number、boolean 的元组letuserInfo:[string,number,boolean][张三,20,true];// 访问元素console.log(userInfo[0]);// 张三console.log(userInfo[1]);// 20// 错误示例类型/长度不匹配// userInfo [李四, 20, false]; // 报错第二个元素必须是number// userInfo [王五, 25]; // 报错长度不匹配核心区分要点长度固定每个位置的类型必须严格匹配可通过下标精准访问对应元素TS 会精准推导出每个位置的类型严格模式下不允许给超出声明长度的下标赋值2.3 枚举Enum用于定义一组命名常量将零散的相关常量聚合为一个类型提升代码可读性// 1. 数字枚举默认从0开始自增enumColor{Red,// 0Green,// 1Blue// 2}letmyColor:ColorColor.Green;// 1console.log(Color[1]);// Green数字枚举支持反向映射// 2. 字符串枚举无反向映射推荐使用enumDirection{UpUP,DownDOWN,LeftLEFT,RightRIGHT}letmyDir:DirectionDirection.Up;// UP// 3. 异构枚举不推荐数字字符串混合enumMixed{No0,YesYES}核心区分要点用enum关键字声明是 TypeScript 少数非 JS 扩展的类型数字枚举支持「名称→值」「值→名称」双向映射字符串枚举仅支持单向映射编译后会生成真实的 JS 对象而非仅做类型擦除三、对象类型Object TypesTypeScript 核心类型用于描述对象的结构形状是日常开发中最常用的类型。3.1 接口Interface专门用于定义对象、类的结构规范支持继承和声明合并是定义对象类型的首选// 定义用户对象的接口interfaceUser{readonlyid:number;// 只读属性初始化后不可修改name:string;// 必选属性age?:number;// 可选属性可传可不传[propName:string]:any;// 任意属性支持扩展额外字段}// 必须严格匹配接口的结构constzhangsan:User{id:1,name:张三,age:20,gender:男,// 任意属性扩展address:北京市};// 接口继承interfaceVipUserextendsUser{vipLevel:number;expireTime:string;}constlisi:VipUser{id:2,name:李四,vipLevel:1,expireTime:2025-12-31};核心区分要点用interface关键字声明仅用于类型定义编译后完全擦除不生成 JS 代码支持声明合并同名接口会自动合并属性适合扩展第三方库类型支持多继承可扩展多个接口结构更清晰仅能用于定义对象、函数、类的结构无法定义基础类型、联合类型等3.2 类型别名Type Alias给任意类型起一个别名灵活性极高可覆盖所有类型定义场景// 1. 给基础类型起别名typeUserNamestring;// 2. 定义对象类型typeGoods{readonlyid:number;title:string;price:number;stock?:number;};// 3. 定义联合类型、交叉类型interface 无法实现typeStatuspending|success|error;typeSizesmall|medium|large;// 4. 定义函数类型typeAddFunc(a:number,b:number)number;// 5. 交叉类型合并typeA{a:number};typeB{b:string};typeCAB;// 同时包含 a 和 b 属性核心区分要点用type关键字声明编译后完全擦除不生成 JS 代码不支持声明合并同名 type 会报错灵活性更高可定义基础类型、联合类型、交叉类型、元组等所有类型定义对象类型时通过实现继承效果而非extends3.3 类ClassTypeScript 中的类既是 JS 中的构造函数同时也是一种类型可描述实例的结构// 定义类同时定义了对应的类型classAnimal{// 访问修饰符public默认、private、protectedpublicname:string;privateage:number;// 仅类内部可访问protectedcolor:string;// 类和子类可访问constructor(name:string,age:number,color:string){this.namename;this.ageage;this.colorcolor;}move(distance:number0):void{console.log(${this.name}移动了${distance}米);}}// 类的实例类型为 Animalconstcat:AnimalnewAnimal(猫咪,2,白色);cat.move(10);// 类实现接口interfaceClockInterface{currentTime:Date;setTime(d:Date):void;}classClockimplementsClockInterface{currentTime:DatenewDate();setTime(d:Date){this.currentTimed;}}核心区分要点用class关键字声明编译后会生成真实的 JS 构造函数而非仅类型擦除支持访问修饰符、继承、抽象类、静态属性等面向对象特性既是值可实例化也是类型可直接用于类型注解四、高级类型Advanced Types基于基础类型组合、扩展而来的复杂类型用于实现更灵活、更通用的类型定义。4.1 联合类型Union Types表示「多个类型中任选其一」用|分隔满足其中一个类型即可// 基础联合类型letvalue:string|number;valuehello;// 合法value100;// 合法// value true; // 报错不满足 string | number// 接口联合类型interfaceCircle{kind:circle;radius:number;}interfaceSquare{kind:square;sideLength:number;}typeShapeCircle|Square;functiongetArea(shape:Shape):number{switch(shape.kind){casecircle:returnMath.PI*shape.radius**2;casesquare:returnshape.sideLength**2;}}核心区分要点「或」逻辑满足其中一个类型即可仅能访问所有联合类型的共有属性需通过类型守卫缩小类型范围后才能访问独有属性4.2 交叉类型Intersection Types表示「同时满足多个类型」用分隔必须合并所有类型的属性interfacePerson{name:string;age:number;}interfaceEmployee{id:number;department:string;}// 同时包含 Person 和 Employee 的所有属性typeStaffPersonEmployee;conststaff:Staff{name:张三,age:25,id:1001,department:技术部};核心区分要点「且」逻辑必须同时满足所有类型的结构同名属性如果类型不兼容会合并为never类型4.3 字面量类型Literal Types将类型限制为具体的固定值而非一类值通常和联合类型搭配使用// 1. 字符串字面量类型typeDirectionup|down|left|right;letmyDir:Directionup;// 合法// myDir top; // 报错只能是指定的4个值// 2. 数字字面量类型typeStatusCode200|400|401|403|404|500;letcode:StatusCode200;// 合法// 3. 布尔字面量类型typeIsTruetrue;letflag:IsTruetrue;// 仅能赋值true核心区分要点直接用具体的值作为类型而非string/number等大类常用于限制参数、状态的可选值提升代码类型约束和提示4.4 泛型Generics类型参数用于定义可复用的通用类型调用时才传入具体类型实现类型与逻辑的解耦// 1. 泛型函数functionidentityT(arg:T):T{returnarg;}// 调用时传入具体类型letstrResidentitystring(hello);// 返回值类型为 stringletnumResidentitynumber(100);// 返回值类型为 number// 也可依靠TS类型推断省略类型参数letboolResidentity(true);// 自动推断为 boolean// 2. 泛型约束限制类型参数的范围interfaceLengthwise{length:number;}functiongetLengthTextendsLengthwise(arg:T):number{returnarg.length;}getLength(hello);// 合法字符串有length属性getLength([1,2,3]);// 合法数组有length属性// getLength(100); // 报错数字无length属性// 3. 泛型接口interfaceApiResponseT{code:number;message:string;data:T;// 泛型数据字段}// 定义用户数据类型typeUserData{id:number;name:string;};// 接口返回值类型constuserRes:ApiResponseUserData{code:200,message:success,data:{id:1,name:张三}};核心区分要点用T声明类型参数T 可替换为任意合法名称支持多个类型参数调用时才传入具体类型一次定义多处复用兼顾灵活性和类型安全是 TypeScript 类型编程的核心绝大多数工具类型都基于泛型实现4.5 索引类型与映射类型基于已有类型快速生成新的类型是 TypeScript 内置工具类型的核心实现原理// 1. keyof 索引类型查询获取类型的所有键名返回联合类型interfaceUser{id:number;name:string;age:number;}typeUserKeyskeyofUser;// 等价于 id | name | age// 2. T[K] 索引访问获取键名对应的类型typeUserIdTypeUser[id];// numbertypeUserNameTypeUser[name];// string// 3. 映射类型遍历已有类型的键生成新类型// 内置工具类型 Partial将所有属性转为可选typePartialUserPartialUser;// 等价于 { id?: number; name?: string; age?: number }// 内置工具类型 Readonly将所有属性转为只读typeReadonlyUserReadonlyUser;// 等价于 { readonly id: number; readonly name: string; readonly age: number }// 内置工具类型 Pick提取指定的属性typeUserBaseInfoPickUser,id|name;// 等价于 { id: number; name: string }// 内置工具类型 Omit排除指定的属性typeUserWithoutAgeOmitUser,age;// 等价于 { id: number; name: string }核心区分要点keyof用于获取类型的键名联合T[K]用于获取键对应的值类型映射类型通过in遍历键名批量修改属性的修饰符、类型绝大多数内置工具类型都基于索引类型映射类型实现无需重复造轮子五、特殊类型Special Types用于处理特殊场景的类型是 TypeScript 类型系统的补充。5.1any类型绕过 TypeScript 类型检查的“万能类型”可赋值给任意类型也可接受任意类型的赋值letdata:any100;datahello;// 合法datatrue;// 合法data[1,2,3];// 合法data.toUpperCase();// 不报错即使data不是字符串data();// 不报错即使data不是函数核心区分要点完全绕过类型检查会失去 TypeScript 的类型安全保障非特殊场景严禁滥用可赋值给任意类型除了never也可接受任意类型的赋值访问任何属性、调用任何方法都不会报错极易引发线上问题5.2unknown类型类型安全版的any是 TS 推荐的替代any的类型letvalue:unknownhello;// 直接使用会报错必须先缩小类型范围// value.toUpperCase(); // 报错// 方式1typeof 类型守卫if(typeofvaluestring){console.log(value.toUpperCase());// 合法TS已确认是string类型}// 方式2类型断言console.log((valueasstring).toUpperCase());// 合法核心区分要点和any一样可接受任意类型的赋值但无法直接使用必须通过类型守卫、类型断言缩小类型范围后才能正常使用保证类型安全所有不确定类型的场景优先使用unknown而非any5.3void类型表示「无返回值」仅用于标注函数的返回值类型// 函数无返回值标注为voidfunctionwarn(msg:string):void{console.log(警告,msg);// 无return语句或return空值}// 仅能赋值 null 或 undefined严格模式下仅能赋值undefinedletempty:voidundefined;核心区分要点仅用于函数返回值代表函数没有返回任何内容函数没有return语句或return后无值返回值类型默认为void严格模式下void类型仅能赋值undefined5.4never类型表示「永不存在的值的类型」是 TypeScript 中的底部类型// 场景1抛出错误的函数永远不会有返回值functionthrowError(msg:string):never{thrownewError(msg);}// 场景2无限循环的函数永远不会执行完成functioninfiniteLoop():never{while(true){}}// 场景3穷尽检查确保联合类型的所有分支都被处理typeAllTypestring|number;functionhandleValue(value:AllType):void{if(typeofvaluestring){console.log(字符串,value);}elseif(typeofvaluenumber){console.log(数字,value);}else{// 这里的value类型为never若新增联合类型分支未处理会直接报错constcheck:nevervalue;}}核心区分要点是所有类型的子类型可赋值给任意类型但没有任何类型是never的子类型除了never自身代表函数永远不会正常返回或变量永远不会有值常用于穷尽检查避免遗漏联合类型的分支处理六、核心区分速查表类型分类核心用途关键字编译后是否生成JS代码核心特性原始类型描述基础值无直接用类型名否按值存储最小类型单元数组/元组描述有序集合无[]/泛型否数组长度不固定元组长度固定枚举聚合命名常量enum是生成对象数字枚举支持双向映射接口定义对象/类结构interface否支持继承、声明合并类型别名通用类型定义type否灵活性最高支持所有类型类面向对象编程类型定义class是生成构造函数既是值也是类型支持面向对象特性泛型通用可复用类型T否类型参数调用时传入具体类型any绕过类型检查any否完全失去类型安全不推荐使用unknown安全的不确定类型unknown否必须缩小类型范围才能使用推荐使用void函数无返回值void否仅用于函数返回值never永不存在的值never否底部类型函数永远不会正常返回七、核心使用原则优先使用基础类型、接口、类型别名满足日常开发80%的场景不确定类型时优先用unknown 类型守卫绝对禁止滥用any定义对象结构优先用interface需要定义联合/交叉类型时用type通用逻辑、可复用组件优先用泛型兼顾灵活性和类型安全优先使用 TS 内置工具类型避免重复实现映射类型逻辑