How assignment compatibility is checked in Typescript - Practice Exercises

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of assignment compatibility with interfaces

What is the output of this TypeScript code when assigning objects to interface types?

Typescript

interface Person { name: string; age: number; }
interface Employee { name: string; age: number; employeeId: string; }

const p: Person = { name: "Alice", age: 30 };
const e: Employee = { name: "Bob", age: 40, employeeId: "E123" };

const p2: Person = e;
// const e2: Employee = p; // Uncommenting this line causes error

console.log(p2.name);

A Alice

B undefined

C TypeScript compilation error

D Bob

💡 Hint

Think about whether a type with more properties can be assigned to a type with fewer properties.

In TypeScript, an object with extra properties can be assigned to a type requiring fewer properties (structural typing). So, Employee can be assigned to Person. But the reverse is not allowed because Person lacks employeeId.

❓ Predict Output

intermediate

Assignment compatibility with union types

What will be the value of variable 'result' after this TypeScript code runs?

Typescript

type A = { x: number };
type B = { y: string };

let a: A = { x: 10 };
let b: B = { y: "hello" };

let result: A | B;
result = a;
console.log(result.x);

A 10

B hello

C TypeScript compilation error

D undefined

💡 Hint

Check which properties are accessible on a union type when assigned a specific type.

This code causes a TypeScript compilation error. Although 'result' is assigned an object of type A, its declared type is A | B, so accessing 'result.x' is invalid without type narrowing because 'x' does not exist on B.

🔧 Debug

advanced

Why does this assignment cause an error?

Why does the following TypeScript code cause a compilation error on the assignment line?

Typescript

interface Animal { name: string; }
interface Dog extends Animal { breed: string; }

let animal: Animal = { name: "Buddy" };
let dog: Dog = { name: "Max", breed: "Beagle" };

animal = dog; // OK
// dog = animal; // Error here

A Because 'animal' lacks the 'breed' property required by 'Dog'

B Because 'dog' lacks the 'name' property required by 'Animal'

C Because TypeScript does not allow assigning interfaces

D Because 'animal' and 'dog' are unrelated types

💡 Hint

Check which properties are required by the target type in the assignment.

Assigning 'dog' to 'animal' works because 'dog' has all properties of 'animal'. But assigning 'animal' to 'dog' fails because 'animal' lacks the 'breed' property required by 'Dog'.

📝 Syntax

advanced

Which assignment is valid with type aliases?

Given these type aliases, which assignment is valid in TypeScript?

Typescript

type Point2D = { x: number; y: number };
type Point3D = { x: number; y: number; z: number };

let p2d: Point2D = { x: 1, y: 2 };
let p3d: Point3D = { x: 1, y: 2, z: 3 };

// Which assignment is valid?

A p3d = p2d;

B p2d = p3d;

C p2d = { x: 1 };

D p3d = { x: 1, y: 2 };

💡 Hint

Think about whether an object with more properties can be assigned to a type requiring fewer properties.

Assigning p3d to p2d is valid because p3d has all properties required by Point2D. The reverse is invalid because p2d lacks 'z'.

🚀 Application

expert

Determine the type compatibility in a function assignment

Consider these function types. Which assignment is allowed by TypeScript's assignment compatibility rules?

Typescript

type FuncA = (a: number, b: string) => void;
type FuncB = (a: number) => void;

let fA: FuncA = (a, b) => { console.log(a, b); };
let fB: FuncB = (a) => { console.log(a); };

// Which assignment is valid?

A fB = fA;

B Both assignments are valid

C Neither assignment is valid

D fA = fB;

💡 Hint

A function accepting more parameters can be assigned to a type expecting fewer parameters (contravariance in parameters).

In TypeScript, function parameter types are contravariant. fA (accepting number, string) can be assigned to FuncB (expecting number => void) because callers of fB provide only one argument, which fA can handle. The reverse (fB to FuncA) fails because fB lacks a handler for the second string parameter.

Practice

1. In TypeScript, what does assignment compatibility primarily check between two types?

easy

A. If the types have the same number of methods

B. If the variable names are the same

C. If the values are equal at runtime

D. If the properties and their types match between the source and target types

Solution

1. Step 1: Understand assignment compatibility concept

   TypeScript checks if the shape (properties and their types) of one type fits into another.

2. Step 2: Compare properties and types

   It does not check variable names or runtime values but the structure of types.

3. Final Answer:

   If the properties and their types match between the source and target types -> Option D

4. Quick Check:

   Shape matching = Properties and types [OK]

Hint: Think of matching shapes, not names or values [OK]

Common Mistakes:

• Confusing variable names with type compatibility
• Thinking runtime values affect assignment compatibility
• Assuming method count matters instead of properties

2. Which of the following is the correct syntax to assign an object of type {name: string} to a variable of type {name: string; age?: number} in TypeScript?

easy

A. let person: {name: string; age: number} = {age: 30};

B. let person: {name: string; age?: number} = {name: 'Alice'};

C. let person: {name: string; age: number} = {name: 'Alice'};

D. let person: {name: string} = {name: 'Alice', age: 30};

Solution

1. Step 1: Check optional property usage

   The target type has an optional property age?, so the source object can omit it.

2. Step 2: Verify assignment compatibility

   Assigning {name: 'Alice'} to {name: string; age?: number} is valid because age is optional.

3. Final Answer:

   let person: {name: string; age?: number} = {name: 'Alice'}; -> Option B

4. Quick Check:

   Optional properties can be omitted [OK]

Hint: Optional properties can be left out in assignments [OK]

Common Mistakes:

• Assigning object missing required properties
• Confusing optional and required properties
• Assigning extra properties to narrower types

3. What will be the output of the following TypeScript code?

interface A { x: number; }
interface B { x: number; y: number; }

let a: A = { x: 10 };
let b: B = { x: 10, y: 20 };

// Assignment
let c: A = b;
console.log(c.x);

medium

A. 10

B. 20

C. undefined

D. Compilation error

Solution

1. Step 1: Understand assignment compatibility from B to A

   Type B has all properties of A plus extra. Assigning B to A is allowed because A's shape is a subset of B's.

2. Step 2: Check the value of c.x

   Since b.x is 10, c.x will be 10 after assignment.

3. Final Answer:

   10 -> Option A

4. Quick Check:

   Subset shape assignment = Allowed and value preserved [OK]

Hint: Assign wider type to narrower type if subset matches [OK]

Common Mistakes:

• Expecting error when assigning wider to narrower type
• Confusing property values with property names
• Thinking extra properties cause errors

4. Identify the error in this TypeScript code snippet:

interface Person { name: string; age: number; }

let p: Person = { name: 'Bob' };

medium

A. Missing property 'age' in the object assigned to 'p'

B. Property 'name' should be a number, not a string

C. Interface 'Person' cannot be used as a type

D. No error, code is valid

Solution

1. Step 1: Check required properties in interface

   The interface requires both name and age properties.

2. Step 2: Verify object assigned to variable

   The object only has name, missing age, causing a type error.

3. Final Answer:

   Missing property 'age' in the object assigned to 'p' -> Option A

4. Quick Check:

   All required properties must be present [OK]

Hint: Check all required properties are present in assigned object [OK]

Common Mistakes:

• Ignoring missing required properties
• Assuming optional properties are required
• Thinking interface cannot be used as type

5. Given these interfaces:

interface X { a: number; b: string; }
interface Y { a: number; b: string; c?: boolean; }

Which assignment is valid and why?

let x: X = { a: 1, b: 'hello' };
let y: Y = { a: 1, b: 'hello', c: true };

// Assignments
x = y;
y = x;

hard

A. Both assignments are valid because optional properties don't matter

B. Only y = x is valid because X has fewer properties

C. Only x = y is valid because Y has all properties of X plus optional ones

D. Both assignments are invalid due to property mismatch

Solution

1. Step 1: Analyze x = y assignment

   Y has all properties of X plus an optional c. Assigning Y to X is allowed because X's shape is a subset of Y's.

2. Step 2: Analyze y = x assignment

   X lacks property c which Y expects optionally. Assigning X to Y is not allowed because c might be missing and is optional but not guaranteed.

3. Step 3: Reconsider optional property assignment rules

   Assigning X to Y is invalid because Y expects c optionally, but the source object does not have it, and TypeScript does not allow missing optional properties when assigning to a type that includes them.

4. Final Answer:

   Only x = y is valid because Y has all properties of X plus optional ones -> Option C

5. Quick Check:

   Optional properties allow assignment from wider to narrower types only [OK]

Hint: Optional properties allow assignment from wider to narrower types only [OK]

Common Mistakes:

• Thinking optional properties block assignment both ways
• Assuming extra properties cause errors always
• Confusing required and optional properties