TypeScript - Best Practices

TypeScript ist zum Standard in der JavaScript-Anwendungsentwicklung geworden. Dank statischer Typisierung hilft es, Fehler zur Kompilierzeit zu erkennen, verbessert die Developer Experience und erleichtert die Code-Wartung.

1. Strict Mode verwenden#

Aktivieren Sie immer den Strict Mode in der tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

2. Interface-Typen definieren#

Bevorzugen Sie interface für Objektdefinitionen:

// ✅ Gut
interface User {
  id: string;
  name: string;
  email: string;
}

// ❌ Vermeiden
type User = {
  id: string;
  name: string;
  email: string;
}

3. Type Guards nutzen#

Type Guards ermöglichen TypeScript, Typen einzugrenzen:

function isString(value: unknown): value is string {
  return typeof value === 'string';
}

function processValue(value: string | number) {
  if (isString(value)) {
    // TypeScript weiß, dass value ein String ist
    console.log(value.toUpperCase());
  }
}

4. Any vermeiden#

Der Typ any deaktiviert die Typprüfung. Verwenden Sie stattdessen unknown:

// ❌ Vermeiden
function process(data: any) {
  return data.value;
}

// ✅ Gut
function process(data: unknown) {
  if (typeof data === 'object' && data !== null && 'value' in data) {
    return data.value;
  }
}

5. Utility Types verwenden#

TypeScript bietet viele nützliche Utility Types:

// Partial - alle Felder optional
type UpdateUser = Partial<User>;

// Pick - bestimmte Felder auswählen
type UserPreview = Pick<User, 'id' | 'name'>;

// Omit - ausgewählte Felder weglassen
type UserWithoutEmail = Omit<User, 'email'>;

// Readonly - unveränderliche Felder
type ImmutableUser = Readonly<User>;

6. Rückgabetypen definieren#

Definieren Sie immer Rückgabetypen für Funktionen:

// ✅ Gut
function getUser(id: string): Promise<User> {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

// ❌ Vermeiden
function getUser(id: string) {
  return fetch(`/api/users/${id}`).then(res => res.json());
}

7. Typen in Modulen organisieren#

Halten Sie Typdefinitionen in dedizierten Dateien:

src/
  types/
    user.ts
    product.ts
    api.ts
  components/
  lib/

Zusammenfassung#

TypeScript ist ein leistungsstarkes Werkzeug, das bei richtiger Anwendung die Code-Qualität erheblich verbessert. Durch die Anwendung dieser Praktiken erstellen Sie Code, der:

• Sicherer ist - Fehler werden zur Kompilierzeit erkannt
• Lesbarer ist - Typen als Dokumentation
• Einfacher zu warten ist - Refactoring mit Zuversicht

Bei MDS Software Solutions Group ist TypeScript der Standard in allen unseren Projekten. Kontaktieren Sie uns, um mehr über unsere Dienstleistungen zu erfahren!