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.