How intersection combines types in Typescript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a type that combines properties of A and B.

Typescript

type AB = A [1] B;

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

A^

B&

C+

D|

Attempts:

3 left

💡 Hint

Common Mistakes

Using union operator '|' instead of intersection '&'.

The intersection operator & combines types by including all properties from both types.

2fill in blank

medium

Complete the code to create a variable with type that has both name and age properties.

Typescript

const person: [1] = { name: 'Alice', age: 30 };

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

AA | B

BA + B

CA & B

DA ^ B

Attempts:

3 left

💡 Hint

Common Mistakes

Using union '|' which allows either type but not both.

Using & creates a type with all properties from both A and B.

3fill in blank

hard

Fix the error in the type intersection to correctly combine types X and Y.

Typescript

type XY = X [1] Y;

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

A&

B+

C|

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using '+' or '-' which are invalid for types.

The correct operator to combine types by intersection is &.

4fill in blank

hard

Fill both blanks to create a type that combines properties and a variable of that type.

Typescript

type Combined = [1] & [2];
const obj: Combined = { id: 1, label: 'Item' };

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

AType1

BType2

CType3

DType4

Attempts:

3 left

💡 Hint

Common Mistakes

Choosing types that don't exist or using wrong operators.

We combine Type1 and Type2 using & to get all properties.

5fill in blank

hard

Fill all three blanks to create an intersection type and a variable with all properties.

Typescript

type Full = [1] & [2] & [3];
const fullObj: Full = { a: 1, b: 'text', c: true };

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

AAlpha

BBeta

CGamma

DDelta

Attempts:

3 left

💡 Hint

Common Mistakes

Using types that don't cover all required properties.

The intersection of Delta, Beta, and Gamma includes all their properties.

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