TypeScript 中的 Clean Code：实践中的原则与示例

TypeScript 中的 Clean Code：原则与示例

每位开发者都曾遇到过这样的情况：一个月后回看自己写的代码，感觉像是别人写的，难以理解。在 TypeScript 的世界里，强类型带来了优势，Clean Code 原则因此变得尤为重要。整洁的代码不仅仅是美学，更是减少 bug、加速开发、促进团队协作的工具。本文将结合实际示例，解析 TypeScript 中 Clean Code 的关键原则，帮助您编写易于阅读、测试和维护的代码。

1. 命名：让变量说明其用途

开发者首先看到的是变量、函数和类的名称。糟糕的命名会让读者花费时间去猜测。在 TypeScript 的类型系统中，名称应当具有自文档性。

糟糕的示例：

const d = new Date();\nconst arr = [1, 2, 3];\nfunction proc(x: number, y: number) {\n    return x * y;\n}

良好的示例：

const currentDate = new Date();\nconst userScores: number[] = [1, 2, 3];\nfunction calculateArea(width: number, height: number): number {\n    return width * height;\n}

变量使用名词，函数使用动词。避免缩写（除非是通用缩写，如 id 或 url）。TypeScript 允许添加类型，但名称仍需反映其本质。

2. 函数：小巧、纯净且可预测

函数应该只做一件事。如果您无法为函数想出一个简短的名字，那么它很可能做了太多事情。同时，避免副作用也很重要。

函数级别的单一职责原则（SRP）：

// 糟糕：函数一次性完成所有操作\nfunction processUserData(user: User): void {\n    // 验证\n    if (!user.email) throw new Error('Email required');\n    // 保存到数据库\n    database.save(user);\n    // 发送邮件\n    emailService.sendWelcome(user.email);\n}\n\n// 良好：分离职责\nfunction validateUser(user: User): boolean {\n    return user.email !== undefined;\n}\n\nfunction saveUser(user: User): void {\n    database.save(user);\n}\n\nfunction sendWelcomeEmail(email: string): void {\n    emailService.send(email);\n}\n\nfunction processUser(user: User): void {\n    if (!validateUser(user)) {\n        throw new Error('Invalid user data');\n    }\n    saveUser(user);\n    sendWelcomeEmail(user.email);\n}

同时，避免参数过多。如果参数超过两个，请将它们合并为一个对象：

// 糟糕\nfunction createUser(name: string, email: string, age: number, isAdmin: boolean): void {}\n\n// 良好\ninterface CreateUserParams {\n    name: string;\n    email: string;\n    age: number;\n    isAdmin: boolean;\n}\n\nfunction createUser(params: CreateUserParams): void {}

3. 类型化：充分利用 TypeScript 的能力

TypeScript 的主要优势之一是强类型。但许多开发者将 any 作为拐杖，从而丧失了所有好处。TypeScript 中的整洁代码，意味着类型被明确描述，而非猜测。

避免使用 any：

// 糟糕\nfunction getData(): any {\n    return fetch('/api/data');\n}\n\n// 良好\ninterface ApiResponse {\n    id: number;\n    title: string;\n}\n\nasync function getData(): Promise<ApiResponse> {\n    const response = await fetch('/api/data');\n    return response.json();\n}

对复杂状态使用可辨识联合类型：

// 糟糕：对象内容不明确\ntype Status = 'loading' | 'success' | 'error';\n\ninterface State {\n    status: Status;\n    data?: Data;\n    error?: string;\n}\n\n// 良好：每