TypeScript 入门到精通：类型系统与实战项目

TypeScript 类型系统基础

TypeScript 的核心是静态类型系统。通过类型注解，可以在编译时捕获潜在的错误。基本类型包括number、string、boolean、array、tuple、enum、any、void等。

let age: number = 25; let name: string = "Alice"; let isActive: boolean = true; let scores: number[] = [90, 85, 95]; let tuple: [string, number] = ["Alice", 25];

接口与类型别名

接口（interface）和类型别名（type）用于定义复杂类型结构。接口更适合扩展和实现，类型别名更适合联合类型和交叉类型。

interface User { id: number; name: string; email?: string; // 可选属性 } type Point = { x: number; y: number; }; function printUser(user: User): void { console.log(`User: ${user.name}, ID: ${user.id}`); }

泛型的使用

泛型（Generics）提供代码复用性，允许在定义函数、类或接口时使用类型参数。

function identity<T>(arg: T): T { return arg; } let output = identity<string>("hello");

类与继承

TypeScript 支持面向对象编程，包括类、继承、访问修饰符（public、private、protected）等。

class Animal { constructor(public name: string) {} move(distance: number = 0) { console.log(`${this.name} moved ${distance}m.`); } } class Dog extends Animal { bark() { console.log("Woof! Woof!"); } } const dog = new Dog("Buddy"); dog.bark(); dog.move(10);

实战项目：用户管理系统

以下是一个简单的用户管理系统的实现，包含类型定义、接口和类。

interface IUser { id: number; name: string; email: string; } class UserManager { private users: IUser[] = []; addUser(user: IUser): void { this.users.push(user); } getUser(id: number): IUser | undefined { return this.users.find(user => user.id === id); } listUsers(): IUser[] { return this.users; } } const manager = new UserManager(); manager.addUser({ id: 1, name: "Alice", email: "alice@example.com" }); manager.addUser({ id: 2, name: "Bob", email: "bob@example.com" }); console.log(manager.listUsers()); console.log(manager.getUser(1));

高级类型与工具类型

TypeScript 提供了多种工具类型（Utility Types），如Partial、Readonly、Pick、Omit等，用于简化类型操作。

type PartialUser = Partial<IUser>; // 所有属性变为可选 type ReadonlyUser = Readonly<IUser>; // 所有属性变为只读 type UserNameAndEmail = Pick<IUser, "name" | "email">; // 选择部分属性 type UserWithoutEmail = Omit<IUser, "email">; // 排除部分属性

异步编程与类型

TypeScript 支持async/await语法，并可以明确指定 Promise 的返回类型。

async function fetchUser(id: number): Promise<IUser> { const response = await fetch(`/api/users/${id}`); const data = await response.json(); return data as IUser; } fetchUser(1).then(user => console.log(user));

类型守卫与类型断言

类型守卫（Type Guards）和类型断言（Type Assertions）用于在运行时检查类型或强制类型转换。

function isUser(obj: any): obj is IUser { return obj && typeof obj.id === "number" && typeof obj.name === "string"; } const data: unknown = { id: 1, name: "Alice" }; if (isUser(data)) { console.log(data.name); } const user = data as IUser; // 类型断言