Clean Code in TypeScript: Prinzipien und Praxisbeispiele

Clean Code in TypeScript: Prinzipien und Praxisbeispiele

Jeder Entwickler kennt die Situation, wenn der eigene Code einen Monat nach dem Schreiben fremd und unverständlich wirkt. In der Welt von TypeScript, wo strenge Typisierung einen Vorteil bietet, werden die Prinzipien von Clean Code besonders wichtig. Sauberer Code ist nicht nur Ästhetik, sondern ein Werkzeug zur Reduzierung von Fehlern, zur Beschleunigung der Entwicklung und zur Erleichterung der Teamarbeit. In diesem Artikel analysieren wir die wichtigsten Prinzipien von Clean Code in TypeScript mit realen Beispielen, die Ihnen helfen, Code zu schreiben, der leicht zu lesen, zu testen und zu warten ist.

1. Benennung: Sagen Sie, was die Variable tut

Das Erste, was ein Entwickler sieht, sind die Namen von Variablen, Funktionen und Klassen. Ein schlechter Name zwingt den Leser, Zeit mit der Entschlüsselung zu verbringen. In TypeScript mit seinem Typsystem sollte der Name selbsterklärend sein.

Schlechtes Beispiel:

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

Gutes Beispiel:

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

Verwenden Sie Substantive für Variablen und Verben für Funktionen. Vermeiden Sie Abkürzungen (außer allgemein üblichen wie id oder url). TypeScript erlaubt das Hinzufügen von Typen, aber der Name sollte trotzdem die Essenz widerspiegeln.

2. Funktionen: Klein, sauber und vorhersagbar

Eine Funktion sollte nur eine Sache tun. Wenn Sie keinen kurzen Namen für eine Funktion finden können, macht sie wahrscheinlich zu viel. Es ist auch wichtig, Nebenwirkungen zu vermeiden.

Prinzip der Einzelverantwortung (SRP) auf Funktionsebene:

// Schlecht: Die Funktion macht alles auf einmal\nfunction processUserData(user: User): void {\n    // Validierung\n    if (!user.email) throw new Error('Email required');\n    // Speichern in der DB\n    database.save(user);\n    // E-Mail senden\n    emailService.sendWelcome(user.email);\n}\n\n// Gut: Verantwortung trennen\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}

Vermeiden Sie auch eine große Anzahl von Parametern. Wenn es mehr als zwei sind, fassen Sie sie in einem Objekt zusammen:

// Schlecht\nfunction createUser(name: string, email: string, age: number, isAdmin: boolean): void {}\n\n// Gut\ninterface CreateUserParams {\n    name: string;\n    email: string;\n    age: number;\n    isAdmin: boolean;\n}\n\nfunction createUser(params: CreateUserParams): void {}

3. Typisierung: Nutzen Sie die Möglichkeiten von TypeScript voll aus

Einer der Hauptvorteile von TypeScript ist die strenge Typisierung. Aber viele Entwickler verwenden any als Krücke und zerstören damit den gesamten Nutzen. Sauberer Code in TypeScript ist Code, bei dem Typen explizit beschrieben und nicht erraten werden.

Vermeiden Sie any:

// Schlecht\nfunction getData(): any {\n    return fetch('/api/data');\n}\n\n// Gut\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}

Verwenden Sie diskriminierte Unions für komplexe Zustände:

// Schlecht: unklar, was im Objekt ist\ntype Status = 'loading' | 'success' | 'error';\n\ninterface State {\n    status: Status;\n    data?: Data;\n    error?: string;\n}\n\n// Gut: jede