Häufige Fehler von TypeScript-Anfängern: Von A bis Z

Häufige Fehler von TypeScript-Anfängern: Von A bis Z

TypeScript ist ein mächtiges Werkzeug, das JavaScript um statische Typisierung erweitert und Code vorhersagbarer und sicherer macht. Der Wechsel von JS zu TS ist jedoch oft von typischen Fehlern begleitet, die alle Vorteile der strengen Typisierung zunichtemachen können. In diesem Artikel analysieren wir die häufigsten Fehler von TypeScript-Anfängern – vom übermäßigen Gebrauch von any bis zur falschen Handhabung von null und undefined. Sie erfahren, wie Sie diese vermeiden und sauberen, zuverlässigen Code schreiben.

1. Übermäßiger Gebrauch des Typs any

Der häufigste Fehler von Anfängern ist die Verwendung von any überall dort, wo man „keine Lust zum Nachdenken“ hat. TypeScript wurde für Typen entwickelt, und any deaktiviert die Prüfung vollständig.

// ❌ Schlechtfunction processData(data: any) {  return data.length; // Laufzeitfehler, wenn data eine Zahl ist}

// ✅ Gutfunction processData(data: string | unknown[]) {  return data.length; // TypeScript prüft, dass data eine length-Eigenschaft hat}

Tipp: Verwenden Sie unknown anstelle von any, wenn der Typ wirklich unbekannt ist. Streben Sie immer nach konkreten Typen.

2. Ignorieren von strictNullChecks

Standardmäßig ist strictNullChecks aktiviert, aber viele Anfänger deaktivieren es „der Einfachheit halber“. Dies führt zu Laufzeitfehlern.

// ❌ Schlecht (wenn strictNullChecks: false)let name: string = null; // Funktioniert, verursacht aber später einen Fehler

// ✅ Gutlet name: string | null = null; // Möglichkeit von null explizit angebenif (name !== null) {  console.log(name.toUpperCase());}

Tipp: Deaktivieren Sie strictNullChecks niemals. Verwenden Sie Optional Chaining (?.) und Nullish Coalescing (??) für die sichere Arbeit mit null/undefined.

3. Falsche Verwendung von Array-Typen

Die Verwechslung zwischen Array<T> und T[] ist normal, aber der Hauptfehler ist, den Elementtyp nicht anzugeben.

// ❌ Schlechtlet items = []; // Typ any[]items.push(1);items.push("hello"); // Funktioniert, aber wir verlieren die Kontrolle

// ✅ Gutlet items: number[] = []; // Nur Zahlenlet strings: Array<string> = []; // Alternative Schreibweise

Tipp: Kommentieren Sie den Array-Typ immer, besonders wenn er bei der Deklaration leer ist. Verwenden Sie readonly für Unveränderlichkeit.

4. Falsche Typisierung von Funktionen und Callbacks

Anfänger vergessen oft, Funktionsparameter zu typisieren oder verwenden Function als Typ.

// ❌ Schlechtfunction fetchData(callback: Function) {  callback("data", 123);}fetchData((err: string, data: number) => {}); // Fehler: 2 Argumente erwartet

// ✅ Gutfunction fetchData(callback: (err: string | null, data: number) => void) {  callback(null, 123);}

Tipp: Typisieren Sie Parameter und Rückgabewert explizit. Verwenden Sie für Callbacks Pfeiltypen oder type/interface.

5. Verwechslung von interface und type

Viele verstehen den Unterschied nicht und verwenden sie austauschbar, was zu Fehlern führen kann.

// interface — kann zusammengeführt werden (declaration merging)interface User {  name: string;}interface User {  age: number;} // Funktioniert

// type — kann nicht zusammengeführt werden, aber union/intersection sind möglichtype Status = "active" | "inactive";type Admin = User & { role: "admin" };

Tipp: Verwenden Sie interface für Objekte, die erweitert werden können (z.B. in Bibliotheken). Verwenden Sie type für Union-Typen, Tupel und komplexe Zusammensetzungen.

6. Ignorieren von readonly und const