API Integration Examples

API integration combines HTTP status handling, JSON parsing, and runtime validation. TypeScript interfaces cannot guarantee an untrusted server response. For a repeatable demonstration, use a data: URL rather than depending on an internet API.

fetch retrieves JSON from an offline data URL. The response status and each required field are checked before treating the result as Profile.

Using const data = await response.json() as Profile is not runtime validation of the remote payload.

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

type Profile = { id: number; name: string };
function isProfile(value: unknown): value is Profile {
  return typeof value === "object" && value !== null &&
    "id" in value && typeof value.id === "number" &&
    "name" in value && typeof value.name === "string";
}
async function main(): Promise<void> {
  const response = await fetch('data:application/json,%7B%22id%22%3A3%2C%22name%22%3A%22Maya%22%7D');
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  const data: unknown = await response.json();
  if (!isProfile(data)) throw new Error("Bad profile response");
  console.log(`${data.id}: ${data.name}`);
}
main().catch(console.error);

Verified output

3: Maya

Compile: npx tsc --strict --target es2022 --module commonjs api-integration-examples.ts; run: node api-integration-examples.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

fetch retrieves JSON from an offline data URL. The response status and each required field are checked before treating the result as Profile.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Using const data = await response.json() as Profile is not runtime validation of the remote payload.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Add an optional location field and verify its type before displaying it; test an invalid JSON shape.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

fetch retrieves JSON from an offline data URL. The response status and each required field are checked before treating the result as Profile.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.