Clean Code in TypeScript: Prinzipien und Beispiele für Entwickler

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Sauberer Code in TypeScript: Wie man Code schreibt, den man nicht zu zeigen schämt

Sauberer Code ist nicht nur ein modischer Begriff, sondern ein grundlegender Ansatz in der Entwicklung, der eine chaotische Sammlung von Anweisungen in ein verständliches und wartbares System verwandelt. Für TypeScript, als eine statisch typisierte Sprache, bekommen die Prinzipien des sauberen Codes eine besondere Bedeutung: Strenge Typisierung und leistungsstarke Compiler-Werkzeuge ermöglichen es, Fehler bereits in der Entwicklungsphase zu erkennen, aber nur, wenn der Code richtig strukturiert ist. In diesem Artikel werden wir die wichtigsten Prinzipien des Clean Code in Bezug auf TypeScript aufschlüsseln und sie mit konkreten Beispielen untermauern.

1. Benennung von Variablen, Funktionen und Klassen

Ein Variablen- oder Funktionsname sollte die Frage "Was ist das?" oder "Was tut es?" beantworten. In TypeScript werden Namen durch die Typisierung noch aussagekräftiger. Vermeiden Sie einbuchstabige Namen (außer für Schleifenzähler) und Abkürzungen, die nur Sie verstehen.

// Schlechtconst d = new Date();const fn = (a: number, b: number) => a + b;

// Gutconst currentDate = new Date();const sum = (firstNumber: number, secondNumber: number): number => firstNumber + secondNumber;

Verwenden Sie Nomen für Klassen und Verben oder Verbphrasen für Funktionen. Boolesche Variablen sollten mit is, has, should beginnen.

// Schlechtconst flag = true;function validate() { /* ... */ }

// Gutconst isUserActive = true;function validateEmail(email: string): boolean { /* ... */ }

2. Single-Responsibility-Prinzip (SRP) für Funktionen

Jede Funktion sollte genau eine Sache tun und diese gut machen. Wenn eine Funktion mehrere Aktionen ausführt, teilen Sie sie in kleinere auf. TypeScript ermöglicht es, Eingabe- und Ausgabedaten streng zu typisieren, was das Refactoring erleichtert.

// Schlecht: Die Funktion findet einen Benutzer, prüft das Passwort und sendet eine E-Mailasync function loginUser(email: string, password: string): Promise<void> {    const user = await findUserByEmail(email);    if (user && user.password === password) {        await sendLoginEmail(user.email);        console.log('Login erfolgreich');    }}

// Gut: Getrennte Verantwortlichkeitenasync function findUserByEmail(email: string): Promise<User | null> { /* ... */ }function isPasswordValid(inputPassword: string, storedHash: string): boolean { /* ... */ }async function notifyUserLogin(email: string): Promise<void> { /* ... */ }

async function loginUser(email: string, password: string): Promise<boolean> {    const user = await findUserByEmail(email);    if (!user || !isPasswordValid(password, user.passwordHash)) {        return false;    }    await notifyUserLogin(user.email);    return true;}

3. Verwendung von Typen und Interfaces anstelle von any

Eines der Hauptmerkmale von TypeScript ist sein Typsystem. Vermeiden Sie any um jeden Preis. Wenn der Typ nicht im Voraus bekannt ist, verwenden Sie unknown, Generics oder Union-Typen. Dies macht den Code selbstdokumentierend und schützt vor Fehlern.

// Schlechtfunction getData(id: any): any {    return fetch(`/api/${id}`);}

// Gutinterface ApiResponse<T> {    data: T;    error?: string;}

async function getData<T>(id: string): Promise<ApiResponse<T>> {    const response = await fetch(`/api/${id}`);    return response.json();}

Verwenden Sie strikte Interfaces, um die Struktur von Objekten zu beschreiben. Dies vereinfacht das Refactoring und hilft der IDE, Eigenschaften vorzuschlagen.

interface User {    readonly id: number;    name: string;    email: string;    role: 'admin' | 'user';}

function updateUserName(user: User, newName: string): User {    return { ...user, name: newName };}