Literal types and value narrowing in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

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

Consider this TypeScript code snippet that uses literal types and narrowing. What will be logged to the console?

Typescript

function printStatus(status: "success" | "error") {
  if (status === "success") {
    console.log("Operation succeeded");
  } else {
    console.log("Operation failed");
  }
}
printStatus("error");

A Operation succeeded

B Type error at compile time

C No output

D Operation failed

💡 Hint

Check which literal value is passed to the function and how the if condition narrows the type.

The function accepts only two literal strings: 'success' or 'error'. When called with 'error', the else branch runs, logging 'Operation failed'.

❓ Predict Output

intermediate

What is the value of variable 'result' after narrowing?

Given this TypeScript code, what is the value of 'result' after the if statement?

Typescript

type Direction = "left" | "right" | "up" | "down";
let move: Direction = "up";
let result: string;
if (move === "left" || move === "right") {
  result = "horizontal";
} else {
  result = "vertical";
}

A "vertical"

B "horizontal"

C undefined

D Type error

💡 Hint

Check which values are considered horizontal and which are vertical.

Since 'move' is 'up', it matches the else branch, so 'result' is assigned 'vertical'.

🔧 Debug

advanced

What error does this TypeScript code raise?

This code tries to narrow a union of literal types but causes an error. What error is raised?

Typescript

function handleInput(input: "yes" | "no" | "maybe") {
  if (input === "yes") {
    return true;
  } else if (input === "no") {
    return false;
  } else if (input === "perhaps") {
    return null;
  }
}

A TypeScript compile error: 'perhaps' is not assignable to parameter

B TypeError at runtime

C SyntaxError

D No error

💡 Hint

Check the literal values used in the conditions compared to the declared union type.

The union type does not include 'perhaps', so checking for it causes a compile-time error.

❓ Predict Output

advanced

What is the output of this function using literal type narrowing with switch?

Analyze this TypeScript function using a switch statement with literal types. What will it print when called with 'green'?

Typescript

function getColorCode(color: "red" | "green" | "blue") {
  switch (color) {
    case "red":
      return "#FF0000";
    case "green":
      return "#00FF00";
    case "blue":
      return "#0000FF";
  }
}
console.log(getColorCode("green"));

A #0000FF

B #FF0000

C #00FF00

D undefined

💡 Hint

Check the case that matches the input 'green'.

The switch matches 'green' and returns '#00FF00', which is then logged.

🧠 Conceptual

expert

How many possible values can variable 'status' have after narrowing?

Given this TypeScript code, after the if statement, how many possible literal values can 'status' have?

Typescript

type Status = "pending" | "approved" | "rejected";
let status: Status = "pending";
if (status !== "pending") {
  status = "approved";
}

A 0

B 2

C 3

D 1

💡 Hint

Consider the initial value and what the if condition changes it to.

Initially, 'status' is 'pending'. If it is not 'pending', it is set to 'approved'. So after the if, 'status' can be either 'pending' or 'approved'.