Union vs intersection mental model in Typescript - Quick Revision & Key Differences

Recall & Review

beginner

What is a union type in TypeScript?

A union type means a value can be one of several types. It uses the | symbol. For example, string | number means the value can be a string or a number.

beginner

What is an intersection type in TypeScript?

An intersection type means a value must have all the types combined. It uses the & symbol. For example, {a: number} & {b: string} means the value has both properties a and b.

beginner

How can you imagine a union type in real life?

Think of a union type like a menu where you can choose one item from several options. For example, choosing a drink: coffee or tea or juice.

beginner

How can you imagine an intersection type in real life?

Think of an intersection type like a combo meal that includes all parts together. For example, a meal with a burger AND fries AND a drink.

intermediate

What happens if you try to assign a value that fits neither union nor intersection types?

For a union type, the value must match at least one type. For an intersection type, the value must satisfy all types. If it doesn't, TypeScript will show an error.

Which symbol represents a union type in TypeScript?

A *

B |

C +

D &

The union type uses the pipe symbol | to mean 'or'.

Which symbol represents an intersection type in TypeScript?

A +

B |

C &

D *

The intersection type uses the ampersand symbol & to mean 'and'.

If a variable is typed as string | number, which value is allowed?

A 42

B {name: 'Alice'}

C true

D [1, 2, 3]

The value 42 is a number, which fits the union type string | number.

If a variable is typed as {a: number} & {b: string}, which object is valid?

A {}

B {b: 'hello'}

C {a: 5}

D {a: 5, b: 'hello'}

The object must have both properties a and b to satisfy the intersection type.

Which mental model best describes a union type?

A A menu where you pick one item

B A combo meal with all items included

C A list of unrelated items

D A single fixed item

A union type is like choosing one item from a menu of options.

Explain the difference between union and intersection types using a simple real-life example.

Think about choosing one item versus having all items together.

Describe how TypeScript uses the symbols | and & in types and what they mean.

Focus on the meaning of 'or' and 'and' in types.