TypeScript 新手入门教程从变量、类型到泛型与综合实战本文适合刚接触 TypeScript、已经了解少量 JavaScript 基础的读者。文章会用一组由浅入深的小例子带你认识类型注解、类型推断、对象、数组、函数、联合类型、泛型等核心知识并在最后完成一个“学生成绩管理”小练习。一、TypeScript 是什么TypeScript简称 TS是在 JavaScript 基础上增加了类型系统的编程语言。大部分合法的 JavaScript 代码也可以写在 TypeScript 文件中。不同之处在于TypeScript 能在代码运行前发现许多类型问题。例如我们希望年龄是一个数字constusername:string小明;constage:number18;console.log(${username}今年${age}岁);如果误写成下面这样编辑器和 TypeScript 编译器都会提示错误constage:number18;// Type string is not assignable to type number.类型检查的价值在于很多问题不必等到程序运行后才发现。二、准备 TypeScript 学习环境首先安装较新的 Node.js。进入一个空文件夹后依次执行npminit-ynpminstall--save-dev typescript tsx npx tsc--init这几个命令分别用于创建 Node.js 项目在当前项目中安装 TypeScript 和tsx生成 TypeScript 配置文件tsconfig.json。创建01.ts后可以直接运行npx tsx 01.ts只进行类型检查、不生成 JavaScript 文件可以使用npx tsc--noEmit如果多个练习文件在顶层声明了同名变量可以在每个文件末尾添加export{};这样可以明确告诉 TypeScript当前文件是一个独立模块避免不同练习文件的顶层变量进入同一个全局作用域。三、变量、常量与类型推断TypeScript 支持 JavaScript 中的const和let。letscore80;score90;constcourseTypeScript;这里虽然没有手动写类型但 TypeScript 会根据初始值自动推断score是numbercourse是string。因此下面的赋值会报错score优秀;// 不能把 string 赋给 numberconst声明的变量不能重新赋值courseJavaScript;// Cannot assign to course because it is a constant.初学时可以遵循一个简单原则默认使用const只有确实需要重新赋值时才使用let。四、基础类型与字面量类型1. 常见基础类型consttitle:stringTypeScript 入门课;constprice:number29.9;constpublished:booleantrue;constlargeNumber:bigint9007199254740993n;consttoken:symbolSymbol(token);常用类型包括类型示例说明stringhello字符串number18、29.9整数和小数booleantrue、false布尔值bigint9007199254740993n任意精度整数大小受运行环境资源限制symbolSymbol(id)创建唯一值常用于特殊的对象属性键日常计算通常使用number。当整数可能超过Number.MAX_SAFE_INTEGER时才考虑bigint。需要注意number与bigint不能直接混合运算constresult1nBigInt(1);console.log(result);// 2n2. 字面量类型字面量不仅可以作为值也可以直接作为类型constdirection:left|rightleft;constlevel:1|2|32;此时direction只能是left或rightlevel只能是1、2、3中的一个。constwrongLevel:1|2|34;// Type 4 is not assignable to type 1 | 2 | 3.这种写法非常适合表示有限的状态或选项。五、null、undefined 与空值处理当项目开启strict或单独开启strictNullChecks时null和undefined不能随意赋给普通字符串、数字等类型。如果一个值可能不存在就要明确写进类型letnickname:string|undefinedundefined;nickname小明;函数参数也可以使用联合类型functiondisplayName(name:string|null):string{returnname??匿名用户;}console.log(displayName(null));// 匿名用户console.log(displayName(小王));// 小王??称为“空值合并运算符”。只有左侧是null或undefined时它才会使用右侧默认值。console.log(0??100);// 0console.log(??默认值);// 空字符串这与||不同因为||还会把0、空字符串等值当成假值。六、对象类型、可选属性与只读属性可以使用type给对象的结构起一个名字typeUser{id:number;name:string;email?:string;readonlycreatedAt:string;};其中email?表示email是可选属性readonly表示属性创建后不能通过该类型重新赋值。constuser:User{id:1,name:小明,createdAt:2026-01-01,};user.name小王;user.emailxiaowangexample.com;console.log(user.email??未填写邮箱);下面的代码会报错user.createdAt2026-02-01;// Cannot assign to createdAt because it is a read-only property.需要注意TypeScript 的readonly主要提供编译阶段的约束它并不等同于运行时的深度冻结。七、数组、只读数组与元组1. 普通数组数组类型有两种常见写法constscores:number[][80,90,100];constnames:Arraystring[小明,小王];两种写法表达的意思相同。如果数组允许多种类型可以使用联合类型constmixed:(string|number)[][语文,95];2. 元组元组适合表示长度固定、每个位置含义明确的数据constpoint:[number,number][10,20];这里第一个元素和第二个元素都必须是数字。3. 只读数组和只读元组constresult:readonly[string,number][数学,95];constscoreHistory:ReadonlyArraynumber[80,90,100];下面的修改会被 TypeScript 阻止result[1]100;scoreHistory.push(99);只读数组同样是浅层只读如果数组元素本身是对象对象内部是否可修改还要看对象自身的类型定义。八、函数、返回值与 void函数的参数和返回值都可以标注类型functionadd(a:number,b:number):number{returnab;}箭头函数同样可以添加类型constgreet(name:string,prefix您好):string{return${prefix}${name};};参数prefix有默认值TypeScript 会把它推断为string。如果函数不需要返回有意义的值可以使用voidfunctionlogMessage(message:string):void{console.log(message);}剩余参数与展开语法剩余参数可以把多个实参收集为数组functionsum(...values:number[]):number{returnvalues.reduce((total,value)totalvalue,0);}console.log(sum(1,2,3));// 6三个点也可以用于展开数组或对象constfirst[1,2];constcombined[...first,3];constoriginal{name:小明};constupdated{...original,age:18};九、解构赋值解构可以从数组或对象中快速取值。数组解构constcoordinate:[number,number][10,20];const[x,y]coordinate;console.log(x,y);对象解构conststudent{name:小明,age:18};const{name:studentName,age}student;console.log(studentName,age);name: studentName表示把对象的name属性取出来并存入名为studentName的变量。十、联合类型与类型收窄联合类型表示一个值可能属于多种类型functionformatId(id:string|number):string{if(typeofidnumber){returnid.toFixed(0);}returnid.toUpperCase();}console.log(formatId(42));// 42console.log(formatId(ab_42));// AB_42在判断之前id是string | number。经过typeof id number判断后TypeScript 知道第一个分支中的id一定是数字这个过程叫作类型收窄。如果没有先判断就直接调用某个类型独有的方法TypeScript 会报错functionwrong(id:string|number){returnid.toUpperCase();// number 类型没有 toUpperCase 方法}十一、unknown、any 与 never1. unknownunknown可以接收任意值但使用前必须先检查类型functionreadText(value:unknown):string{if(typeofvaluestring){returnvalue.toUpperCase();}returnString(value);}它适合描述“暂时不知道具体类型”的外部数据例如接口响应、用户输入或解析后的 JSON。2. anyany会大幅跳过类型检查letvalue:any10;value.notExist().whatever;这段代码可能在运行时崩溃但 TypeScript 很可能不会提前阻止。因此any更适合旧项目迁移时临时使用不应成为默认选择。能用unknown时通常优先使用unknown。3. nevernever表示函数不会正常结束并返回functionfail(message:string):never{thrownewError(message);}总是抛出异常或永不结束的函数可以使用never。十二、枚举与常量选项枚举可以为一组相关常量提供统一名称enumDirection{Upup,Downdown,Leftleft,Rightright,}functionmove(direction:Direction):void{console.log(向${direction}移动);}move(Direction.Up);对于简单的有限选项也可以使用字面量联合类型typeDirectionValueup|down|left|right;constnext:DirectionValuedown;两种方式没有绝对的优劣。简单场景中字面量联合类型通常更轻量需要一个运行时可访问的命名对象时枚举会更直观。十三、泛型让类型跟随输入变化如果希望一个函数适用于多种类型同时保留准确的输入输出关系可以使用泛型functionfirstOfT(items:T[]):T|undefined{returnitems[0];}constfirstNumberfirstOf([10,20]);constfirstNamefirstOf([小明,小王]);这里的T是类型参数传入number[]时T被推断为number传入string[]时T被推断为string。返回类型为什么是T | undefined因为空数组没有第一个元素constemptyResultfirstOfnumber([]);// 类型是 number | undefined与any相比泛型既能复用代码又不会丢失类型信息。十四、综合练习学生成绩管理现在把前面的对象类型、数组、函数、联合类型、可选属性、空值处理组合起来。typeStudent{name:string;scores:number[];nickname?:string;};functionaverage(scores:number[]):number|undefined{if(scores.length0){returnundefined;}consttotalscores.reduce((sum,score)sumscore,0);returntotal/scores.length;}functionsummary(student:Student):string{constdisplayNamestudent.nickname??student.name;constvalueaverage(student.scores);return${displayName}的平均分${value?.toFixed(1)??暂无成绩};}conststudents:Student[][{name:张明,scores:[88,92,95]},{name:李华,scores:[],nickname:小李},];students.forEach((student){console.log(summary(student));});运行结果张明的平均分91.7 小李的平均分暂无成绩这段代码包含几个值得关注的点nickname?表示昵称可以不存在average对空数组返回undefined避免除以零后得到无意义结果student.nickname ?? student.name优先使用昵称没有昵称时使用姓名value?.toFixed(1)使用可选链只有value不为null或undefined时才调用方法最后的?? 暂无成绩为无成绩的情况提供可读提示。十五、新手常见问题1. 为什么有时不用写类型因为 TypeScript 具备类型推断能力constcount10;这里已经能明确推断出count是数字没有必要机械地写成const count: number 10。但函数参数、对象结构和公共接口通常值得明确标注。2. 类型检查通过运行时就一定没问题吗不一定。TypeScript 主要在开发和编译阶段检查类型并不会自动验证接口返回的数据是否真的符合声明。来自网络、文件或用户输入的数据在运行时仍然需要校验。3. interface 和 type 应该选哪个两者都能描述对象结构。初学阶段可以先使用type掌握基础知识后再学习接口扩展、声明合并等差异。实际项目中保持团队风格一致通常比争论固定答案更重要。4. readonly 是否意味着数据绝对不能被修改不是。它主要限制通过当前 TypeScript 类型进行的赋值而且默认是浅层约束。如果需要运行时冻结对象可以继续了解Object.freeze()如果需要深层只读则要进一步设计递归只读类型。5. 应该尽量使用 any 吗不应该。any会让类型系统失去保护作用。面对不确定数据时优先考虑unknown检查类型后再使用。十六、推荐学习顺序学完本文后可以按照下面的顺序继续练习熟练使用基础类型、数组、对象和函数掌握联合类型、类型收窄、可选属性和空值处理学习interface、交叉类型和类型别名深入学习泛型、泛型约束和工具类型学习类、模块、异步函数以及第三方库的类型声明在一个真实项目中开启strict逐步解决类型错误。总结TypeScript 的核心并不是“给每个变量都加上类型”而是用类型准确描述数据以及数据在程序中的变化方式。本文依次介绍了类型注解与类型推断基础类型和字面量类型null、undefined与空值处理对象、数组、元组和只读类型函数、联合类型和类型收窄unknown、any、never枚举和泛型一个综合成绩管理练习。建议不要只阅读代码。把每段示例复制到本地运行再主动修改类型、观察报错学习效果会更好。TypeScript 的错误信息不是阻碍而是帮助我们理解代码约束的重要反馈。建议发布标签TypeScript、JavaScript、前端、编程入门、Web 开发