TypeScript Strict Mode

# Verify types without emitting JS (CI-friendly)
npx tsc --noEmit
 
# Track remaining errors while migrating
npx tsc --noEmit 2>&1 | rg "error TS" | wc -l

// tsconfig.json - Expo SDK 57 baseline
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

// tsconfig.json - production-shaped Expo app
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "verbatimModuleSyntax": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

// package.json scripts
{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "lint": "expo lint"
  }
}

// app/orders/[id].tsx - strictNullChecks + typed route params
import { useEffect, useState } from "react";
import { ActivityIndicator, Text, View, StyleSheet } from "react-native";
import { useLocalSearchParams } from "expo-router";
 
import { fetchOrder, type Order } from "@/lib/api/orders";
 
type OrderParams = {
  id: string;
};
 
function parseOrderParams(raw: Record<string, string | string[] | undefined>): OrderParams {
  const value = raw.id;
  const id = Array.isArray(value) ? value[0] : value;
  if (!id) {
    throw new Error("Missing route param: id");
  }
  return { id };
}
 
export default function OrderDetailScreen() {
  const params = useLocalSearchParams();
  const { id } = parseOrderParams(params);
 
  const [order, setOrder] = useState<Order | null>(null);
  const [error, setError] = useState<string | null>(null);
 
  useEffect(() => {
    let cancelled = false;
 
    fetchOrder(id)
      .then((data) => {
        if (!cancelled) setOrder(data);
      })
      .catch((err: unknown) => {
        if (!cancelled) {
          setError(err instanceof Error ? err.message : "Failed to load order");
        }
      });
 
    return () => {
      cancelled = true;
    };
  }, [id]);
 
  if (error) {
    return (
      <View style={styles.center}>
        <Text style={styles.error}>{error}</Text>
      </View>
    );
  }
 
  if (!order) {
    return (
      <View style={styles.center}>
        <ActivityIndicator />
      </View>
    );
  }
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Order {order.id}</Text>
      <Text>Status: {order.status}</Text>
      <Text>Total: ${(order.totalCents / 100).toFixed(2)}</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16 },
  center: { flex: 1, alignItems: "center", justifyContent: "center" },
  title: { fontSize: 20, fontWeight: "600" },
  error: { color: "#dc2626" },
});

// lib/api/orders.ts - unknown at the boundary, typed after validation
import { z } from "zod";
 
const OrderSchema = z.object({
  id: z.string(),
  totalCents: z.number().int().nonnegative(),
  status: z.enum(["pending", "shipped", "delivered"]),
});
 
export type Order = z.infer<typeof OrderSchema>;
 
export async function fetchOrder(id: string): Promise<Order> {
  const res = await fetch(`https://api.example.com/orders/${id}`);
  if (!res.ok) {
    throw new Error(`HTTP ${res.status}`);
  }
  const json: unknown = await res.json();
  return OrderSchema.parse(json);
}

// components/TagList.tsx - noUncheckedIndexedAccess in action
import { Text, View, StyleSheet } from "react-native";
 
const TAGS = ["mobile", "expo", "typescript"] as const;
 
export function TagList() {
  const first = TAGS[0]; // type: "mobile" | "typescript" | "expo" | undefined
 
  return (
    <View style={styles.row}>
      {first ? <Text style={styles.chip}>{first}</Text> : <Text>No tags</Text>}
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", gap: 8 },
  chip: { paddingHorizontal: 8, paddingVertical: 4, backgroundColor: "#e2e8f0", borderRadius: 6 },
});

// Phase 1 - highest ROI per error fixed (brownfield)
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "allowJs": true,
    "strict": false,
    "strictNullChecks": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

// Phase 2 - flip the umbrella when Phase 1 is clean
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "skipLibCheck": true
  },
  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
}

// Prefer import type for types-only - verbatimModuleSyntax enforces clarity
import type { Order } from "@/lib/api/orders";
import { fetchOrder } from "@/lib/api/orders";
 
// StyleProp<ViewStyle> for components accepting style overrides
import type { StyleProp, ViewStyle } from "react-native";
 
interface CardProps {
  title: string;
  style?: StyleProp<ViewStyle>;
}

// Temporary suppression - prefer @ts-expect-error with a ticket over @ts-ignore
// @ts-expect-error RN-204 - LegacyDeviceModule untyped until bridge wrapper lands
const reading = NativeModules.LegacyDeviceModule.getLastReading();