Kodokon kodokon.com

Striktes tsconfig: wichtige Optionen und häufige Fehler

Du verstehst, was der Strict-Modus wirklich aktiviert, und weißt, wie du mit den typischen Fehlern umgehst, die er in einem bestehenden Projekt aufdeckt.

11 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

"strict": true ist keine einzelne Option, sondern ein Sammelschalter, der eine ganze Familie von Prüfungen aktiviert: strictNullChecks, noImplicitAny, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, useUnknownInCatchVariables und alwaysStrict. Jede neue TypeScript-Version kann weitere hinzufügen: strict zu aktivieren abonniert dich also für künftige Prüfungen. Jedes Flag lässt sich weiterhin einzeln deaktivieren, was eine schrittweise Migration in einer bestehenden Codebasis ermöglicht.

JSON
{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
    "exactOptionalPropertyTypes": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  }
}
Eine strikte Basis, erweitert um Optionen außerhalb des Sammelschalters (JSON-Datei).

Die zwei wirkungsvollsten Flags sind strictNullChecks und noImplicitAny. Das erste entfernt null und undefined aus allen Typen: Jeder möglicherweise fehlende Wert muss als T | undefined deklariert und vor der Verwendung behandelt werden. Das zweite weigert sich, einen nicht annotierten Parameter auf any zurückfallen zu lassen. Zusammen beseitigen sie die zwei großen Bug-Familien von JavaScript: "cannot read property of undefined" und die Weitergabe ungeprüfter Werte. useUnknownInCatchVariables vervollständigt das Bild: Die Variable in einem catch ist unknown, denn JavaScript erlaubt es, alles Mögliche zu werfen.

TYPESCRIPT
function findPort(
  env: Record<string, string | undefined>
): number {
  const raw = env["PORT"];
  if (raw === undefined) {
    return 3000;
  }
  return Number.parseInt(raw, 10);
}

declare function riskyOperation(): void;

try {
  riskyOperation();
} catch (err) {
  const message =
    err instanceof Error ? err.message : String(err);
  console.error(message);
}
Zwei strikte Muster: Abwesenheit behandelt, catch als unknown.

Häufige Fehler bei der Migration und ihre echten Gegenmittel. "Object is possibly undefined": Bevorzuge eine Verengung (if), Optional Chaining ?. oder einen ??-Standardwert gegenüber der Non-Null-Assertion !, die den Absturz nur woandershin verschiebt. "Property has no initializer" (strictPropertyInitialization): Initialisiere im Konstruktor, statt zum ! auf dem Feld zu greifen. Achte außerdem auf die Falle ?? gegenüber ||: port || 3000 ersetzt auch 0 und "", während port ?? 3000 nur null und undefined ersetzt.

TYPESCRIPT
interface Settings { retries?: number }

function resolveRetries(s: Settings): number {
  const bad = s.retries || 3;
  const good = s.retries ?? 3;
  return good;
}

const names = ["Ada", "Linus"];
const first = names[0];
const upper = first?.toUpperCase() ?? "N/A";
retries: 0 ergibt bad = 3, aber good = 0; der Indexzugriff kommt gleich danach.

Über den Sammelschalter hinaus verdienen drei Optionen eine Diskussion im Team. noUncheckedIndexedAccess fügt jedem indizierten Zugriff (arr[i], dict[key]) undefined hinzu: sicherer, aber wortreich in Code, der viel mit Arrays arbeitet - viele Teams übernehmen es nur in neuen Projekten. exactOptionalPropertyTypes unterscheidet "Eigenschaft fehlt" von "Eigenschaft auf undefined gesetzt", entscheidend für Patches. skipLibCheck überspringt die Prüfung der .d.ts-Dateien deiner Abhängigkeiten: ein bewusster Kompromiss zwischen Build-Zeit und dem Erkennen von Konflikten zwischen Bibliotheken.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Was genau bewirkt "strict": true in der tsconfig.json?
    • Es aktiviert nur die Option strictNullChecks
    • Es aktiviert eine Reihe strikter Flags, von denen sich jedes weiterhin einzeln deaktivieren lässt
    • Es verbietet jede Verwendung des Typs any, auch die explizite
    • Es erzwingt die Kompilierung im ES5-Modus
  2. Wenn retries?: number den Wert 0 hat, was ist der Unterschied zwischen retries || 3 und retries ?? 3?
    • Keiner, beide geben 0 zurück
    • || gibt 3 zurück, weil 0 falsy ist; ?? gibt 0 zurück, weil es nur null und undefined ersetzt
    • ?? gibt 3 zurück, weil 0 als abwesend gilt
  3. Warum ist // @ts-expect-error besser als // @ts-ignore, um Typisierungsschuld zu markieren?
    • @ts-expect-error unterdrückt mehrere Fehler auf einmal
    • @ts-ignore funktioniert im Strict-Modus nicht
    • @ts-expect-error wird selbst zum Fehler, sobald das Problem behoben ist, die Schuld räumt sich also selbst auf