TypeScript 完整入门教程

一、环境搭建1. 安装 TypeScript# 全局安装 npm install -g typescript # 查看版本验证安装 tsc -v2. 运行 TS 文件创建demo.ts写入代码编译 TS 生成 JStsc demo.ts会生成demo.js用 node 运行node demo.js3. 自动编译开发必备tsc demo.ts --watch文件保存自动重新编译。4. 项目配置 tsconfig.json根目录执行生成配置文件tsc --init常用配置json{ compilerOptions: { target: ES6, // 编译后的JS版本 module: CommonJS, outDir: ./dist, // 输出目录 rootDir: ./src, // 源码目录 strict: true, // 开启严格类型检查必开 esModuleInterop: true }, include: [src/**/*], exclude: [node_modules] }二、基础数据类型1. 原始类型typescript// 字符串 let str: string TypeScript; // 数字 let num: number 99; let float: number 3.14; // 布尔值 let flag: boolean true; // null / undefined let n: null null; let u: undefined undefined;2. 数组typescript// 写法1类型[] let arr1: number[] [1, 2, 3]; // 写法2泛型 Array类型 let arr2: Arraystring [a, b];3. 元组 Tuple固定长度、固定类型的数组typescriptlet tuple: [string, number] [张三, 20]; tuple[0] 李四;4. any / unknownany关闭类型检查不推荐滥用typescriptlet data: any 123; data 文字; data.foo(); // 不会报错运行时可能崩溃unknown安全的任意类型使用前必须类型判断typescriptlet val: unknown hello; if (typeof val string) { console.log(val.length); }5. void / nevervoid无返回值typescriptfunction log(): void { console.log(日志); }never永远不会正常返回报错 / 死循环typescriptfunction error(): never { throw new Error(程序异常); }三、类型进阶1. 联合类型 |一个变量支持多种类型typescriptlet id: number | string; id 100; id 1001; // 字面量联合限定固定值 type Status success | fail | loading; let res: Status success;2. 交叉类型 合并多个类型同时满足所有规则typescripttype A { name: string }; type B { age: number }; type User A B; const u: User { name: 小明, age: 18 };3. 类型别名 type复用自定义类型typescripttype NumStr number | string; let a: NumStr 66;4. 接口 interface约束对象结构可继承、可扩展typescriptinterface User { id: number; name: string; age?: number; // 可选属性 readonly createTime: number; // 只读属性 } const user: User { id: 1, name: 小红, createTime: Date.now() };接口继承typescriptinterface Person { name: string; } interface Student extends Person { studentId: number; }5. 枚举 Enum固定一组常量提高可读性typescriptenum Color { Red, // 默认 0 Green, // 1 Blue // 2 } let c: Color Color.Red; // 自定义数值 enum Status { Off 0, On 1 }四、函数类型1. 基础函数类型标注typescript// 参数类型 返回值类型 function add(a: number, b: number): number { return a b; } // 箭头函数 const sub (a: number, b: number): number a - b;2. 可选参数 / 默认参数typescript// 可选参数 function sayHi(name?: string) { console.log(name || 游客); } // 默认参数 function logNum(n: number 0) { console.log(n); }3. 剩余参数typescriptfunction sum(base: number, ...nums: number[]): number { return base nums.reduce((a, b) a b, 0); } sum(10, 1, 2, 3);4. 函数类型别名typescripttype CalcFunc (x: number, y: number) number; const multiply: CalcFunc (a, b) a * b;五、泛型 Generic泛型实现类型复用组件、工具函数适配任意类型1. 基础泛型函数typescript// T 代表任意类型 function getFirstT(arr: T[]): T { return arr[0]; } // 调用自动推导类型 getFirst([1, 2, 3]); getFirst([a, b]);2. 泛型约束 extends限制泛型必须包含指定属性typescriptinterface HasName { name: string; } function printNameT extends HasName(obj: T) { console.log(obj.name); } printName({ name: 小王, age: 22 });3. 泛型接口typescriptinterface ResponseT { code: number; data: T; } // 用户接口返回 type UserItem { id: number; name: string }; const res: ResponseUserItem { code: 200, data: { id: 1, name: 张三 } };六、类 Class面向对象1. 基础类 访问修饰符typescriptclass Person { // public 公开默认 public name: string; // private 私有外部无法访问 private age: number; // protected 保护子类可访问外部不行 protected gender: string; constructor(name: string, age: number, gender: string) { this.name name; this.age age; this.gender gender; } say(): void { console.log(我是${this.name}${this.age}岁); } } const p new Person(小李, 25, 男); p.say();2. 类继承 extendstypescriptclass Student extends Person { studentId: number; constructor(name: string, age: number, gender: string, id: number) { super(name, age, gender); // 调用父类构造器 this.studentId id; } study() { console.log(${this.name}正在学习); } }七、常用实用语法1. 类型断言 as手动指定变量类型typescriptlet strVal: unknown hello ts; let len: number (strVal as string).length;2. 可选链操作符.防止对象不存在属性报错typescriptinterface User { info?: { address?: string } } const user: User {}; console.log(user.info?.address);3. 空值合并只有 null /undefined 才取默认值typescriptlet num: number | null null; let val num ?? 0;八、拓展方向后续学习类型体操高级工具类型Partial、Required、Readonly、Pick、OmitVue3 TS组合式 API、组件 props 类型、defineProps/defineEmitsReact TS组件 Props、useState、useEffect、事件类型Node.js TS接口服务、Express/Koa 类型封装