Union vs intersection mental model in Typescript - Practice Questions

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of union type variable assignment

What will be the output of the following TypeScript code?

Typescript

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

const person: A = { name: "Alice", age: 30 };
console.log(person);

A { name: "Alice", age: 30 }

B TypeScript error: Object literal may only specify known properties

C { name: "Alice" }

D { age: 30 }

💡 Hint

For union types of object shapes, object literals must match exactly one member without excess properties due to TypeScript's excess property checking.

The union type requires the object to match either { name: string } or { age: number } exactly. The literal has excess 'age' for the first and excess 'name' for the second, causing a TypeScript compilation error due to excess property checking.

❓ Predict Output

intermediate

Output of intersection type variable assignment

What will be the output of this TypeScript code?

Typescript

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

const person: B = { name: "Bob", age: 25 };
console.log(person);

A { name: "Bob", age: 25 }

B TypeScript error: Type '{ name: string; age: number; }' is not assignable to type 'B'

C { name: "Bob" }

D { age: 25 }

💡 Hint

Intersection means the object must have all properties from both types.

The intersection type requires the object to have both name and age properties. The object literal satisfies this, so it prints the full object.

🧠 Conceptual

advanced

Understanding union vs intersection types

Which statement best describes the difference between union and intersection types in TypeScript?

A Union types allow a value to be any one of the types, while intersection types require a value to satisfy all types simultaneously.

B Union types and intersection types are the same and can be used interchangeably.

C Union types require a value to satisfy all types simultaneously, while intersection types allow a value to satisfy any one of the types.

D Union types only work with primitive types, while intersection types only work with objects.

💡 Hint

Think about whether the value needs to meet one or all conditions.

Union types mean the value can be one of several types. Intersection types mean the value must satisfy all types at once.

❓ Predict Output

advanced

Output of function with union and intersection parameters

What is the output of this TypeScript code?

Typescript

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

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

function testUnion(x: X) {
  if ('a' in x) return x.a;
  return x.b.length;
}

function testIntersection(y: Y) {
  return y.a + y.b.length;
}

console.log(testUnion({ a: 10 }));
console.log(testUnion({ b: "hello" }));
console.log(testIntersection({ a: 5, b: "world" }));

A

TypeScript error
TypeScript error
TypeScript error

B

01
5
01

C

10
5
TypeScript error

D

10
5
10

💡 Hint

Check how the functions handle union and intersection types differently.

testUnion checks which property exists and returns accordingly. testIntersection requires both properties and sums them. The outputs are 10, 5, and 10 respectively.

🔧 Debug

expert

Why does this intersection type assignment fail?

Why does the following TypeScript code produce an error?

Typescript

type C = { x: number } & { y: number };

const obj: C = { x: 1 };

A Because intersection types cannot be assigned to variables.

B Because obj has an extra property 'x' not allowed in intersection types.

C Because obj is missing property 'y' required by the intersection type.

D Because TypeScript does not support intersection types with objects.

💡 Hint

Think about what intersection means for required properties.

Intersection types require all properties from all types. obj is missing 'y', so assignment fails.