TypeScript 中的 Clean Code:面向初学者的原则与示例

面向初学者的在线Python训练器

轻松学习Python,无需理论负担。在浏览器中直接解决带自动检查的实践任务,无需安装任何东西。

开始课程

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() };}

博客

书籍推荐