How assignment compatibility is checked in Typescript - Visual Walkthrough

Concept Flow - How assignment compatibility is checked

Start: Have two types

↓

Check if source type fits target type

↓

Are properties compatible?

No→Error: Incompatible

Yes↓

Check method signatures compatibility

↓

Check optional and readonly modifiers

↓

Result: Assignment allowed or not

The process checks if the source type can fit into the target type by comparing properties, methods, and modifiers step-by-step.

Execution Sample

Typescript

interface A { x: number; }
interface B { x: number; y?: string; }
let a: A;
let b: B = { x: 5 };
a = b;

Assign object b of type B to variable a of type A, checking compatibility.

Execution Table

Step	Check	Source Type	Target Type	Result	Action
1	Start assignment	B {x: number, y?: string}	A {x: number}	Pending	Begin compatibility check
2	Check required properties	x: number	x: number	Compatible	Property x matches type number
3	Check extra properties	y?: string (optional)	No y in target	Compatible	Extra optional property allowed
4	Check method signatures	None	None	Compatible	No methods to check
5	Check modifiers	No readonly	No readonly	Compatible	Modifiers compatible
6	Final decision	All checks passed	All checks passed	Compatible	Assignment allowed

💡 All required properties and modifiers are compatible, so assignment is allowed.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 6
a	undefined	compatible with x:number	compatible with optional y	assigned b's value

Key Moments - 3 Insights

Why is it okay to assign B to A even though B has an extra property y?

Because y is optional in B and A does not require it, extra optional properties do not cause incompatibility (see execution_table row 3).

What happens if a required property in A is missing in B?

Assignment fails because required properties must be present and compatible (would fail at execution_table row 2).

Are method signatures checked during assignment compatibility?

Yes, method signatures must be compatible, but in this example there are none, so it passes (see execution_table row 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step do we confirm that extra optional properties do not cause errors?

A Step 2

B Step 5

C Step 3

D Step 6

💡 Hint

Check the row where extra properties like y?: string are discussed.

At which step does the process decide the assignment is allowed?

A Step 6

B Step 5

C Step 4

D Step 3

💡 Hint

Look for the final decision row in the execution_table.

If B lacked property x, what would happen at step 2?

A Compatible, assignment allowed

B Incompatible, assignment error

C Extra properties checked instead

D Modifiers checked first

💡 Hint

Step 2 checks required properties compatibility.

Concept Snapshot

TypeScript assignment compatibility checks if source type fits target type.
It compares required properties, optional properties, methods, and modifiers.
Extra optional properties in source do not cause errors.
All required properties must be present and compatible.
If all checks pass, assignment is allowed.

Full Transcript

In TypeScript, when assigning one variable to another, the compiler checks if the source type can fit into the target type. It starts by comparing required properties to ensure they exist and have compatible types. Then it checks extra properties in the source; optional extras are allowed. Method signatures and modifiers like readonly are also checked. If all these checks pass, the assignment is allowed. For example, assigning an object with properties x and optional y to a variable expecting only x is allowed because y is optional and extra. If a required property is missing, assignment fails. This step-by-step check ensures type safety while allowing flexibility.

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