TypeScript: Sprachwesen, strenge Typisierung und React Native

Was ist TypeScript?

TypeScript ist eine Programmiersprache von Microsoft (2012), entwickelt von Anders Hejlsberg (dem Erfinder von C# und Turbo Pascal). TypeScript erweitert JavaScript um ein statisches Typsystem, Interfaces, Generics, Aufzählungen und Dekorateure. TS-Code wird über den tsc-Compiler oder Babel in reines JavaScript (Transpilierung) kompiliert — die Ausgabe ist standardmäßiges JS, das in jeder Umgebung läuft.

Die Motivation für TypeScript sind die Einschränkungen von JavaScript in großen Projekten. Die dynamische Typisierung von JS führt zu Fehlern, die erst zur Laufzeit entdeckt werden: undefined is not a function, Cannot read property of null. TypeScript verlagert die Typprüfung in die Kompilierungszeit und verhindert diese Fehler vor der Codeausführung. Je größer das Projekt, desto größer die Vorteile von TS: In einer Codebasis mit über 100.000 Zeilen verhindert TS hunderte potenzieller Fehler.

Ein wesentliches Merkmal von TypeScript ist die strenge Typisierung mit dem optionalen Flag strict: true in tsconfig.json. Der strenge Modus aktiviert alle Prüfungen: strictNullChecks (null/undefined sind mit anderen Typen inkompatibel), noImplicitAny (verbietet implizites any), strictFunctionTypes (Kontravarianz von Funktionsparametern). Standardmäßig wird strict: true für alle neuen Projekte empfohlen.

TypeScript vs JavaScript

TypeScript unterscheidet sich nur während der Entwicklung von JavaScript. Nach der Kompilierung werden die Typen gelöscht — die Laufzeit führt normales JS ohne Leistungseinbußen aus. Dies ist ein Kompromiss: Die Entwicklung erfordert einen zusätzlichen Kompilierungsschritt, bietet aber IDE-Autovervollständigung, Refactoring mit Symbolumbenennung und Typdokumentation direkt im Code.

TypeScript-Typsystem

Das Typsystem von TypeScript ist strukturell, nicht nominal: Zwei Typen sind kompatibel, wenn ihre Struktur übereinstimmt, unabhängig vom Namen. Dies unterscheidet sich von Java/C#, wo die Kompatibilität durch den Klassen- oder Interface-Namen bestimmt wird. Die strukturelle Typisierung vereinfacht die Integration mit vorhandenem JS-Code — es ist nicht notwendig, implements für jeden Typ zu deklarieren.

Basis- und fortgeschrittene Typen

TypeScript unterstützt die primitiven JS-Typen plus: any (deaktiviert Prüfung), unknown (sicheres any — erfordert Prüfung vor Verwendung), never (gibt nie zurück), void (keine Rückgabe), tuple (Tupel fester Länge), enum (Aufzählung), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Grundlegendes TypeScript-Typsystem
// Primitive Typen
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Union- und Literal-Typen
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — Tupel fester Länge
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — Aufzählung mit Autoinkrement
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — sichere Alternative zu any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Der Typ Platform ist eine Vereinigung von Zeichenfolgenliteralen, die Werte auf drei Optionen beschränkt. Wenn Sie 'windows' übergeben, löst TypeScript einen Fehler aus. Das Coordinate-Tupel garantiert genau zwei Zahlen — nützlich für Koordinaten oder RGB-Farben. Die AppState-Aufzählung wird in ein Objekt mit Rückwärtszuordnung kompiliert. Unknown erzwingt eine Typprüfung vor der Verwendung — im Gegensatz zu any ist unknown standardmäßig sicher.

Interfaces und Type-Aliase

Interfaces und Type-Aliase beschreiben in TypeScript Objektformen. Interfaces unterstützen Deklarations-Merging (erneutes Deklarieren fügt Felder hinzu) und Erweiterung (extends). Type-Aliase können Unions, Intersections, Tupel und bedingte Typen beschreiben, unterstützen aber kein Deklarations-Merging. Regel: Verwenden Sie Interfaces für API-Objekte, Type für alles andere.

// Interfaces und Typen für React Native
// Interface mit optionalen Feldern
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // Optionales Feld
  readonly createdAt: Date; // Schreibgeschützt
}

// Interface-Erweiterung (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Typ für API-Daten
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial macht alle Felder optional
type PartialUser = Partial<User>;

// Pick — wählt angegebene Felder aus
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — Wörterbuch mit typisierten Schlüsseln
type UserMap = Record<string, User>;

Das User-Interface mit ? (optionales Feld) und readonly (schreibgeschützt). ApiResponse<T> ist ein generisches Interface für API-Antworten. Partial<User> ist ein Hilfstyp, der alle Felder optional macht (nützlich für Bearbeitungsformulare). Pick<User, 'id' | 'name'> wählt nur die angegebenen Felder aus — praktisch für Vorschaukomponenten. Record<string, User> ist ein Benutzerwörterbuch nach ID.

Generics und Hilfstypen

Generics sind eine Schlüsselfunktion von TypeScript, die es ermöglicht, Komponenten zu erstellen, die mit jedem Typ arbeiten, ohne die Typsicherheit zu verlieren. Eine generische Funktion wird mit einem Typparameter in spitzen Klammern definiert: function identity<T>(arg: T): T. Der Typ T wird automatisch aus dem Argument abgeleitet oder explizit angegeben: identity<string>('hello').

Hilfstypen sind eingebaute Generics für Typumwandlungen: Partial<T> (alle Felder optional), Required<T> (alle Felder erforderlich), Readonly<T> (alle Felder schreibgeschützt), Pick<T, K> (Felder auswählen), Omit<T, K> (Felder ausschließen), Record<K, T> (Wörterbuch), Exclude<T, U> (aus Union ausschließen), Extract<T, U> (aus Union extrahieren), NonNullable<T> (null/undefined ausschließen).

// Generics in TypeScript
// Generische Funktion für die Arbeit mit API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Verwendung mit einem bestimmten Typ
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Generische Klasse für Zustandsverwaltung
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Typisierte Arbeit mit Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

Die Funktion fetchData<T> ist ein typisierter Wrapper um fetch. Der Parameter T bestimmt die Antwortform: Beim Aufruf von fetchData<Product[]> weiß TypeScript, dass das zurückgegebene Array Product-Objekte enthält. Die Klasse StateManager<S> verwaltet den Zustand jedes Typs — Partial<S> für partielle Aktualisierungen. Action<T, P> ist eine diskriminierte Union für Redux-Aktionen mit automatischer Typeinschränkung in switch.

TypeScript in React Native

TypeScript in React Native bietet strenge Typisierung für Komponenten-Props und State. Das React Native CLI erstellt eine Vorlage mit .tsx-Erweiterung und tsconfig.json. PropTypes (JS) werden durch TypeScript-Interfaces ersetzt — die Prüfung erfolgt zur Kompilierungszeit, nicht zur Laufzeit. styled-components und React Navigation haben vollständige Typunterstützung.

Komponententypisierung

React.FC<Props> ist der Typ für eine funktionale Komponente mit Props. Children werden automatisch typisiert. useRef<T> — Referenz auf eine native Komponente. useState<S> — Zustand mit Typinferenz. useNavigation<T> — typisierte Navigation. useCallback, useMemo — mit automatischer Typinferenz. Alle React-Hooks sind vollständig typisiert.

// Typisierte React Native-Komponente
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Typen für Navigation und Daten
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Interface für Props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Typisierte funktionale Komponente
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

Der Typ RootStackParamList ist ein Wörterbuch von Routen mit ihren Parametern. NavigationProp bietet typisierte Navigation: navigation.navigate('Profile', { userId }) überprüft, dass Profile userId akzeptiert. useCallback mit typisierten Parametern verhindert unnötige Neurenderungen. FlatList wird über Generics typisiert: — data und renderItem erhalten automatisch Typen.

TypeScript-Entwicklerwerkzeuge

TypeScript-Werkzeuge umfassen den tsc-Compiler, tsconfig.json, IDE-Unterstützung in VS Code, ESLint mit @typescript-eslint, Prettier und DefinitelyTyped (@types/*). tsc ist der Compiler, der .ts in .js umwandelt. tsconfig.json konfiguriert: target (ES2020), module (ESNext), strict: true, outDir (Ausgabeordner). sourceMap — TS-Debugging im Browser über Code-Maps.

DefinitelyTyped ist ein Repository mit Typdefinitionen für Bibliotheken ohne eingebaute Typen. Installation: npm install @types/react @types/react-native --save-dev. .d.ts-Dateien sind Typdeklarationen. Moderne Bibliotheken (React, React Native, Angular) enthalten eingebaute Typen und benötigen kein @types/. Für ältere JS-Bibliotheken ist DefinitelyTyped die einzige Typenquelle.

// tsconfig.json — minimale Konfiguration
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // nur prüfen, keine JS-Generierung
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

Die Option strict: true aktiviert alle Typprüfungen — für alle Projekte empfohlen. jsx: 'react-native' bewahrt JSX ohne Transformation (React Native verarbeitet JSX über Babel). moduleResolution: 'node' — Modulauflösung wie in Node.js. esModuleInterop — Kompatibilität mit CommonJS-Modulen. noEmit: true — nur prüfen ohne JS-Dateien zu generieren (Babel oder Metro generiert JS).