Der wichtigste React-Native-spezifische TypeScript-Baustein, der in "React für Profis" keine Entsprechung hat: React Navigations Typisierung. Ohne sie ist route.params in JEDEM Screen einfach any – TypeScript kann bei einem Tippfehler wie route.params.productSk (statt productSku) nicht helfen.

Den zentralen Typ: RootStackParamList

React Navigation erwartet EINEN zentralen Typ, der für JEDEN Screen-Namen beschreibt, WELCHE Parameter er beim Navigieren erwartet (oder undefined, wenn er keine braucht):

export type RootStackParamList = {
  ProductList: undefined;
  ProductDetail: { productSku: string };
  Favorites: undefined;
  Cart: undefined;
};

ProductDetail: {{ productSku: string }} beschreibt GENAU das, was wir bereits aus "React Native für Einsteiger" kennen: navigation.navigate('ProductDetail', {{ productSku: item.sku }}). ProductList: undefined bedeutet: dieser Screen erwartet KEINE Parameter.

ProductDetailScreen.tsx: die Props typisieren

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import type { RootStackParamList } from '../types/navigation';

type Props = NativeStackScreenProps<RootStackParamList, 'ProductDetail'>;

function ProductDetailScreen({ route }: Props) {
  const { productSku } = route.params; // automatisch als string erkannt
  // ...
}

NativeStackScreenProps<RootStackParamList, 'ProductDetail'> – der ZWEITE Typ-Parameter ('ProductDetail') sagt TypeScript, WELCHER Eintrag aus RootStackParamList gilt. route.params ist dadurch automatisch {{ productSku: string }}, route.params.productSk (Tippfehler) würde SOFORT einen Fehler zeigen.

Auch navigate()-Aufrufe werden geprüft

// In ProductListScreen.tsx:
navigation.navigate('ProductDetail', { productSku: item.sku }); // ✓ korrekt
navigation.navigate('ProductDetail', { productSk: item.sku });  // ✗ TypeScript-Fehler
navigation.navigate('ProductDetail');                          // ✗ TypeScript-Fehler: fehlender Parameter
navigation.navigate('Favorites');                              // ✓ korrekt, kein Parameter nötig

App.tsx: den Stack-Navigator mit dem Typ verbinden

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import type { RootStackParamList } from './types/navigation';

const Stack = createNativeStackNavigator<RootStackParamList>();

createNativeStackNavigator<RootStackParamList>() verknüpft ALLE nachfolgenden <Stack.Screen name="...">-Einträge mit unserem zentralen Typ – ein name="ProductDetailx" (Tippfehler im Screen-Namen selbst) würde ebenfalls SOFORT als Fehler erkannt.

magentoApi.ts typisieren

Genau wie in "React für Profis" Kapitel 43 gilt: response.json() liefert IMMER any, der Rückgabetyp einer API-Funktion ist eine Behauptung, keine automatisch geprüfte Garantie.

export interface Product {
  sku: string;
  name: string;
  price: number;
  imageUrl: string;
}

interface MagentoApiItem {
  sku: string;
  name: string;
  price: number;
  image?: string;
}

function mapMagentoProduct(item: MagentoApiItem): Product {
  return {
    sku: item.sku,
    name: item.name,
    price: item.price,
    imageUrl: item.image ?? 'https://picsum.photos/300',
  };
}

export async function fetchProducts(): Promise<Product[]> {
  const response = await fetch('https://api.example.com/products');

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

  const data = await response.json(); // Typ hier: 'any'
  return data.products.map(mapMagentoProduct);
}

export async function fetchProductBySku(sku: string): Promise<Product> {
  const response = await fetch(`https://api.example.com/products/${sku}`);

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

  const data = await response.json();
  return mapMagentoProduct(data);
}

export interface Product wird ab jetzt überall dort importiert, wo ein Produkt verarbeitet wird – ProductCards Props könnten alternativ auch als {{ product: Product }} statt einzelner name/price/imageUrl-Props modelliert werden, eine sinnvolle Aufräum-Übung für Sie.