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'.

Practice

1. What does a literal type in TypeScript allow you to do?

easy

A. Specify exact allowed values for a variable

B. Create a new class

C. Define a function return type as any

D. Ignore type checking

Solution

1. Step 1: Understand the purpose of literal types

   Literal types let you restrict a variable to exact values like 'yes' or 10 instead of general types like string or number.

2. Step 2: Compare options with the definition

   Only Specify exact allowed values for a variable correctly describes this feature; others describe unrelated concepts.

3. Final Answer:

   Specify exact allowed values for a variable -> Option A

4. Quick Check:

   Literal types = exact allowed values [OK]

Hint: Literal types fix variable values exactly [OK]

Common Mistakes:

• Confusing literal types with classes
• Thinking literal types disable type checking
• Assuming literal types allow any value

2. Which of the following is the correct way to declare a variable with a literal type of the string 'open' in TypeScript?

easy

A. let status = 'open';

B. let status: string = 'open';

C. let status: 'open' = 'open';

D. let status: 'open'; status = 'closed';

Solution

1. Step 1: Check the syntax for literal type declaration

   To declare a variable with a literal type, you specify the exact value in quotes as the type, like 'open'.

2. Step 2: Evaluate each option

   let status: 'open' = 'open'; correctly declares status with type 'open' and assigns 'open'. let status: string = 'open'; uses string type, not literal. let status = 'open'; infers string type but not literal. let status: 'open'; status = 'closed'; declares type 'open' but assigns 'closed', which is invalid.

3. Final Answer:

   let status: 'open' = 'open'; -> Option C

4. Quick Check:

   Literal type syntax uses exact value in quotes [OK]

Hint: Use quotes around value to declare literal type [OK]

Common Mistakes:

• Assigning a different value than the literal type
• Using general types instead of literal types
• Omitting the type and expecting literal type

3. What will be the output of the following TypeScript code?

type Direction = 'left' | 'right';
function move(dir: Direction) {
  if (dir === 'left') {
    return 'Moving left';
  } else {
    return 'Moving right';
  }
}
console.log(move('right'));

medium

A. Moving right

B. Type error at compile time

C. Moving left

D. Undefined

Solution

1. Step 1: Understand the function behavior with literal type

   The function move accepts only 'left' or 'right'. It returns 'Moving left' if input is 'left', else 'Moving right'.

2. Step 2: Trace the function call with 'right'

   Calling move('right') triggers the else branch, returning 'Moving right'.

3. Final Answer:

   Moving right -> Option A

4. Quick Check:

   Input 'right' returns 'Moving right' [OK]

Hint: Check input matches condition for output [OK]

Common Mistakes:

• Confusing which branch runs for 'right'
• Expecting compile error for valid literal
• Ignoring else branch

4. Identify the error in this TypeScript code using literal types and value narrowing:

type Status = 'success' | 'error';
function handle(status: Status) {
  if (status === 'success') {
    console.log('Success!');
  } else if (status === 'fail') {
    console.log('Failed!');
  }
}

medium

A. Missing return type in function

B. No error, code is correct

C. Variable status is not declared

D. The else if condition checks an invalid literal 'fail'

Solution

1. Step 1: Check the allowed literal types for Status

   Status can only be 'success' or 'error'.

2. Step 2: Analyze the else if condition

   The code checks if status === 'fail', which is not part of Status type, causing a type error.

3. Final Answer:

   The else if condition checks an invalid literal 'fail' -> Option D

4. Quick Check:

   Check conditions must match literal types [OK]

Hint: Check all compared literals are in the type union [OK]

Common Mistakes:

• Using literals not declared in the union type
• Ignoring TypeScript errors on invalid comparisons
• Assuming missing return type causes error here

5. Given the following TypeScript code, what is the type of variable result after the if statement?

type Mode = 'auto' | 'manual';
function setMode(mode: Mode) {
  let result: string | undefined;
  if (mode === 'auto') {
    result = 'Automatic mode set';
  } else {
    result = undefined;
  }
  return result;
}

hard

A. string

B. string | undefined

C. undefined

D. Mode

Solution

1. Step 1: Analyze variable declaration and assignments

   Variable result is declared as string | undefined. Inside if, assigned string; else assigned undefined.

2. Step 2: Determine narrowed type after if

   Since result can be either string or undefined depending on mode, its type remains string | undefined.

3. Final Answer:

   string | undefined -> Option B

4. Quick Check:

   Variable type includes all assigned values [OK]

Hint: Variable type covers all assigned values after narrowing [OK]

Common Mistakes:

• Assuming type narrows to string only
• Ignoring undefined assignment
• Confusing Mode type with result type