Top Fehler von TypeScript-Anfängern: von A bis Z

Top Fehler von TypeScript-Anfängern: von A bis Z

TypeScript ist ein leistungsstarkes Werkzeug, das hilft, zuverlässigeren und vorhersagbareren Code zu schreiben. Am Anfang machen jedoch viele Entwickler (besonders diejenigen, die von JavaScript kommen) typische Fehler. In diesem Artikel analysieren wir die 10 häufigsten Probleme, auf die Anfänger stoßen, und zeigen, wie man sie vermeidet. Tauchen wir ein in die Welt von TypeScript von A bis Z.

1. Übermäßige Verwendung von any

Dies ist wohl der häufigste Fehler. Wenn der Entwickler nicht weiß, welchen Datentyp er erwarten soll, schreibt er any. Das zerstört das ganze Wesen von TypeScript – die statische Typisierung. Sie verlieren Editor-Hinweise und den Schutz vor Fehlern während der Kompilierung.

Schlechtes Beispiel:

function processData(data: any) {\n    return data.name.toLowerCase(); // Fehler erscheint erst zur Laufzeit\n}\n

Wie beheben: Verwenden Sie spezifischere Typen, unknown oder Generics.

function processData(data: { name: string }) {\n    return data.name.toLowerCase(); // TypeScript prüft dies zur Kompilierzeit\n}\n

Wenn der Typ wirklich unbekannt ist, verwenden Sie unknown – es zwingt Sie, die Daten vor der Verwendung zu überprüfen.

2. Ignorieren des Strict-Modus

Viele Anfänger deaktivieren strict: true in der tsconfig.json, um "unnötige Fehler zu vermeiden". Das ist ein großer Fehler. Ohne den Strict-Modus verlieren Sie die Prüfung auf null und undefined, was in der Produktion zu Cannot read property of undefined führt.

// Ohne strict: true – kein Fehler\nconst name: string = null; // Funktioniert, stürzt aber später ab\n\n// Mit strict: true – Kompilierungsfehler\nconst name: string = null; // ❌ Type 'null' is not assignable to type 'string'\n

Tipp: Aktivieren Sie immer strict: true. Das erspart Ihnen hunderte von Bugs.

3. Falsche Verwendung von Typen und Schnittstellen

Anfänger verwechseln oft type und interface und verwenden sie dort, wo es nicht nötig ist. Zum Beispiel erstellen sie eine Schnittstelle für eine einzelne Funktion, obwohl man den Typ direkt im Parameter beschreiben könnte.

Schlechtes Beispiel:

interface UserData {\n    name: string;\n    age: number;\n}\nfunction greet(user: UserData) {\n    console.log(`Hallo, ${user.name}`);\n}\n

Das ist überflüssig, wenn die Schnittstelle nur einmal verwendet wird.

Besser so:

function greet(user: { name: string; age: number }) {\n    console.log(`Hallo, ${user.name}`);\n}\n

Verwenden Sie interface für Objekte, die erweitert oder von Klassen implementiert werden, und type für Vereinigungen (union) und Schnittmengen (intersection).

4. Vergessen von Union-Typen

Eine der mächtigsten Funktionen von TypeScript sind Typvereinigungen. Anfänger schreiben oft redundante Prüfungen oder verwenden any, wenn man einfach mehrere zulässige Typen angeben könnte.

// Schlecht\nfunction getLength(value: any) {\n    return value.length;\n}\n\n// Gut\nfunction getLength(value: string | any[]) {\n    return value.length;\n}\n

TypeScript zeigt selbst an, welche Methoden für jeden der Typen in der Vereinigung verfügbar sind.

5. Fehler mit null und undefined

TypeScript behandelt null und undefined streng, aber Anfänger vergessen oft, sie zu überprüfen. Das führt zu Laufzeitfehlern.

function printName(name: string | null) {\n    console.log(name.toUpperCase()); // ❌ Object is possibly 'null'\n}\n

Wie beheben: Verwenden Sie Schutzprüfungen (type guards):

function printName(name: stri