How to Migrate React to TypeScript (API Module)

Why start with the API layer

The API module is where JS fetch calls return any, where you pass the wrong field to a downstream component, and where TypeScript pays off fastest. Converting it first gives you typed data flowing into the rest of the app.

A plain-JS API module looks like this:

// api.js - no types, fetch returns any
export async function getUser(id) {
  const r = await fetch(`/api/users/${id}`);
  return r.json();
}

The compiler doesn't know what getUser returns, so any caller can read a non-existent field silently. TypeScript catches that at build time.

Define your data type first

A type alias names the shape once. Every function signature and return type references it, so a schema change ripples as a compile error everywhere:

type User = { id: number; name: string; email: string };

Write the typed module

Convert api.js to api.ts with explicit parameter types, Promise<T> return types, and ESM exports:

type User = { id: number; name: string; email: string };

export async function getUser(id: number): Promise<User> {
  const r = await fetch(`/api/users/${id}`);
  return r.json();
}

export async function listUsers(): Promise<User[]> {
  const r = await fetch("/api/users");
  const d = await r.json();
  return d.data;
}

export async function createUser(name: string, email: string): Promise<User> {
  const r = await fetch("/api/users", {
    method: "POST",
    body: JSON.stringify({ name, email }),
  });
  return r.json();
}

Note that listUsers unwraps d.data - the fetch response is a wrapper object, not the array directly. A JS caller would get this silently wrong; the TS return type Promise<User[]> makes the compiler demand a User[], so the unwrap is explicit and required.

Verify with tsc --strict

--strict enables noImplicitAny, strictNullChecks, and several other checks. Run it without emitting files to use it as a pure type-checker:

tsc --strict --noEmit --target es2020 --moduleResolution bundler --module esnext api.ts

Clean output (no errors) means no implicit any has leaked through. If you see an error, TypeScript tells you exactly which parameter or return value is untyped.

What to do after the API module

• Generate types from your backend schema (openapi-typescript, Zod z.infer, Prisma client) so User is derived from the source of truth, not hand-written in the frontend.
• Add tsconfig.json to the project and set "strict": true so every file gets the same checks automatically.
• Migrate component props next: add interface Props to each component and replace React.FC with explicit typed function signatures.