Control flow analysis behavior in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Control flow narrowing with type guards

What is the output of this TypeScript code when calling processValue(42)?

Typescript

function processValue(value: string | number) {
  if (typeof value === 'string') {
    return value.toUpperCase();
  } else {
    return value.toFixed(2);
  }
}

console.log(processValue(42));

A "42.0"

B "42"

C "42.00"

D TypeError at runtime

💡 Hint

Think about how TypeScript narrows the type inside the if-else blocks.

The function narrows the type of 'value' using 'typeof'. For a number input, it calls 'toFixed(2)', which formats the number with two decimals, returning the string "42.00".

❓ Predict Output

intermediate

Control flow with union types and null checks

What will be logged when running this TypeScript code?

Typescript

function greet(name: string | null) {
  if (name) {
    console.log(`Hello, ${name.toUpperCase()}!`);
  } else {
    console.log("Hello, guest!");
  }
}

greet(null);

A Hello, null!

B Hello, NULL!

C TypeError: Cannot read property 'toUpperCase' of null

D Hello, guest!

💡 Hint

Check how the if condition treats null values.

The if condition treats null as falsy, so the else branch runs, logging "Hello, guest!".

❓ Predict Output

advanced

Control flow with discriminated unions and exhaustive checks

What is the output of this TypeScript code?

Typescript

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

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

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

A 28.274333882308138

B 9

C undefined

D TypeError at runtime

💡 Hint

Recall the formula for the area of a circle and how discriminated unions work.

The function calculates the area of a circle with radius 3 using πr², which is approximately 28.2743.

❓ Predict Output

advanced

Control flow with type narrowing and assignment

What will be the value of result after running this TypeScript code?

Typescript

let input: string | number = "hello";

if (typeof input === "string") {
  input = input.length;
}

const result = input;

A TypeError at runtime

B 5

C "hello"

D undefined

💡 Hint

Check how the variable 'input' is reassigned inside the if block.

Initially, 'input' is a string. Inside the if block, it is reassigned to the string's length (a number). So 'result' is 5.

❓ Predict Output

expert

Control flow with type predicates and custom type guards

What is the output of this TypeScript code?

Typescript

interface Fish {
  swim(): void;
}

interface Bird {
  fly(): void;
}

function isFish(pet: Fish | Bird): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
  if (isFish(pet)) {
    return "Fish swims";
  } else {
    return "Bird flies";
  }
}

console.log(move({ fly() { console.log('flying'); } }));

A "Bird flies"

B "Fish swims"

C TypeError at runtime

D undefined

💡 Hint

Understand how the custom type guard function works.

The object has a 'fly' method but no 'swim' method, so 'isFish' returns false, and the else branch returns "Bird flies".