Why patterns matter for safety in Typescript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript code using pattern matching?

Consider this TypeScript code using a match-case style pattern with a discriminated union. What will be printed to the console?

Typescript

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

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

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

A Syntax error: Unexpected token

B "28.27"

C "9.00"

D Runtime error: Property 'radius' does not exist on type 'Shape'

💡 Hint

Think about how the switch statement uses the 'kind' property to select the correct case.

The code uses a discriminated union with a 'kind' property to safely determine the shape type. For a circle with radius 3, the area is π * 3^2 = 28.274..., which is rounded to "28.27" by toFixed(2).

❓ Predict Output

intermediate

What error does this unsafe pattern cause?

What error will this TypeScript code produce when run, considering the unsafe access pattern?

Typescript

type User = { name: string; age?: number };

function getAge(user: User) {
  return user.age!.toFixed(0);
}

console.log(getAge({ name: 'Alice' }));

A TypeError: Cannot read property 'toFixed' of undefined

B undefined

C SyntaxError: Unexpected token '.'

D No error, prints '0'

💡 Hint

Check what happens if 'age' is missing and you try to call a method on it.

The 'age' property is optional and may be undefined. Calling toFixed on undefined causes a runtime TypeError.

🧠 Conceptual

advanced

Why do patterns help prevent runtime errors in TypeScript?

Which statement best explains why using patterns like discriminated unions and exhaustive checks improves safety in TypeScript?

A They allow the compiler to verify all possible cases are handled, preventing unexpected undefined values.

B They remove the need for type annotations entirely.

C They make the code run faster by optimizing loops automatically.

D They allow any type to be assigned without errors.

💡 Hint

Think about how the compiler helps catch missing cases.

Patterns like discriminated unions let TypeScript check that all variants are handled, reducing bugs from unhandled cases and undefined values.

❓ Predict Output

advanced

What is the output of this TypeScript code using pattern guards?

What will this code print to the console?

Typescript

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

function handleResponse(resp: Response) {
  if (resp.status === 'success') {
    return resp.data.toUpperCase();
  } else {
    return resp.message.toLowerCase();
  }
}

console.log(handleResponse({ status: 'error', message: 'NOT FOUND' }));

A Runtime error: Cannot read property 'toLowerCase' of undefined

B "NOT FOUND"

C "not found"

D Syntax error: Missing return statement

💡 Hint

Check which branch runs for status 'error' and what method is called.

The status is 'error', so the else branch runs, returning the message in lowercase: 'not found'.

🧠 Conceptual

expert

How do patterns in TypeScript improve code safety in large applications?

Select the best explanation for how using patterns like discriminated unions, exhaustive checks, and type guards improves safety in large TypeScript codebases.

A They replace the need for unit testing entirely.

B They automatically generate UI components based on types.

C They allow ignoring type errors during compilation for faster builds.

D They enforce strict handling of all possible data shapes, reducing bugs and improving maintainability.

💡 Hint

Think about how patterns help manage complexity and prevent errors.

Patterns enforce that all data variants are handled explicitly, which helps avoid runtime errors and makes the code easier to understand and maintain.