Strict Mode und any vermeiden
Aktivieren Sie alle Strict-Flags in tsconfig, verwenden Sie unknown statt any, setzen Sie Typzusicherungen sicher ein und migrieren Sie eine schwach typisierte Datei zu Strict.
Strict Mode und any vermeiden ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Warum der Strict-Modus?
strict: true in tsconfig.json aktiviert jedes TypeScript-Sicherheits-Flag – den Standard für ernsthafte Projekte. Dadurch werden Fehler mit null, nicht typisierte Parameter und unsichere Zuweisungen bereits zur Compile-Zeit erkannt.
Was strict aktiviert
strict ist ein Meta-Flag, das Folgendes aktiviert: noImplicitAny, strictNullChecks, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, alwaysStrict, noImplicitThis, useUnknownInCatchVariables.
strictNullChecks
Ohne dieses Flag können null und undefined jedem Typ zugewiesen werden – eine ständige Fehlerquelle. Mit dem Flag müssen Sie Fälle mit null ausdrücklich behandeln.
// Without strictNullChecks — runtime error:
function greet(name: string) { return name.toUpperCase(); }
greet(null); // compiler allows, crashes at runtime
// With strictNullChecks:
function greet(name: string | null) {
if (name == null) return '';
return name.toUpperCase();
}noImplicitAny
Parameter ohne Typannotation erhalten ohne dieses Flag standardmäßig den Typ any und umgehen damit stillschweigend das Typsystem. Mit noImplicitAny müssen Sie ihre Typen angeben.
// Without noImplicitAny:
function format(value) { return value.toUpperCase(); } // value: any
// With:
function format(value: string) { return value.toUpperCase(); }strictPropertyInitialization
Klassenfelder ohne garantierte Initialisierung gelten als möglicherweise undefined. Initialisieren Sie sie entweder oder verwenden Sie den Definite-Assignment-Operator !.
class User {
name!: string; // tell TS: I'll set this elsewhere
age = 0; // default initialiser
email: string; // ERROR with strictPropertyInitialization
constructor(email: string) { this.email = email; } // FIX: init in ctor
}Verwenden Sie unknown statt any
any deaktiviert die Typüberprüfung. unknown ist typsicher – Sie müssen den Typ vor der Verwendung eingrenzen. Bevorzugen Sie daher immer unknown.
// any — no checks, bug magnet:
function parse(input: any) {
return input.toUpperCase(); // compiler is fine, runtime may crash
}
// unknown — must narrow:
function parse(input: unknown) {
if (typeof input === 'string') {
return input.toUpperCase();
}
throw new Error('Expected string');
}Typzusicherungen sicher verwenden
Wenn Sie eine Zusicherung benötigen, weil Sie es besser wissen als TS, bevorzugen Sie die Syntax as. Verwenden Sie keine doppelten Zusicherungen (x as unknown as T), es sei denn, es gibt wirklich keine andere Möglichkeit – sie sind ein Code-Smell.
const el = document.getElementById('app') as HTMLDivElement;
el.style.background = 'blue';
// Safer alternative: runtime check
const el = document.getElementById('app');
if (!(el instanceof HTMLDivElement)) throw new Error('app missing');
el.style.background = 'blue'; // narrowed to HTMLDivElementany aus einem Projekt entfernen
Strategie: Aktivieren Sie strict und beheben Sie die daraus entstehenden Fehler Datei für Datei. Verwenden Sie unknown und grenzen Sie den Typ ein. Fügen Sie an bekannten problematischen Stellen @ts-expect-error mit einem TODO-Kommentar ein, damit diese Stellen nicht einfach ignoriert werden können.
Lint-Regel: no-explicit-any
Fügen Sie @typescript-eslint/no-explicit-any zu Ihrer ESLint-Konfiguration hinzu, um das Hinzufügen von neuem any zu verhindern.
// .eslintrc.json
{
"rules": {
"@typescript-eslint/no-explicit-any": "error"
}
}strictFunctionTypes
Erzwingt eine kontravariante Überprüfung von Funktionsparametern. Dadurch wird verhindert, dass Funktionen mit allgemeineren Parametertypen als erwartet zugewiesen werden, was zur Laufzeit zu einem Absturz führen könnte.
Typ der Catch-Variable
useUnknownInCatchVariables sorgt dafür, dass catch (e) e: unknown statt any ableitet. Sie müssen den Typ eingrenzen, bevor Sie auf Eigenschaften zugreifen.
try {
doRisky();
} catch (e) {
// e is unknown
if (e instanceof Error) {
console.error(e.message);
} else {
console.error('Unknown error', e);
}
}Tipps zur Migration
Aktivieren Sie strict bei neuen Projekten von Anfang an. Aktivieren Sie die Flags bei Legacy-Projekten schrittweise. Beginnen Sie mit strictNullChecks, das den größten Nutzen bringt, und fahren Sie dann mit noImplicitAny fort. Verwenden Sie //@ts-expect-error statt //@ts-ignore, damit der Kommentar entfernt wird, sobald das Problem behoben ist.
Kurze Überprüfung
Warum ist unknown sicherer als any, wenn Sie den Typ eines Werts nicht kennen?
Zusammenfassung: Strict-Modus
Aktivieren Sie strict: true für vollständige Typsicherheit. strictNullChecks erzwingt die Behandlung von null. noImplicitAny verlangt Typannotationen für Parameter. strictPropertyInitialization gilt für Klassenfelder. Verwenden Sie unknown statt any und grenzen Sie den Typ mit Type Guards ein. Vermeiden Sie doppelte Zusicherungen. Prüfen Sie mit no-explicit-any per Lint auf any. Migrieren Sie Legacy-Code Datei für Datei und verwenden Sie dabei @ts-expect-error-Markierungen.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 41
- Lektionen
- 163
Häufig gestellte Fragen
Ist die Lektion „Strict Mode und any vermeiden“ kostenlos?
Ja — der vollständige Text von „Strict Mode und any vermeiden“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Strict Mode und any vermeiden“?
Aktivieren Sie alle Strict-Flags in tsconfig, verwenden Sie unknown statt any, setzen Sie Typzusicherungen sicher ein und migrieren Sie eine schwach typisierte Datei zu Strict. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „Strict Mode und any vermeiden“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Template-Literal-Typen
- Dekoratoren und Metadaten
- TypeScript mit React: FC-Generics und Hooks
- Strict Mode und any vermeiden