Why type design patterns matter in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using a union type?

Consider this TypeScript code that uses a union type to accept different shapes of input. What will be logged to the console?

Typescript

type Shape = { kind: 'circle'; radius: number } | { kind: 'square'; side: number };

function area(shape: Shape): number {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'square':
      return shape.side * shape.side;
  }
}

console.log(area({ kind: 'circle', radius: 3 }));

A TypeError at runtime

B 9

C 28.274333882308138

D undefined

💡 Hint

Think about the formula for the area of a circle and how the union type helps the function know which property to use.

The function uses the 'kind' property to determine the shape type. For a circle with radius 3, the area is π * 3^2 = 28.2743 approximately.

🧠 Conceptual

intermediate

Why use type guards in TypeScript?

Which of the following best explains why type guards are important in TypeScript type design patterns?

A They allow the compiler to narrow down types so you can safely access properties specific to a type.

B They automatically convert types at runtime to avoid errors.

C They replace the need for interfaces in complex applications.

D They prevent any type errors by disabling type checking.

💡 Hint

Think about how TypeScript knows which properties exist on a variable when it has multiple possible types.

Type guards help TypeScript understand the exact type of a variable at runtime, so you can safely use properties or methods specific to that type.

🔧 Debug

advanced

What error does this TypeScript code produce?

Look at this TypeScript code snippet using intersection types. What error will the compiler show?

Typescript

type A = { x: number };
type B = { y: string };
type C = A & B;

const obj: C = { x: 10, y: 20 };

A No error, code compiles fine.

B Type 'number' is not assignable to type 'string' for property 'y'.

C Property 'x' is missing in type '{ x: 10, y: 20 }'.

D Type 'string' is not assignable to type 'number' for property 'x'.

💡 Hint

Check the type of property 'y' in the object and in the type definition.

The type B requires 'y' to be a string, but the object assigns a number (20) to 'y', causing a type error.

🚀 Application

advanced

How to design a discriminated union for API responses?

You want to design a TypeScript type for API responses that can be either success or error. Which design pattern below correctly models this with discriminated unions?

A type ApiResponse = { success: boolean; message: string };

B type ApiResponse = { data: string } & { error: string };

C type ApiResponse = { status: string; data?: string; error?: string };

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

💡 Hint

Discriminated unions use a common property with literal types to distinguish variants.

Option D uses a 'status' property with literal types 'success' or 'error' to clearly separate the two response types, enabling safe type narrowing.

❓ Predict Output

expert

What is the output of this TypeScript code using conditional types?

Given this TypeScript code with conditional types, what will be the output when running the code?

Typescript

type IsString<T> = T extends string ? 'yes' : 'no';

function checkType<T>(value: T): IsString<T> {
  return (typeof value === 'string' ? 'yes' : 'no') as IsString<T>;
}

console.log(checkType(123));
console.log(checkType('hello'));

A no\nyes

B yes\nno

C TypeError at runtime

D undefined\nundefined

💡 Hint

Look at how the conditional type IsString works and how the function returns values based on typeof.

The function returns 'no' for number input and 'yes' for string input, matching the conditional type logic.