Phantom types in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this TypeScript phantom type example?

Consider this TypeScript code using phantom types to distinguish between different units of measurement. What will be logged to the console?

Typescript

type Meter = { readonly __brand: unique symbol };
type Second = { readonly __brand: unique symbol };

function speed(distance: number & Meter, time: number & Second): number {
  return distance / time;
}

const dist = 100 as number & Meter;
const t = 20 as number & Second;

console.log(speed(dist, t));

A Type error at compile time

B 20

C NaN

D 5

💡 Hint

Phantom types don't affect runtime values but help TypeScript check types.

The phantom types Meter and Second are used only at compile time to ensure correct units. At runtime, they are just numbers. So the division 100 / 20 equals 5.

🧠 Conceptual

intermediate

Why use phantom types in TypeScript?

Which of the following best explains the main purpose of phantom types in TypeScript?

A To create new types without runtime overhead for better type safety

B To add extra runtime checks for values

C To enable dynamic type casting at runtime

D To replace interfaces with classes

💡 Hint

Think about how phantom types affect the compiled JavaScript.

Phantom types add compile-time type information without changing the runtime code, improving type safety without overhead.

🔧 Debug

advanced

Identify the error in this phantom type usage

This TypeScript code tries to use phantom types to prevent mixing currencies. What error will occur when compiling?

Typescript

type USD = { readonly __brand: unique symbol };
type EUR = { readonly __brand: unique symbol };

function addUSD(a: number & USD, b: number & USD): number & USD {
  return (a + b) as number & USD;
}

const priceUSD = 10 as number & USD;
const priceEUR = 15 as number & EUR;

const total = addUSD(priceUSD, priceEUR);

A No error, total is 25

B Runtime error: Cannot add different currencies

C Type error: Argument of type 'number & EUR' is not assignable to parameter of type 'number & USD'.

D Syntax error: Missing return type

💡 Hint

Check the types of arguments passed to addUSD.

The function addUSD expects both arguments to be of type number & USD. Passing priceEUR of type number & EUR causes a compile-time type error.

📝 Syntax

advanced

Which option correctly defines a phantom type in TypeScript?

Select the correct way to define a phantom type to distinguish between Kilograms and Pounds.

A

type Kilogram = number & { __brand: unique symbol };
type Pound = number & { __brand: unique symbol };

B

interface Kilogram { value: number; }
interface Pound { value: number; }

C

type Kilogram = number | { __brand: 'Kilogram' };
type Pound = number | { __brand: 'Pound' };

D

type Kilogram = number & { __brand: 'Kilogram' };
type Pound = number & { __brand: 'Pound' };

💡 Hint

Phantom types use intersection with unique symbols for branding.

Option A uses intersection with unique symbols, which creates distinct phantom types without runtime cost.

🚀 Application

expert

How many items are in the resulting map after using phantom types as keys?

Given this TypeScript code using phantom types as keys in a Map, how many entries does the map contain after execution?

Typescript

type UserId = string & { readonly __brand: unique symbol };

const user1 = 'abc123' as UserId;
const user2 = 'abc123' as UserId;

const map = new Map<UserId, string>();
map.set(user1, 'Alice');
map.set(user2, 'Bob');

console.log(map.size);

A 2

B 1

C 0

D Runtime error

💡 Hint

Phantom types do not change the runtime value or identity of strings.

Both user1 and user2 are the same string value at runtime, so the second set overwrites the first. The map size is 1.