TypeScript 系统学习指南：从入门到精通

TypeScript 作为 JavaScript 的超集，已经成为现代前端开发的必备技能。本文将为你提供一份系统的 TypeScript 学习大纲，帮助你循序渐进地掌握这门强大的类型化语言。

一、TypeScript 基础篇

1. TypeScript 简介与优势

为什么需要 TypeScript：类型安全、更好的工具支持、代码可维护性
与 JavaScript 的关系：超集特性、编译过程、渐进式采用

开发环境搭建：

bash

复制

npm install -g typescript
tsc --init  # 生成 tsconfig.json

2. 基础类型系统

typescript

复制

// 原始类型
let username: string = "Alice";
let age: number = 25;
let isActive: boolean = true;// 数组与元组
let scores: number[] = [90, 85, 95];
let userInfo: [string, number] = ["Alice", 25];  // 严格长度和类型// 特殊类型
let data: undefined | null = null;
let dynamicValue: any = "可以赋任何值";

3. 类型注解与推断

显式类型注解 vs 类型推断
类型上下文（函数返回值、回调参数等）
最佳通用类型算法

二、TypeScript 核心特性

1. 接口与类型别名

typescript

复制

// 接口定义对象形状
interface User {id: number;name: string;email?: string;  // 可选属性
}// 类型别名
type Point = {x: number;y: number;
};// 扩展接口
interface Admin extends User {privileges: string[];
}

2. 函数类型

typescript

复制

// 函数类型定义
type GreetFunction = (name: string) => string;// 可选参数与默认值
function createUser(name: string, age: number = 18, isVerified?: boolean): User {return { id: Date.now(), name };
}// 函数重载
function reverse(str: string): string;
function reverse<T>(arr: T[]): T[];
function reverse(value: string | any[]): string | any[] {if (typeof value === "string") {return value.split("").reverse().join("");}return [...value].reverse();
}

3. 泛型编程

typescript

复制

// 泛型函数
function identity<T>(arg: T): T {return arg;
}// 泛型约束
interface Lengthwise {length: number;
}function loggingIdentity<T extends Lengthwise>(arg: T): T {console.log(arg.length);return arg;
}// 泛型类
class GenericNumber<T> {zeroValue: T;add: (x: T, y: T) => T;
}

三、TypeScript 高级特性

1. 高级类型

typescript

复制

// 联合类型与类型守卫
type Shape = Circle | Square;function getArea(shape: Shape): number {if ("radius" in shape) {  // 类型守卫return Math.PI * shape.radius ** 2;}return shape.sideLength ** 2;
}// 映射类型
type Readonly<T> = {readonly [P in keyof T]: T[P];
};// 条件类型
type NonNullable<T> = T extends null | undefined ? never : T;

2. 装饰器（实验性特性）

typescript

复制

// 类装饰器
function sealed(constructor: Function) {Object.seal(constructor);Object.seal(constructor.prototype);
}@sealed
class Greeter {greeting: string;constructor(message: string) {this.greeting = message;}
}

3. 模块与命名空间

typescript

复制

// 模块导出
export interface Validator {isValid(s: string): boolean;
}// 命名空间
namespace Validation {export interface StringValidator {isAcceptable(s: string): boolean;}
}

四、TypeScript 工程化实践

1. 配置 tsconfig.json

json

复制

{"compilerOptions": {"target": "ES2020","module": "ESNext","strict": true,"esModuleInterop": true,"skipLibCheck": true,"forceConsistentCasingInFileNames": true},"include": ["src/**/*"],"exclude": ["node_modules"]
}