Type narrowing with typeof in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to check if the variable is a string.

Typescript

if (typeof value === [1]) {
  console.log("It's a string!");
}

Drag options to blanks, or click blank then click option'

A"object"

B"string"

C"boolean"

D"number"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'string' without quotes causes a syntax error.

Comparing typeof to 'String' (capital S) is incorrect.

Using typeof value === "string" narrows the type to string.

2fill in blank

medium

Complete the code to narrow the type to number.

Typescript

function double(input: string | number) {
  if (typeof input === [1]) {
    return input * 2;
  }
  return input + input;
}

Drag options to blanks, or click blank then click option'

A"string"

B"object"

C"boolean"

D"number"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Number' instead of 'number' causes the condition to fail.

Checking for 'string' when you want to double a number.

Checking typeof input === "number" narrows input to number, allowing multiplication.

3fill in blank

hard

Fix the error in the type narrowing condition.

Typescript

function isBoolean(value: unknown): boolean {
  if (typeof value === [1]) {
    return true;
  }
  return false;
}

Drag options to blanks, or click blank then click option'

A"boolean"

B"Boolean"

C"bool"

D"boolian"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bool' or 'Boolean' instead of 'boolean' causes the check to fail.

Misspelling the type string.

The correct typeof string for boolean values is "boolean" all lowercase.

4fill in blank

hard

Fill both blanks to create a type guard for strings and numbers.

Typescript

function process(value: string | number) {
  if (typeof value === [1]) {
    return value.toUpperCase();
  } else if (typeof value === [2]) {
    return value + 10;
  }
}

Drag options to blanks, or click blank then click option'

A"string"

B"boolean"

C"number"

D"object"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up the order or using wrong type strings.

Using capitalized or incorrect type strings.

Use typeof value === "string" to narrow to string and typeof value === "number" to narrow to number.

5fill in blank

hard

Fill all three blanks to create a type guard that handles string, number, and boolean types.

Typescript

function describe(value: string | number | boolean) {
  switch (typeof value) {
    case [1]:
      return `String: ${value.toLowerCase()}`;
    case [2]:
      return `Number: ${value + 1}`;
    case [3]:
      return `Boolean: ${value ? 'yes' : 'no'}`;
  }
}

Drag options to blanks, or click blank then click option'

A"string"

B"number"

C"boolean"

D"object"

Attempts:

3 left

💡 Hint

Common Mistakes

Using capitalized or misspelled type strings.

Using 'bool' or 'Bool' instead of 'boolean'.

Use "string", "number", and "boolean" to match the types returned by typeof.

Practice

1. What does the typeof operator do in TypeScript?

easy

A. It converts a variable to a string.

B. It changes the type of a variable.

C. It declares a new type.

D. It checks the type of a variable at runtime.

Solution

1. Step 1: Understand the purpose of typeof

   The typeof operator is used to check the type of a variable during the program's execution (runtime).

2. Step 2: Differentiate from other options

   It does not change, declare, or convert types; it only inspects the type.

3. Final Answer:

   It checks the type of a variable at runtime. -> Option D

4. Quick Check:

   typeof checks type at runtime [OK]

Hint: Remember: typeof tells you the type, it doesn't change it. [OK]

Common Mistakes:

• Thinking typeof changes the variable's type
• Confusing typeof with type declaration
• Assuming typeof converts values to strings

2. Which of the following is the correct syntax to narrow a variable value to a string using typeof?

easy

A. if (typeof value === 'string') { }

B. if (typeof value = 'string') { }

C. if (typeof value == string) { }

D. if (typeof value === string) { }

Solution

1. Step 1: Check correct equality operator and string literal

   The correct way to compare is using triple equals === and the type name as a string literal, like 'string'.

2. Step 2: Identify syntax errors in other options

   if (typeof value = 'string') { } uses single equals which is assignment, not comparison. Options A and C miss quotes around 'string'.

3. Final Answer:

   if (typeof value === 'string') { } -> Option A

4. Quick Check:

   Use === and quotes for typeof checks [OK]

Hint: Use === and quotes around type names in typeof checks. [OK]

Common Mistakes:

• Using single = instead of ===
• Forgetting quotes around type names
• Using == instead of ===

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

function checkType(x: string | number) {
  if (typeof x === 'string') {
    return x.toUpperCase();
  } else {
    return x + 10;
  }
}

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

medium

A. HELLO and 510

B. hello and 15

C. HELLO and 15

D. Error at runtime

Solution

1. Step 1: Analyze the input 'hello'

   Since 'hello' is a string, typeof x === 'string' is true, so x.toUpperCase() returns 'HELLO'.

2. Step 2: Analyze the input 5

   Since 5 is a number, the else block runs, returning 5 + 10 = 15.

3. Final Answer:

   HELLO and 15 -> Option C

4. Quick Check:

   String upper + number addition = HELLO, 15 [OK]

Hint: Check typeof to pick string or number logic correctly. [OK]

Common Mistakes:

• Concatenating number and string instead of adding
• Calling string methods on numbers
• Confusing toUpperCase output

4. Identify the error in this TypeScript code using typeof for type narrowing:

function process(value: string | boolean) {
  if (typeof value === 'boolean') {
    return value.toUpperCase();
  } else {
    return value ? 'Yes' : 'No';
  }
}

medium

A. Calling toUpperCase on a boolean value

B. Using typeof with boolean type

C. Missing return type annotation

D. Incorrect if-else structure

Solution

1. Step 1: Check the type narrowing condition

   The condition typeof value === 'boolean' correctly narrows value to boolean.

2. Step 2: Identify method call on wrong type

   Inside this block, calling value.toUpperCase() is invalid because booleans do not have this method.

3. Final Answer:

   Calling toUpperCase on a boolean value -> Option A

4. Quick Check:

   Boolean has no toUpperCase method [OK]

Hint: Check method calls match the narrowed type. [OK]

Common Mistakes:

• Assuming booleans have string methods
• Ignoring type narrowing effect
• Confusing boolean and string logic

5. You have a function that accepts input: string | number | boolean. You want to return:
- The length of the string if input is a string,
- The number multiplied by 2 if input is a number,
- The string 'True' or 'False' if input is a boolean.

Which of the following implementations correctly uses typeof for type narrowing?

hard

A. function handle(input: string | number | boolean) {
if (typeof input === 'boolean') {
return input.length;
} else if (typeof input === 'string') {
return input * 2;
} else {
return input ? 'True' : 'False';
}
}

B. function handle(input: string | number | boolean) {
if (typeof input === 'string') {
return input.length;
} else if (typeof input === 'number') {
return input * 2;
} else {
return input ? 'True' : 'False';
}
}

C. function handle(input: string | number | boolean) {
if (typeof input === 'number') {
return input.length;
} else if (typeof input === 'boolean') {
return input * 2;
} else {
return input ? 'True' : 'False';
}
}

D. function handle(input: string | number | boolean) {
if (typeof input === 'string') {
return input.toUpperCase();
} else if (typeof input === 'number') {
return input + 2;
} else {
return input ? 'True' : 'False';
}
}

Solution

1. Step 1: Check string handling

   function handle(input: string | number | boolean) { if (typeof input === 'string') { return input.length; } else if (typeof input === 'number') { return input * 2; } else { return input ? 'True' : 'False'; } } returns input.length for strings, which is correct. function handle(input: string | number | boolean) { if (typeof input === 'string') { return input.toUpperCase(); } else if (typeof input === 'number') { return input + 2; } else { return input ? 'True' : 'False'; } } returns input.toUpperCase(), which is not requested.

2. Step 2: Check number handling

   function handle(input: string | number | boolean) { if (typeof input === 'string') { return input.length; } else if (typeof input === 'number') { return input * 2; } else { return input ? 'True' : 'False'; } } multiplies number by 2, as required. function handle(input: string | number | boolean) { if (typeof input === 'string') { return input.toUpperCase(); } else if (typeof input === 'number') { return input + 2; } else { return input ? 'True' : 'False'; } } adds 2, which is incorrect. Options B and C misuse length or multiplication on wrong types.

3. Step 3: Check boolean handling

   function handle(input: string | number | boolean) { if (typeof input === 'string') { return input.length; } else if (typeof input === 'number') { return input * 2; } else { return input ? 'True' : 'False'; } } returns 'True' or 'False' strings correctly. Others mix up boolean logic or return wrong types.

4. Final Answer:

   function handle(input: string | number | boolean) { if (typeof input === 'string') { return input.length; } else if (typeof input === 'number') { return input * 2; } else { return input ? 'True' : 'False'; } } -> Option B

5. Quick Check:

   Match typeof checks with correct operations [OK]

Hint: Match each typeof check with correct operation for that type. [OK]

Common Mistakes:

• Calling string methods on numbers or booleans
• Using length on numbers or booleans
• Mixing up operations for each type