Union type syntax and behavior in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this union type check?

Consider the following TypeScript code. What will be logged to the console?

Typescript

type Result = string | number;

function printResult(value: Result) {
  if (typeof value === 'string') {
    console.log(value.toUpperCase());
  } else {
    console.log(value + 10);
  }
}

printResult('hello');
printResult(5);

A HELLO and 5

B "hello" and 15

C TypeError at runtime

D "HELLO" and 15

💡 Hint

Check how the typeof operator distinguishes between string and number.

The function checks if the value is a string, then converts it to uppercase. Otherwise, it adds 10 to the number. So 'hello' becomes 'HELLO' and 5 becomes 15.

🧠 Conceptual

intermediate

Which union type allows both string and boolean values?

Which of the following TypeScript union types correctly allows a variable to hold either a string or a boolean?

A type MyType = string | boolean;

B type MyType = string & boolean;

C type MyType = string, boolean;

D type MyType = string || boolean;

💡 Hint

Union types use the pipe symbol | to combine types.

The pipe symbol | creates a union type allowing either type. The ampersand & creates an intersection type, which requires both types simultaneously, which is impossible for string and boolean.

🔧 Debug

advanced

Why does this union type assignment cause an error?

Examine the code below. Why does the assignment cause a TypeScript error?

Typescript

type ID = number | string;

let userId: ID = true;

A Because union types cannot include boolean values.

B Because 'true' is assignable to 'number | string' but needs explicit casting.

C Because 'true' is not assignable to type 'number | string'.

D Because 'userId' must be declared with 'const' instead of 'let'.

💡 Hint

Check the allowed types in the union and the assigned value type.

The union type ID allows only number or string. The boolean value 'true' is not assignable to either, so TypeScript raises an error.

❓ Predict Output

advanced

What is the output of this function with union types and type narrowing?

What will the following TypeScript code output when executed?

Typescript

type Input = string | number | boolean;

function describe(input: Input) {
  switch (typeof input) {
    case 'string':
      return `String: ${input.length}`;
    case 'number':
      return `Number: ${input * 2}`;
    case 'boolean':
      return `Boolean: ${input ? 'yes' : 'no'}`;
  }
}

console.log(describe('abc'));
console.log(describe(4));
console.log(describe(false));

A "String: abc", "Number: 4", "Boolean: false"

B "String: 3", "Number: 8", "Boolean: no"

C "String: 3", "Number: 4", "Boolean: no"

D Runtime error due to missing default case

💡 Hint

Look at how typeof narrows the type and what each case returns.

For 'abc', length is 3. For 4, doubling gives 8. For false, ternary returns 'no'. The switch covers all types, so no runtime error.

🧠 Conceptual

expert

How does TypeScript handle union types with overlapping properties?

Given these interfaces and union type, what is the type of 'value.name' inside the function?

Typescript

interface A { name: string; age: number; }
interface B { name: string; location: string; }

type AB = A | B;

function printName(value: AB) {
  return value.name;
}

A string

B string | undefined

C never

D TypeScript error: Property 'name' does not exist on type 'AB'

💡 Hint

Check which properties are common to both interfaces in the union.

Both interfaces A and B have a 'name' property of type string. So in the union type AB, 'name' is guaranteed to be a string.