Giving a fetch response a real type instead of any

My fetch call works fine at runtime, but the response comes back typed as any, so my editor can't suggest a single property on the data.

Beginner to intermediateRead 5 minDoing: under an hour7 steps

▶ Start

What you'll have at the end

A typed interface for the fields your card actually uses, plus a small generic fetch helper that applies it, so your editor autocompletes every property and the compiler flags a typo'd or unhandled field before you run the code.

Before you start

You need

A TypeScript project with strict type checking on, and a working fetch call that already reaches a real JSON endpoint and logs the raw response.

Not covered

Adding a runtime check that verifies every request's shape in production, and handling a response that comes back as an error instead of the data you expected.

Leans on

See what any actually costs you

Watch a typo pass with zero errors
Fetch the real response before typing anything

Give the response a real shape

Write an interface for just those fields
Assert the response, then rerun the typo

Make it reusable, verify it, then use it

Wrap the pattern in one generic helper
Check the interface against live data, twice
Land the type where the UI reads it

Where to go next

Narrow an unknown JSON value before you trust it

For adding a runtime guard that checks the live response's real shape on every request, instead of trusting a compile-time assertion alone.

Model an API response so success and failure can't be confused

For an endpoint whose response splits into a success payload or an error object, rather than one shape you can always assert.

Checked 22 Aug 2026

Part of the TypeScript cookbook