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'.