Sauberer TypeScript-Code: Regeln, Beispiele und Lifehacks

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

Warum sauberer TypeScript-Code kein Luxus, sondern eine Notwendigkeit ist

Jeder Entwickler kennt die Situation: Man öffnet ein Projekt, das vor ein paar Monaten geschrieben wurde, und versteht nicht, was dort passiert. Variablen heißen a, b, data, Funktionen sind 200 Zeilen lang und Typen werden nur sporadisch vergeben. Kommt Ihnen das bekannt vor?

TypeScript gibt uns ein mächtiges Werkzeug – die statische Typisierung. Aber allein macht es den Code nicht sauber. Man kann auch in TypeScript und jeder anderen Sprache schrecklichen Code schreiben. Sauberer Code ist Disziplin, Stil und Respekt vor sich selbst und den Kollegen.

In diesem Artikel schauen wir uns an, wie man sauberen TypeScript-Code schreibt, der leicht lesbar, wartbar und skalierbar ist. Sie erfahren etwas über die SOLID-Prinzipien, strenge Typisierung, Namensgebung, die Arbeit mit Interfaces und vieles mehr. Los geht's!

1. Namensgebung – das Gesicht Ihres Codes

Die richtige Benennung von Variablen, Funktionen und Klassen macht 50 % des Erfolgs aus. Ein guter Name sollte die Fragen beantworten: "Was ist das?" oder "Was macht diese Funktion?".

Variablen und Konstanten

Verwenden Sie Substantive und camelCase. Vermeiden Sie einbuchstabige Namen (außer in Schleifen).

// Schlechtconst d = new Date();const u = users.find(u => u.id === 5);

// Gutconst currentDate = new Date();const activeUser = users.find(user => user.id === 5);

Funktionen

Funktionsnamen sollten mit einem Verb beginnen. Das macht sofort klar, welche Aktion ausgeführt wird.

// Schlechtfunction data(id: number) { ... }

// Gutfunction fetchUserData(id: number): Promise<UserData> { ... }

Klassen und Interfaces

Klassen – Substantive in PascalCase. Interfaces – ebenfalls, aber oft mit dem Präfix I (obwohl es in der Community Diskussionen gibt). Besser ist es, einfach einen verständlichen Namen ohne Präfix zu vergeben.

// Schlechtinterface IUser {  name: string;}

// Gutinterface User {  name: string;  email: string;}

2. Strenge Typisierung – Ihr bester Freund

TypeScript wurde entwickelt, damit Typen für Sie arbeiten. Verwenden Sie any nicht ohne äußerste Notwendigkeit. Jedes Mal, wenn Sie any schreiben, schalten Sie den Compiler-Schutz aus.

Vermeiden Sie any

// Schlechtfunction process(data: any) {  return data.name;}

// Gutinterface Item {  name: string;  price: number;}

function process(data: Item): string {  return data.name;}

Verwenden Sie Union- und Intersection-Typen

Wenn eine Variable mehrere Typen annehmen kann, verwenden Sie Union (|). Für Kombinationen – Intersection (&).

type Status = 'active' | 'inactive' | 'pending';type AdminUser = User & { role: 'admin' };

Generics – universelle Funktionen

Generics ermöglichen flexiblen Code ohne Verlust der Typisierung.

function firstElement<T>(arr: T[]): T | undefined {  return arr[0];}

const num = firstElement([1, 2, 3]); // numberconst str = firstElement(['a', 'b']); // string

3. SOLID – Prinzipien für Erwachsene

Die SOLID-Prinzipien helfen, eine flexible und wartbare Architektur zu erstellen. Betrachten wir jedes am Beispiel von TypeScript.

Single Responsibility (SRP)

Eine Klasse oder Funktion sollte nur einen Grund für eine Änderung haben.

// Schlecht: Klasse macht allesclass UserService {  createUser() { ... }  sendEmail() { ... }  generateReport() { ... }}

// Gut: Verantwortlichkeiten trennenclass UserCreator { ... }class EmailService { ... }class ReportGenerator { ... }