Intersection type syntax in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

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

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

Typescript

type A = { x: number };
type B = { y: string };

const obj: A & B = { x: 10, y: "hello" };
console.log(obj.x, obj.y);

A undefined undefined

B Type error: Property 'y' is missing

C 10 hello

D 10 undefined

💡 Hint

An intersection type combines all properties from both types.

The variable 'obj' must have both properties 'x' and 'y'. So accessing obj.x and obj.y prints 10 and 'hello'.

🧠 Conceptual

intermediate

Which statement best describes intersection types in TypeScript?

Choose the correct description of intersection types (&) in TypeScript.

A They create a type that has properties from both types combined.

B They create a type that can be either one type or the other.

C They remove common properties from both types.

D They create a union of all possible values from both types.

💡 Hint

Think about combining properties, not choosing one or the other.

Intersection types combine all properties from both types, so the resulting type has everything from both.

🔧 Debug

advanced

What error does this TypeScript code raise?

Analyze this code snippet and select the error it produces.

Typescript

type C = { a: number } & { a: string };
const val: C = { a: 5 };

A Type error: Type 'number' is not assignable to type 'string'.

B Syntax error: Invalid intersection type.

C No error, val is valid.

D Runtime error: Cannot assign number to string.

💡 Hint

Check the property 'a' types in both intersected types.

The property 'a' is declared as number in one type and string in the other. Intersection requires both, which is impossible, so TypeScript errors.

📝 Syntax

advanced

Which option correctly declares an intersection type for two interfaces?

Select the correct syntax to declare a variable with intersection type of interfaces X and Y.

Typescript

interface X { id: number; }
interface Y { name: string; }

A let obj: X && Y = { id: 1, name: "Alice" };

B let obj: X | Y = { id: 1, name: "Alice" };

C let obj: X, Y = { id: 1, name: "Alice" };

D let obj: X & Y = { id: 1, name: "Alice" };

💡 Hint

Intersection uses '&' symbol between types.

The '&' symbol combines types to require all properties. Option D uses correct syntax.

🚀 Application

expert

How many properties does the variable 'data' have after this code runs?

Given these types and variable, how many properties does 'data' have?

Typescript

type T1 = { a: number; b: string };
type T2 = { b: string; c: boolean };

const data: T1 & T2 = { a: 5, b: "hello", c: true };

A 4

B 3

C 1

D 2

💡 Hint

Intersection merges all properties, duplicates count once.

The intersection type combines all properties from T1 and T2. Property 'b' appears in both but counts once. So properties are 'a', 'b', and 'c' = 3 total.

Practice

1.

What does the intersection type type AB = A & B; mean in TypeScript?

easy

A. It creates a new type that excludes properties from A and B.

B. It creates a union type that can be either A or B.

C. It combines types A and B so the result has all properties from both.

D. It merges A and B but only keeps properties common to both.

Solution

1. Step 1: Understand intersection operator &

   The & symbol in TypeScript creates an intersection type combining all properties from both types.

2. Step 2: Compare with union and other operations

   Unlike union (|), intersection requires all properties from both types to be present.

3. Final Answer:

   It combines types A and B so the result has all properties from both. -> Option C

4. Quick Check:

   Intersection = all properties combined [OK]

Hint: Intersection uses & to combine all properties [OK]

Common Mistakes:

• Confusing intersection (&) with union (|)
• Thinking intersection keeps only common properties
• Assuming intersection excludes properties

2.

Which of the following is the correct syntax to define an intersection type of Person and Employee?

easy

A. type Staff = Person | Employee;

B. type Staff = Person & Employee;

C. type Staff = Person, Employee;

D. type Staff = Person && Employee;

Solution

1. Step 1: Recall intersection syntax

   Intersection types use the & symbol to combine types.

2. Step 2: Check each option

   type Staff = Person & Employee; uses & correctly for intersection. type Staff = Person | Employee; uses union |. Comma is invalid syntax. && is a logical operator, not type syntax.

3. Final Answer:

   type Staff = Person & Employee; -> Option B

4. Quick Check:

   Intersection syntax = & [OK]

Hint: Use & to join types for intersection [OK]

Common Mistakes:

• Using | instead of & for intersection
• Using commas or && which are invalid
• Confusing logical operators with type operators

3.

What is the type of variable user after this code?

type A = { name: string };
type B = { age: number };

const user: A & B = { name: "Alice", age: 30 };

medium

A. Error: incompatible types

B. { age: number }

C. { name: string }

D. { name: string; age: number }

Solution

1. Step 1: Understand intersection type A & B

   The type A & B combines properties from both A and B, so it must have name and age.

2. Step 2: Check the assigned object

   The object has both name: "Alice" and age: 30, matching the intersection type.

3. Final Answer:

   { name: string; age: number } -> Option D

4. Quick Check:

   Intersection type = combined properties [OK]

Hint: Intersection type has all properties combined [OK]

Common Mistakes:

• Thinking intersection keeps only one type's properties
• Expecting a type error when all properties are present
• Confusing intersection with union

4.

Identify the error in this TypeScript code using intersection types:

type X = { a: number };
type Y = { b: string };

const obj: X & Y = { a: 5 };

medium

A. Missing property 'b' from type Y in the object.

B. Incorrect use of & operator for intersection.

C. Property 'a' should be a string, not number.

D. Object should use union type | instead of &.

Solution

1. Step 1: Check required properties for intersection X & Y

   The intersection requires all properties from both X and Y, so both a and b must be present.

2. Step 2: Inspect the object literal

   The object only has a: 5 but is missing b, causing a type error.

3. Final Answer:

   Missing property 'b' from type Y in the object. -> Option A

4. Quick Check:

   Intersection requires all properties present [OK]

Hint: Intersection needs all properties present in object [OK]

Common Mistakes:

• Forgetting to include all properties in intersection
• Confusing intersection with union allowing partial properties
• Misusing & operator syntax

5.

Given these types, which is the correct way to define a variable fullInfo that must have all properties from Person, Employee, and Contact?

type Person = { name: string };
type Employee = { id: number };
type Contact = { email: string };

hard

A. const fullInfo: Person & Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" };

B. const fullInfo: Person | Employee | Contact = { name: "Bob", id: 1, email: "[e-mail]" };

C. const fullInfo: Person & Employee | Contact = { name: "Bob", id: 1, email: "[e-mail]" };

D. const fullInfo: Person | Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" };

Solution

1. Step 1: Understand combining multiple types

   To require all properties from Person, Employee, and Contact, use intersection of all three types with &.

2. Step 2: Analyze each option

   const fullInfo: Person & Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" }; correctly uses Person & Employee & Contact. const fullInfo: Person | Employee | Contact = { name: "Bob", id: 1, email: "[e-mail]" }; uses union which allows any one type only. Mixing union and intersection incorrectly.

3. Final Answer:

   const fullInfo: Person & Employee & Contact = { name: "Bob", id: 1, email: "[e-mail]" }; -> Option A

4. Quick Check:

   All properties require intersection & [OK]

Hint: Use & to combine multiple types for all properties [OK]

Common Mistakes:

• Using union | instead of intersection & for all properties
• Mixing union and intersection without parentheses
• Assuming union requires all properties