How intersection combines types in Typescript - Practice Exercises

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this intersection type example?

Consider the following TypeScript code using intersection types. What will be the output when running this code?

Typescript

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

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

A 10 undefined

B undefined hello

C Type error at assignment

D 10 hello

💡 Hint

Intersection types combine all properties from both types.

The intersection type A & B requires the object to have both properties x and y. The object has both, so logging obj.x and obj.y prints '10 hello'.

❓ Predict Output

intermediate

What happens if properties overlap in intersection types?

Look at this TypeScript code where two types have a property with the same name but different types. What error or output occurs?

Typescript

type C = { a: number };
type D = { a: string };

const val: C & D = { a: 5 };

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

B No error, val.a is 5

C Runtime error: conflicting types

D val.a is '5' as string

💡 Hint

Intersection requires the property to satisfy both types simultaneously.

The property 'a' must be both number and string at the same time, which is impossible. TypeScript reports a type error.

🔧 Debug

advanced

Why does this intersection type cause a compile error?

This code tries to assign an object to an intersection type but fails. Identify the cause of the error.

Typescript

type E = { id: number };
type F = { id: string };

const item: E & F = { id: "abc" };

A Error because object is missing property from E

B Error because 'id' cannot be both number and string

C No error, assignment is valid

D Error because 'id' is missing in object

💡 Hint

Check the types of the overlapping property 'id'.

The intersection requires 'id' to be both number and string, which is impossible, causing a compile error.

🧠 Conceptual

advanced

How does intersection type affect method signatures?

Given these two types with methods, what is the type of the method 'foo' in the intersection type G & H?

Typescript

type G = { foo: (x: number) => string };
type H = { foo: (x: string) => number };

// What is the type of foo in G & H?

A foo: never (no compatible type)

B foo: (x: number | string) => string | number

C foo: (x: number) => string

D foo: (x: string) => number

💡 Hint

Intersection requires the method to satisfy both signatures exactly.

The method signatures conflict because they expect different parameter types and return types. The intersection results in 'never' for foo.

❓ Predict Output

expert

What is the output of this complex intersection type example?

Analyze this TypeScript code using intersection types with optional and required properties. What is the output?

Typescript

type J = { a: number; b?: string };
type K = { b: string; c: boolean };

const obj: J & K = { a: 1, b: "text", c: true };
console.log(obj.a, obj.b, obj.c);

A Type error: Property 'b' is optional in J but required in K

B 1 undefined true

C 1 text true

D Type error: Missing property 'c'

💡 Hint

Intersection combines all properties; optional in one and required in another means required.

Property 'b' is optional in J but required in K, so it must be present. The object has all required properties, so output is '1 text true'.

Practice

1. What does the TypeScript intersection type A & B represent?

easy

A. A type that excludes properties from A and B

B. A type that has properties from either A or B, but not both

C. A type that only has properties common to both A and B

D. A type that has all properties from both A and B

Solution

1. Step 1: Understand intersection type meaning

   Intersection A & B means the type must satisfy both A and B simultaneously.

2. Step 2: Combine properties of A and B

   The resulting type includes all properties from A and all from B, so it has everything both define.

3. Final Answer:

   A type that has all properties from both A and B -> Option D

4. Quick Check:

   Intersection = all combined properties [OK]

Hint: Intersection means all properties combined, not just one [OK]

Common Mistakes:

• Thinking intersection means either/or properties
• Confusing intersection with union types
• Assuming intersection only keeps common properties

2. Which of the following is the correct syntax to create an intersection type of TypeA and TypeB in TypeScript?

easy

A. type Combined = TypeA & TypeB;

B. type Combined = TypeA | TypeB;

C. type Combined = TypeA + TypeB;

D. type Combined = TypeA && TypeB;

Solution

1. Step 1: Recall intersection operator

   In TypeScript, the intersection operator is & to combine types.

2. Step 2: Check each option's syntax

   type Combined = TypeA & TypeB; uses & correctly. type Combined = TypeA | TypeB; uses union |, C and D use invalid operators for types.

3. Final Answer:

   type Combined = TypeA & TypeB; -> Option A

4. Quick Check:

   Intersection uses & operator [OK]

Hint: Use & for intersection, | for union types [OK]

Common Mistakes:

• Using | instead of & for intersection
• Using logical operators like && or +
• Confusing syntax with other languages

3. Given the following code, what is the type of variable person?

type Name = { name: string };
type Age = { age: number };

const person: Name & Age = { name: "Alice", age: 30 };

medium

A. { age: number }

B. { name: string; age: number }

C. { name: string }

D. Error: incompatible types

Solution

1. Step 1: Understand intersection of Name and Age

   The intersection Name & Age means the type must have both name and age properties.

2. Step 2: Check the assigned object

   The object has name: "Alice" and age: 30, matching both types.

3. Final Answer:

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

4. Quick Check:

   Intersection type has all combined properties [OK]

Hint: Intersection combines all properties into one type [OK]

Common Mistakes:

• Thinking it only has one of the properties
• Expecting a type error for combining
• Confusing with union type behavior

4. Identify the error in this TypeScript code using intersection types:

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

const obj: A & B = { x: 10 };

medium

A. Property 'x' should be a string, not number

B. Type A and B cannot be intersected

C. Missing property 'y' from type B in the object

D. Syntax error in type declaration

Solution

1. Step 1: Check intersection requirements

   Type A & B requires properties from both A and B, so both x and y must be present.

2. Step 2: Inspect the object literal

   The object only has x: 10 but is missing y, so it does not satisfy the intersection type.

3. Final Answer:

   Missing property 'y' from type B in the object -> Option C

4. Quick Check:

   Intersection needs all properties present [OK]

Hint: Check all properties from both types are present [OK]

Common Mistakes:

• Assuming partial properties satisfy intersection
• Thinking intersection merges only common keys
• Ignoring missing properties in object assignment

5. You have two types:
type Contact = { email: string; phone: string | null };
type Personal = { name: string; phone: string };
What is the type of info in this code?

const info: Contact & Personal = {
  name: "Bob",
  email: "[e-mail]",
  phone: "123-456"
};

hard

A. { name: string; email: string; phone: string }

B. { name: string; email: string; phone: string | null }

C. Error because phone types conflict (string | null) & string

D. { name: string; email: string }

Solution

1. Step 1: Analyze intersection of Contact and Personal

   The phone property is string | null in Contact and string in Personal. Intersection requires a type assignable to both, which is string.

2. Step 2: Check the object assigned

   The object has name, email, and phone as a string, matching the intersection type.

3. Step 3: Determine final type

   The combined type has name: string, email: string, and phone: string (the stricter type).

4. Final Answer:

   { name: string; email: string; phone: string } -> Option A

5. Quick Check:

   Intersection narrows overlapping types [OK]

Hint: Intersection narrows overlapping types to common subtype [OK]

Common Mistakes:

• Assuming union of phone types instead of intersection
• Expecting error due to different phone types
• Ignoring type narrowing in intersections