Type-safe API response handling in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code with type guards?

Consider this TypeScript code that fetches user data and uses a type guard to check the response type. What will be logged to the console?

Typescript

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

type ApiResponse = { status: 'success'; data: User } | { status: 'error'; message: string };

function isSuccess(response: ApiResponse): response is { status: 'success'; data: User } {
  return response.status === 'success';
}

const response: ApiResponse = { status: 'success', data: { id: 1, name: 'Alice' } };

if (isSuccess(response)) {
  console.log(`User name: ${response.data.name}`);
} else {
  console.log(`Error: ${response.message}`);
}

A Error: undefined

B TypeError at runtime

C User name: Alice

D User name: undefined

💡 Hint

Look at how the isSuccess function narrows the type of response.

The isSuccess function is a type guard that checks if response.status is 'success'. If true, TypeScript knows response has a data property with user info. So, response.data.name is 'Alice'.

🧠 Conceptual

intermediate

Which TypeScript feature ensures safe access to nested API response data?

You receive a nested API response object that may or may not have certain properties. Which TypeScript feature helps you safely access these nested properties without runtime errors?

A Type casting with angle brackets (<>)

B Non-null assertion operator (!)

C Type assertion (as keyword)

D Optional chaining operator (?.)

💡 Hint

Think about a way to safely check if a property exists before accessing it.

The optional chaining operator ?. allows you to safely access nested properties. If any part is null or undefined, it returns undefined instead of throwing an error.

🔧 Debug

advanced

What error does this TypeScript code produce when handling API response?

Examine the following code snippet. What error will TypeScript report?

Typescript

interface ApiResponse {
  status: 'ok' | 'fail';
  data?: { id: number; value: string };
  error?: string;
}

function handleResponse(response: ApiResponse) {
  if (response.status === 'ok') {
    console.log(response.data.value.toUpperCase());
  } else {
    console.error(response.error.toUpperCase());
  }
}

A Type 'string' is not assignable to type 'number' error

B Object is possibly 'undefined' error on 'response.data.value'

C No error, code compiles fine

D Property 'toUpperCase' does not exist on type 'number'

💡 Hint

Check if response.data is always defined when status is 'ok'.

The data property is optional. Even if status is 'ok', data might be undefined. Accessing response.data.value without checking causes a possible undefined error.

🚀 Application

advanced

Which code snippet correctly parses and type-checks a JSON API response?

You receive a JSON string from an API. You want to parse it and ensure it matches the ApiResponse type safely. Which snippet correctly does this with type safety?

Typescript

type ApiResponse = { status: 'success'; data: { id: number; name: string } } | { status: 'error'; message: string };

const json = '{"status":"success","data":{"id":10,"name":"Bob"}}';

A

const response = JSON.parse(json);
if (response.status === 'success' && typeof response.data?.id === 'number') {
  // safe to use response.data
}

B const response = JSON.parse(json) as ApiResponse;

C const response: ApiResponse = JSON.parse(json);

D

const response = JSON.parse(json);
console.log(response.data.name);

💡 Hint

Parsing JSON returns any. How do you check the shape before using it?

Option A parses JSON and then checks properties manually before using them. This avoids unsafe assumptions. Options A and B trust the JSON blindly, which is unsafe. Option A accesses nested data without checks, risking runtime errors.

❓ Predict Output

expert

What is the output of this TypeScript discriminated union handling code?

Given this TypeScript code that handles a discriminated union API response, what will be printed?

Typescript

type ApiResponse =
  | { type: 'text'; content: string }
  | { type: 'image'; url: string; alt: string };

function render(response: ApiResponse) {
  switch (response.type) {
    case 'text':
      return `Text: ${response.content}`;
    case 'image':
      return `Image: ${response.url} (alt: ${response.alt})`;
  }
}

const result = render({ type: 'image', url: 'http://img.com/pic.jpg', alt: 'A picture' });
console.log(result);

A Image: http://img.com/pic.jpg (alt: A picture)

B Text: undefined

C Image: undefined (alt: undefined)

D Runtime error: Property 'content' does not exist

💡 Hint

Check how the switch uses the discriminated union type property.

The render function uses response.type to narrow the union. For type === 'image', it accesses url and alt safely. So the output is the formatted string with those values.