TypeScript 中的 Clean Code:面向初学者的原则与示例
整洁代码(Clean Code)不仅仅是一个时髦的术语,更是一种开发哲学,它有助于编写其他开发者(以及半年后的您自己)都能理解的程序。对于 TypeScript 的初学者来说,掌握整洁代码的原则是迈向专业成长的关键一步。在本文中,我们将解析基本规则,提供直观的示例,并展示如何让您的 TypeScript 代码变得优雅且易于维护。
为什么整洁代码很重要?
想象一下,您正在读一本书,书中没有段落、没有标点符号,所有单词都连在一起。对于其他开发者来说,混乱的代码大致就是这种感觉。整洁代码可以节省调试时间,简化新功能的添加,并减少 Bug 的数量。TypeScript 凭借其严格的类型系统已经有助于编写更可靠的代码,但如果不遵循整洁原则,即使是类型化的代码也可能变得难以阅读。
// 糟糕:难以阅读function d(a:any,b:any){if(a>b){return a}else{return b}}
// 良好:整洁且清晰function findMaxValue(firstNumber: number, secondNumber: number): number { if (firstNumber > secondNumber) { return firstNumber; } return secondNumber;}TypeScript 中 Clean Code 的核心原则
1. 有意义的变量和函数命名
名称应能回答“是什么?”和“为什么?”的问题。避免使用单个字母的缩写(循环索引除外)和抽象的名称。变量使用 camelCase,类使用 PascalCase。
// 糟糕const d = new Date();const arr = [1, 2, 3];function p(x: number) { return x * 2; }
// 良好const currentDate = new Date();const numbersList: number[] = [1, 2, 3];function doubleValue(value: number): number { return value * 2;}2. 函数只做一件事
每个函数应只解决一个任务。如果一个函数做了多件事,请将其拆分为多个小函数。这能提高可读性和可测试性。
// 糟糕:一个函数包揽所有function processUserData(userData: string): void { const parsed = JSON.parse(userData); const isValid = parsed.name && parsed.email; if (isValid) { console.log(`User ${parsed.name} registered`); saveToDatabase(parsed); }}
// 良好:每个函数各司其职function parseUserData(rawData: string): User { return JSON.parse(rawData);}
function validateUserData(user: User): boolean { return !!user.name && !!user.email;}
function registerUser(userData: string): void { const user = parseUserData(userData); if (validateUserData(user)) { console.log(`User ${user.name} registered`); saveToDatabase(user); }}3. 避免魔法数字和字符串
魔法数字是指那些脱离上下文就无法理解其含义的字面量。请将它们提取为具有明确名称的常量。
// 糟糕if (user.age > 18) { // ...}const discount = price * 0.1;
// 良好const ADULT_AGE = 18;const STANDARD_DISCOUNT_RATE = 0.1;
if (user.age > ADULT_AGE) { // ...}const discount = price * STANDARD_DISCOUNT_RATE;4. 正确使用类型和接口
TypeScript 提供了强大的数据描述工具。不要滥用 any,优先使用具体类型。为复杂对象创建接口。
// 糟糕function createUser(name: any, age: any) { return { name, age, createdAt: new Date() };}
// 良好interface User { name: string; age: number; createdAt: Date;}
function createUser(name: string, age: number): User { return { name, age, createdAt: new Date() };}
博客
书籍推荐
推荐阅读