TypeScript Best Practices: Typsicherheit und Codequalität

Warum TypeScript verwenden?

TypeScript ist ein Superset von JavaScript. Alle JavaScript-Code ist gültiger TypeScript-Code. Fügt statische Typüberprüfung hinzu.

Typsicherheit: Erkennt Typfehler zur Compile-Zeit. Reduziert Runtime-Fehler (undefined is not a function).

Entwicklererfahrung: IDE-Autocomplete, Refactoring, Go-to-Definition funktionieren mit Typinformationen.

Große Projekte: Wenn Codebasis wächst, macht Typüberprüfung Wartung und Refactoring einfacher. Verbessert Teamarbeit.

Typdefinition Best Practices

interface vs type: Verwenden Sie interface für Objektformen. Verwenden Sie type für Union/Intersection Types. interface kann mit extends erweitert werden.

any vermeiden: any deaktiviert Typüberprüfung. Verwenden Sie unknown und führen Sie Typüberprüfung durch: if (typeof x === 'string') { ... }.

Strict Mode: Setzen Sie strict: true in tsconfig.json. Aktiviert Kontrollen wie noImplicitAny, strictNullChecks, strictFunctionTypes.

Typinferenz: Verwenden Sie TypeScripts Typinferenz statt expliziter Typannotation. const name = 'John' (als string inferiert).

Literal Types: Verwenden Sie spezifische Werte statt string oder number: type Status = 'active' | 'inactive' | 'pending'.

Erweiterte Typ-Techniken

Generic Types: Erstellen Sie wiederverwendbare, typsichere Funktionen und Klassen: function identity<T>(arg: T): T { return arg; }.

Conditional Types: Geben Sie verschiedene Typen basierend auf Typbedingungen zurück: type IsString<T> = T extends string ? true : false.

Mapped Types: Transformieren Sie bestehende Typen: type Readonly<T> = { readonly [P in keyof T]: T[P]; }.

Utility Types: Verwenden Sie TypeScripts eingebaute Utility Types: Partial, Required, Pick, Omit, Record, Exclude, Extract.

Template Literal Types: Erstellen Sie typsichere Strings mit String-Manipulation: type EventName = `on${Capitalize<string>}`.

TypeScript mit React

Props-Definition: interface Props { name: string; age?: number; onClick: () => void; }. Verwenden Sie ? für optionale Props.

useState: const [count, setCount] = useState<number>(0);. Typinferenz ist normalerweise ausreichend: useState(0) (als number inferiert).

useRef: const inputRef = useRef<HTMLInputElement>(null);. Verwenden Sie korrekten Typ für DOM-Element-Referenzen.

Event Handlers: Verwenden Sie React Event Types wie React.ChangeEvent<HTMLInputElement>, React.FormEvent<HTMLFormElement>.

Children: Verwenden Sie React.ReactNode (allgemein) oder React.ReactElement (nur Element). Fügen Sie children Prop mit PropsWithChildren hinzu.

Fehlerbehandlung und Debugging

Type Assertions: Typkonvertierung mit as Keyword: const value = input as string. Bevorzugen Sie Type Guards wenn möglich.

Type Guards: Runtime-Typüberprüfung mit typeof, instanceof, in Operator und benutzerdefinierten Type Guard Funktionen.

Non-null Assertion: Geben Sie an, dass Wert nicht null/undefined ist mit ! Operator: element!.value. Nur verwenden, wenn sicher.

tsconfig strictNullChecks: Handhaben Sie null und undefined explizit. Verwenden Sie Optional Chaining (?.) und Nullish Coalescing (??).

ESLint + TypeScript: Fügen Sie zusätzliche Regeln mit @typescript-eslint Plugin hinzu. Aktivieren Sie Regeln wie no-unused-vars, no-explicit-any.

Projektkonfiguration

tsconfig.json: Setzen Sie strict: true, target: 'ES2020', module: 'ESNext', moduleResolution: 'bundler', esModuleInterop: true.

Path Aliases: Kürzen Sie Import-Pfade mit baseUrl und paths: "@/*": ["src/*"]. import { Button } from '@/components/Button'.

Project References: Verwenden Sie Project References für inkrementelle Builds in großen Projekten. Verwenden Sie references Array in tsconfig.json.

Monorepo: Konfigurieren Sie TypeScript Monorepo mit Turborepo oder Nx. Erstellen Sie gemeinsame Pakete für Typen und Utilities.

Declaration Files: Fügen Sie Typdefinitionen zu JavaScript-Bibliotheken mit .d.ts Dateien hinzu. Verwenden Sie @types/* Pakete.