Intersection type syntax in Typescript - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a variable with an intersection type of Person and Employee.

Typescript

type Person = { name: string };
type Employee = { id: number };
let worker: Person [1] Employee;

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

A&

B|

C,

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using '|' instead of '&' which creates a union type.

Using ',' or '+' which are invalid in type declarations.

The intersection type uses the '&' symbol to combine types so the variable has all properties.

2fill in blank

medium

Complete the code to define a function parameter with an intersection type of A and B.

Typescript

type A = { a: number };
type B = { b: string };
function combine(param: A [1] B) {
  console.log(param.a, param.b);
}

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

A|

B&

C/

D+

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using invalid symbols like '/' or '+'.

The function parameter uses '&' to require both A and B properties.

3fill in blank

hard

Fix the error in the intersection type declaration.

Typescript

type X = { x: number } [1] { y: string };

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

A|

B+

C,

D&

Attempts:

3 left

💡 Hint

Common Mistakes

Using '|' which creates a union type.

Using ',' or '+' which are invalid here.

The correct intersection operator is '&' to combine the two object types.

4fill in blank

hard

Fill both blanks to create an intersection type combining interfaces A and B.

Typescript

interface A { a: number; }
interface B { b: string; }
type AB = [1] A [2] B;

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

Atype

B&

C|

Dinterface

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'interface' instead of 'type' for intersection types.

Using '|' instead of '&' to combine types.

Use 'type' to declare a type alias and '&' to combine interfaces A and B.

5fill in blank

hard

Fill all three blanks to create a variable with an intersection type and assign a valid object.

Typescript

type C = { c: boolean };
type D = { d: number };
let obj: [1] = { c: true, d: 42 } as [2] [3] D;

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

AC & D

BC

C&

DD

Attempts:

3 left

💡 Hint

Common Mistakes

Using only one type without intersection.

Using '|' instead of '&' for intersection.

The variable obj is declared with type 'C & D' and cast as 'C & D' to satisfy both types.

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