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

Clean Code in TypeScript: Prinzipien und Beispiele

In der modernen Webentwicklung ist TypeScript zum De-facto-Standard für die Erstellung großer und zuverlässiger Anwendungen geworden. Allerdings garantiert TypeScript allein keine Codequalität. Damit ein Projekt flexibel, verständlich und leicht wartbar bleibt, müssen die Prinzipien von Clean Code befolgt werden. In diesem Artikel werden wir die grundlegenden Konzepte von sauberem Code in TypeScript anhand anschaulicher Beispiele erläutern. Sie erfahren, wie Sie Code schreiben, der nicht nur den Compiler, sondern auch Ihre Kollegen erfreut.

Warum ist Clean Code für TypeScript wichtig?

TypeScript fügt JavaScript eine statische Typisierung hinzu, was bereits hilft, viele Fehler zu vermeiden. Aber Typen sind nur ein Werkzeug. Ohne eine durchdachte Architektur und einen lesbaren Stil wird der Code trotzdem zu "Spaghetti". Clean Code ist eine Philosophie, die Code macht:

• Lesbar – jeder Entwickler versteht schnell die Logik.
• Wartbar – Änderungen an einer Stelle zerstören nicht die gesamte Anwendung.
• Skalierbar – das Hinzufügen neuer Funktionen erfordert kein Umschreiben der Hälfte des Projekts.

Die Anwendung dieser Prinzipien in TypeScript ermöglicht es, die Leistungsfähigkeit des Typsystems voll auszuschöpfen und selbstdokumentierenden Code zu erstellen.

Prinzip 1: Benennung von Variablen und Funktionen

Ein guter Name ist die halbe Miete. Der Name sollte die Fragen "was?" und "warum?" beantworten, nicht "wie?". Vermeiden Sie einbuchstabige Variablen und Abkürzungen, die nur Sie verstehen.

Schlechtes Beispiel:

// Was ist d? Und y?const d = new Date();const y = d.getFullYear();const fn = (a: number, b: number) => a + b;

Gutes Beispiel:

const currentDate = new Date();const currentYear = currentDate.getFullYear();

const sum = (firstNumber: number, secondNumber: number): number => {    return firstNumber + secondNumber;};

Tipp: Verwenden Sie aussagekräftige Namen. Für boolesche Werte verwenden Sie die Präfixe is, has, should. Zum Beispiel: isActive, hasPermission.

Prinzip 2: Funktionen sollten klein sein und eine Sache tun

Eine Funktion sollte nicht für mehrere Aufgaben gleichzeitig verantwortlich sein. Wenn eine Funktion mehr als eine Aktion ausführt, sollte sie aufgeteilt werden. Dies erhöht die Wiederverwendbarkeit und vereinfacht das Testen.

Schlechtes Beispiel (Funktion macht alles auf einmal):

function processUserData(user: any) {    // Validierung    if (!user.email || !user.name) {        throw new Error('Invalid user');    }    // Formatierung    const formattedUser = {        fullName: user.name.toUpperCase(),        emailDomain: user.email.split('@')[1]    };    // Speichern in der DB    database.save(formattedUser);    // E-Mail senden    emailService.sendWelcomeEmail(formattedUser);}

Gutes Beispiel (Aufteilung der Verantwortlichkeiten):

function validateUser(user: User): void {    if (!user.email || !user.name) {        throw new Error('Invalid user data');    }}

function formatUser(user: User): FormattedUser {    return {        fullName: user.name.toUpperCase(),        emailDomain: user.email.split('@')[1]    };}

async function processUserData(user: User): Promise<void> {    validateUser(user);    const formattedUser = formatUser(user);    await database.save(formattedUser);    await emailService.sendWelcomeEmail(formattedUser);}

Jede Funktion hat jetzt ein klares Ziel und sie lassen sich leicht einzeln testen.

Prinzip 3: Verwenden Sie Typen und Interfaces zur Selbstdokumentation

TypeScript bietet leistungsstarke Werkzeuge zur Beschreibung von Daten. Verwenden Sie den Typ any nicht übermäßig – er zerstört den gesamten Nutzen der statischen Typisierung. Definieren Sie ein Interface