TypeScript 入门学习笔记：从零开始掌握核心概念

TypeScript 入门学习笔记从零开始掌握核心概念这篇笔记是我系统学习 TypeScript以下简称 TS后整理的内容重点放在 TS 本身的核心概念、用法和最佳实践上帮助所有想学习 TS 的人快速入门。一、先搞懂TS 到底是什么简单来说TS 是 JavaScript以下简称 JS的 “超集”—— 它在 JS 的基础上加了一套编译期静态类型检查系统。核心特点静态类型检查写代码时TS 会帮你检查变量、函数参数、返回值的类型是否匹配有问题直接标红不用等到运行时才发现 bug。编译运行TS 代码不能直接在浏览器 / Node.js 里跑需要先编译成纯 JS 代码再运行。完全兼容 JS任何合法的 JS 代码都是合法的 TS 代码你可以逐步把 JS 项目迁移到 TS。二、TS 基础类型给变量 “贴标签”TS 的核心优势就是 “类型安全”而基础类型就是最基础的 “标签”。1. 常用基础类型TS 类型说明用法示例number所有数字整数、浮点数都算let age: number 18;string字符串let name: string 张三;boolean布尔值只有true/falselet isStudent: boolean true;void无返回值用于函数function log(): void { console.log(hello); }数组类型同类型元素的集合let scores: number[] [90, 85, 95];元组类型固定长度、固定每个位置类型的数组let user: [string, number] [张三, 18];2. 两个关键概念类型注解就是给变量 / 函数 “贴标签” 的语法: 类型。// 给变量贴标签leta:number10;// 给函数参数和返回值贴标签functionadd(a:number,b:number):number{returnab;}类型别名type给复杂的类型起个简短的别名简化代码。// 给对象类型起别名typeUser{name:string;age:number;};// 使用别名constuser:User{name:张三,age:18};三、函数类型明确 “输入” 和 “输出”TS 的函数核心就是明确 “参数是什么类型”、“返回值是什么类型”。1. 基本写法// 明确参数类型、返回值类型functionadd(a:number,b:number):number{returnab;}2. 可选参数TS 的便利特性给参数加个?就可以标记为 “可选”可传可不传。// age是可选参数不传也不会报错functionsayHi(name:string,age?:number):void{console.log(你好我是${name});if(age)console.log(今年${age}岁);}sayHi(张三);// 正常运行sayHi(李四,20);// 正常运行四、对象类型与接口定义 “数据结构”TS 里用type或interface来定义对象的结构就像给数据画了一张 “图纸”。1. 用type定义对象类型typeStudent{// 必选属性name:string;age:number;// 可选属性加?标记score?:number;};conststudent:Student{name:张三,age:18};2. 用interface定义接口interface和type很像但它更适合定义 “行为规范”还支持继承。// 定义一个“能说话”的接口interfaceSpeakable{sayHi():void;}// 定义Student接口继承SpeakableinterfaceStudentextendsSpeakable{name:string;age:number;}// 实现Student接口的对象必须有name、age、sayHiconststudent:Student{name:张三,age:18,sayHi(){console.log(你好);}};五、枚举enum给常量 “起名字”TS 的enum用来定义一组固定的常量让代码更可读。1. 基本用法// 默认从0开始递增Up0, Down1, Left2, Right3enumDirection{Up,Down,Left,Right}// 也可以手动赋值后续自动递增enumDirection{Up10,Down,Left,Right}// Down11, Left12, Right132. 进阶用法位掩码用 2 的幂给枚举赋值可以方便地做位运算组合多个状态。enumPermission{Read2,Write4,Delete8}// 组合权限读写constpPermission.Read|Permission.Write;// 检查是否有写权限constcanWrite(pPermission.Write)!0;// true六、class类封装 “数据” 和 “行为”TS 的class是面向对象编程的核心用来封装 “属性” 和 “方法”。1. 基本写法classPoint{// 成员属性x:number;y:number;// 构造函数new的时候自动执行用来初始化属性constructor(x:number,y:number){this.xx;this.yy;}// 实例方法给对象提供行为手动调用才执行scale(n:number):void{this.x*n;this.y*n;}}// 创建实例constpnewPoint(4,8);// 调用方法p.scale(5);console.log(p);// { x: 20, y: 40 }2. 关键概念拆解constructor构造函数只有在new创建对象时自动执行且仅执行一次专门用来初始化属性。实例方法给创建好的对象提供行为必须手动调用可反复调用。this自动绑定到当前实例指向调用方法的那个对象。3. 访问修饰符TS 提供了 3 个访问修饰符原生控制成员的访问权限public默认哪里都能访问protected只有当前类和它的子类能访问private只有当前类内部能访问还有readonly只读修饰符初始化之后就不能修改。七、其他核心概念1. 类型推论TS 会自动推断变量的类型不用每次都写类型注解。// TS自动推断a是number类型leta10;// TS自动推断add的返回值是number类型functionadd(a:number,b:number){returnab;}2. 类型断言对应 “强制类型转换”用来告诉 TS “我比你更清楚这个变量的类型”。letstr:any123;// 断言str是number类型letnumstrasnumber;注意非必要不要用类型断言避免类型错误。3.any类型any类型的变量可以赋值为任何值TS 不会做任何类型检查。注意尽量不要用any用了就等于放弃了 TS 的类型安全回到了原生 JS。八、学习总结与建议拥抱类型安全不要怕写类型注解写类型注解虽然多敲了几个字但它会帮你在写代码时就揪出 bug大大减少运行时的错误让代码更健壮、更易维护。逐步迁移从简单开始如果你有现有的 JS 项目可以先给几个核心文件加上 TS 类型逐步迁移如果是新项目直接用 TS 写上手会更快。多用工具提升效率用 VS Code 写 TS它的类型提示、自动补全功能非常强大能帮你少写很多代码少犯很多错误。多写多练在实践中巩固学习 TS 最好的方法就是多写代码把学到的概念用到实际项目中在实践中巩固和理解。以上就是我系统学习 TS 后的整理笔记重点放在 TS 本身的概念和用法上希望能帮到所有想学习 TS 的人快速入门。