Type compatibility with classes in Typescript - Step-by-Step Execution

Concept Flow - Type compatibility with classes

Define Class A

↓

Define Class B

↓

Create instance of A

↓

Assign instance of A to variable of type B?

Yes/No↓

Check properties and methods compatibility

↓

Result: Compatible or Not Compatible

This flow shows how TypeScript checks if one class instance can be assigned to a variable of another class type by comparing their properties and methods.

Execution Sample

Typescript

class A {
  x: number;
  constructor(x: number) { this.x = x; }
}

class B {
  x: number;
  y: number;
  constructor(x: number, y: number) { this.x = x; this.y = y; }
}

let a: A = new A(5);
let b: B = a; // Is this allowed?

This code tries to assign an instance of class A to a variable of type B and checks if TypeScript allows it based on property compatibility.

Execution Table

Step	Action	Evaluation	Result
1	Define class A with property x:number	Class A created	Success
2	Define class B with properties x:number, y:number	Class B created	Success
3	Create instance a of class A with x=5	a = { x: 5 }	Success
4	Assign a to variable b of type B	Check if a matches B's structure	Fail: missing property y
5	Result	TypeScript error: Type 'A' is not assignable to type 'B'	Assignment not allowed

💡 Assignment fails because instance of A lacks property y required by B

Variable Tracker

Variable	Start	After Step 3	After Step 4
a	undefined	{ x: 5 }	{ x: 5 }
b	undefined	undefined	Error: incompatible assignment

Key Moments - 2 Insights

Why can't we assign an instance of class A to a variable of type B?

Because class B expects a property 'y' which class A does not have, so the assignment fails as shown in step 4 of the execution_table.

Does TypeScript check the class names or the properties for compatibility?

TypeScript checks the properties and methods, not the class names. So even if classes have different names, assignment works if their structures match.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of variable 'a' after step 3?

A { x: 5, y: 0 }

B undefined

C { x: 5 }

D Error

💡 Hint

Check the 'variable_tracker' table under 'a' after step 3

At which step does the assignment of 'a' to 'b' fail?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

See the 'execution_table' row where assignment is checked

If class A also had property 'y', what would happen to the assignment at step 4?

A It would succeed

B It would still fail

C TypeScript would throw a syntax error

D The code would run but with a warning

💡 Hint

Recall that TypeScript checks property compatibility, so adding 'y' to A matches B

Concept Snapshot

Type compatibility with classes in TypeScript:
- Compatibility is based on matching properties and methods, not class names.
- An instance of one class can be assigned to another if it has all required members.
- Missing properties cause assignment errors.
- This is called structural typing.
- Useful for flexible and safe code assignments.

Full Transcript

This visual trace shows how TypeScript checks type compatibility between classes. We define two classes, A and B, where B has an extra property 'y'. We create an instance of A and try to assign it to a variable of type B. TypeScript compares the properties and finds 'y' missing in A, so it disallows the assignment. Variables 'a' and 'b' track the values and errors. Key moments clarify that TypeScript uses structural typing, focusing on properties, not class names. The quiz tests understanding of variable states and assignment rules. The snapshot summarizes the core idea: classes are compatible if their structures match.

Practice

1. In TypeScript, when are two classes considered compatible for assignment?

easy

A. When they have the same number of methods

B. Only if they share the same class name

C. When their instances have matching properties and types

D. If they are declared in the same file

Solution

1. Step 1: Understand Type Compatibility

   TypeScript checks if the properties and their types in one class instance match those expected by another class type.

2. Step 2: Check Class Names and Methods

   Class names or method counts do not affect compatibility; only the shape (properties and types) matters.

3. Final Answer:

   When their instances have matching properties and types -> Option C

4. Quick Check:

   Compatibility = matching properties and types [OK]

Hint: Focus on properties and types, not class names [OK]

Common Mistakes:

• Assuming class names must match
• Thinking method count matters
• Believing file location affects compatibility

2. Which of the following is the correct syntax to assign an instance of class B to a variable typed as class A in TypeScript, assuming compatibility?

easy

A. let a: B = A();

B. let a: A = new B();

C. let a = A(new B());

D. let a = new A(B);

Solution

1. Step 1: Review TypeScript Assignment Syntax

   To assign an instance of class B to a variable typed as A, use let a: A = new B(); if B is compatible with A.

2. Step 2: Identify Incorrect Syntax

   Other options misuse constructor calls or type annotations and are invalid.

3. Final Answer:

   let a: A = new B(); -> Option B

4. Quick Check:

   Use let var: Type = new Class(); [OK]

Hint: Use variable: Type = new Class() for assignments [OK]

Common Mistakes:

• Calling classes like functions
• Swapping variable and type names
• Using incorrect constructor syntax

3. Consider the following TypeScript code:

class A { x: number; }
class B { x: number; y: string; }

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

What will be the output when this code runs?

medium

A. undefined

B. Runtime error

C. The value of x from B instance

D. Compilation error

Solution

1. Step 1: Analyze Class Properties and Assignment

   Class B has properties x and y. Class A has only x. Assigning new B() to a variable typed as A is allowed because B has at least the properties of A.

2. Step 2: Check Output of console.log(a.x)

   The property x exists on the B instance. Since no value is assigned to x, it is undefined, so console.log(a.x) outputs "undefined".

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Compatible class instance property accessed correctly [OK]

Hint: Compatible class instances share accessible properties [OK]

Common Mistakes:

• Expecting runtime error due to extra properties
• Thinking assignment causes compilation error
• Assuming class properties are auto-initialized to 0

4. Given the code below, why does TypeScript show an error?

class A { x: number; }
class B { y: string; }

let a: A = new B();

medium

A. Because new B() is not a valid constructor call

B. Because class names differ

C. Because B has extra property y

D. Because B does not have property x required by A

Solution

1. Step 1: Check Property Compatibility

   Class A requires property x. Class B only has property y, so B instances lack x.

2. Step 2: Understand TypeScript Compatibility Rules

   TypeScript requires the assigned instance to have all properties of the target type. Missing x causes error.

3. Final Answer:

   Because B does not have property x required by A -> Option D

4. Quick Check:

   Missing required property causes error [OK]

Hint: Check if assigned class has all required properties [OK]

Common Mistakes:

• Thinking class names must match
• Assuming extra properties cause error
• Believing constructor call is invalid

5. You have two classes:

class Person { name: string; age: number; }
class Employee { name: string; age: number; salary: number; }

Which assignment is valid and why?
let p: Person = new Employee();
let e: Employee = new Person();

hard

A. Only let p: Person = new Employee(); is valid because Employee has all Person properties

B. Only let e: Employee = new Person(); is valid because Person has fewer properties

C. Both assignments are valid because classes share some properties

D. Neither assignment is valid due to different class names

Solution

1. Step 1: Compare Properties of Person and Employee

   Employee has all properties of Person plus salary. Person lacks salary.

2. Step 2: Check Assignment Compatibility

   Assigning Employee instance to Person variable is valid (extra properties allowed). Assigning Person instance to Employee variable is invalid (missing salary).

3. Final Answer:

   Only let p: Person = new Employee(); is valid because Employee has all Person properties -> Option A

4. Quick Check:

   Extra properties allowed, missing properties not [OK]

Hint: Assign subclass to superclass type, not vice versa [OK]

Common Mistakes:

• Assuming both assignments are valid
• Confusing extra vs missing properties
• Thinking class names affect compatibility