Ab hier migrieren wir produktkatalog-app schrittweise zu TypeScript – GENAU wie in "React für Profis" Kapitel 40-43 behandeln die nächsten vier Kapitel AUSSCHLIESSLICH die React-Native-INTEGRATION von TypeScript (Props/Hooks/Navigation/API typisieren), nicht die TypeScript-Sprache selbst – die ist Thema des separaten, eigenständigen TypeScript-Tutorials.

Expo hat TypeScript-Unterstützung bereits eingebaut

Anders als beim reinen Vite-Setup aus "React für Profis" Kapitel 40 (wo tsconfig.json von Hand angelegt werden musste) erkennt Expo TypeScript-Dateien AUTOMATISCH, sobald sie im Projekt auftauchen – der einzige nötige Schritt ist, die passenden Pakete zu installieren:

npx expo install typescript @types/react

tsconfig.json generieren lassen

Benennen Sie App.js in App.tsx um (noch OHNE Typen hinzuzufügen – reines Umbenennen reicht als erster Schritt) und starten Sie die App neu (npx expo start). Expo erkennt die fehlende tsconfig.json automatisch und legt eine BASIS-Version an:

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true
  }
}

"extends": "expo/tsconfig.base" übernimmt Expos eigene, sorgfältig auf React Native abgestimmte Basis-Konfiguration (JSX-Modus, Modul-Auflösung, React-Native-spezifische Typen) – deutlich weniger manuelle Konfiguration als beim reinen Vite-Setup. "strict": true fügen wir selbst hinzu – wie in "React für Profis" Kapitel 40 erklärt, ist das für ein neues Projekt IMMER empfehlenswert.

TypeScript-Fehler prüfen: der eigenständige Check

Anders als bei Vite (wo noEmit: true genügte, weil esbuild die Typprüfung ignoriert) hat Metro (Expos Bundler) KEINE eingebaute Typprüfung – ein TypeScript-Fehler verhindert NICHT automatisch das Starten der App. Prüfen Sie manuell mit:

npx tsc --noEmit

Die erste Datei migrieren: store/cartStore.js

Analog zu "React für Profis" Kapitel 40 beginnen wir mit einer Datei OHNE JSX – store/cartStore.js wird zu cartStore.ts:

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export interface CartItem {
  sku: string;
  name: string;
  price: number;
}

interface CartState {
  cart: CartItem[];
  addProduct: (product: CartItem) => void;
  removeProduct: (sku: string) => void;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      cart: [],

      addProduct(product) {
        set({ cart: [...get().cart, product] });
      },

      removeProduct(sku) {
        set({ cart: get().cart.filter((item) => item.sku !== sku) });
      },
    }),
    {
      name: 'cart-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Das Muster ist ansonsten identisch zu "React für Profis" Kapitel 40/42: export interface CartItem als wiederverwendbarer Typ, den wir in den nächsten Kapiteln in mehreren Dateien importieren werden.