Top-Fehler von TypeScript-Anfängern

Die häufigsten Fehler von TypeScript-Anfängern

TypeScript ist ein leistungsstarkes Werkzeug, das hilft, zuverlässigeren und wartbareren Code zu schreiben. Wie jede Sprache birgt es jedoch Tücken, besonders für Anfänger. Viele Entwickler kommen von JavaScript und behalten alte Gewohnheiten bei, wodurch die Vorteile der statischen Typisierung zunichte gemacht werden. In diesem Artikel analysieren wir die 4 häufigsten Fehler von TypeScript-Anfängern, zeigen, wie man sie behebt, und geben praktische Ratschläge. Wenn Sie gerade erst mit TypeScript beginnen, hilft Ihnen dieser Artikel, typische Fallstricke zu vermeiden.

1. Übermäßige Verwendung des Typs any

Der häufigste Fehler ist die Verwendung von any überall dort, wo TypeScript den Typ nicht automatisch ableiten kann. Anfänger schreiben oft so:

function processData(data: any) {    console.log(data.name.toUpperCase());}

Dies deaktiviert die Typüberprüfung für die Variable data vollständig. Sie verlieren alle Vorteile von TypeScript: Autovervollständigung, Fehlerprüfung und Code-Dokumentation.

Was stattdessen tun?

Versuchen Sie immer, den Typ explizit zu beschreiben, selbst wenn er komplex ist. Verwenden Sie unknown, wenn der Typ zum Zeitpunkt der Code-Erstellung wirklich unbekannt ist:

function processData(data: unknown) {    if (typeof data === 'object' && data !== null && 'name' in data) {        console.log((data as { name: string }).name.toUpperCase());    }}

Oder noch besser, beschreiben Sie ein Interface:

interface DataItem {    name: string;    age?: number;}

function processData(data: DataItem) {    console.log(data.name.toUpperCase());}

Tipp: Setzen Sie noImplicitAny: true in tsconfig.json. Der Compiler wird sich über jedes implizite any beschweren, und Sie gewöhnen sich daran, Typen zu schreiben.

2. Ignorieren von strictNullChecks

In JavaScript sind null und undefined normale Werte. In TypeScript ohne strenge Überprüfungen könnten Sie versehentlich auf eine Eigenschaft von null zugreifen und einen Laufzeitfehler erhalten. Ein typischer Fehler:

function getLength(str: string | null) {    return str.length; // Error: Object is possibly 'null'}

Wenn strictNullChecks deaktiviert ist, warnt TypeScript Sie nicht, und der Fehler erscheint erst zur Laufzeit.

Lösung: Aktivieren Sie strict: true in tsconfig.json. Dies aktiviert automatisch strictNullChecks. Jetzt zwingt TypeScript Sie, null und undefined zu behandeln:

function getLength(str: string | null): number {    if (str === null) {        return 0;    }    return str.length;}

// Oder verwenden Sie optionale Verkettung und Nullish Coalescing:function getLengthSafe(str: string | null): number {    return str?.length ?? 0;}

Wichtig: Deaktivieren Sie strictNullChecks niemals. Dies ist eine der Hauptfunktionen von TypeScript, die Millionen von Fehlern verhindert.

3. Fehlerhafter Umgang mit async/await und Promises

TypeScript typisiert asynchrone Funktionen streng, aber Anfänger vergessen oft den Rückgabetyp Promise. Beispiel für einen Fehler:

async function fetchUser(id: number) {    const response = await fetch(`/api/users/${id}`);    return response.json(); // TypeScript might not know the exact type}

Hier gibt response.json() ein Promise<any> zurück, und Sie verlieren wieder die Typisierung. Ein zweites häufiges Problem ist das Vergessen der Fehlerbehandlung:

async function loadData() {    const data = await fetchUser(1); // If fetch fails, the error is unhandled    console.log(data.name);}

Wie macht man es richtig?

Geben Sie immer explizit an