How assignment compatibility is checked in Typescript - Quick Revision & Summary

Recall & Review

beginner

What does assignment compatibility mean in TypeScript?

It means you can assign a value of one type to a variable of another type if TypeScript considers the types compatible based on their structure.

intermediate

How does TypeScript check assignment compatibility between two object types?

TypeScript checks if the source object has at least the properties and types required by the target object (structural typing). Extra properties in the source are allowed.

beginner

What happens if you try to assign a value with missing required properties in TypeScript?

TypeScript will give an error because the source type does not have all the required properties of the target type, so they are not assignment compatible.

intermediate

Can TypeScript assign a function type to another function type with fewer parameters?

Yes, TypeScript allows assigning a function with fewer parameters to one expecting more, as long as the parameters it does have are compatible (called function parameter bivariance).

advanced

Does TypeScript consider private or protected members when checking assignment compatibility?

Yes, private and protected members must come from the same declaration for assignment compatibility; otherwise, the types are incompatible.

In TypeScript, when is an object type assignment allowed?

A When the target has more properties than the source

B Only when both objects have exactly the same properties

C When the source has fewer properties than the target

D When the source has all properties required by the target, plus possibly more

TypeScript uses structural typing, so the source must have at least the properties the target expects.

What happens if you assign a function with more parameters to a function type expecting fewer parameters?

A It's allowed because extra parameters are ignored

B It's not allowed because of parameter mismatch

C It's allowed only if parameters have the same names

D It's allowed only if return types differ

Assigning a function with more parameters to one expecting fewer is not allowed in TypeScript.

Are private members considered when checking assignment compatibility?

A Yes, they must come from the same declaration

B No, private members are ignored

C Only if the classes are unrelated

D Only if the members are static

Private and protected members must originate from the same declaration for compatibility.

Which typing system does TypeScript use to check assignment compatibility?

A Structural typing

B Nominal typing

C Duck typing

D Dynamic typing

TypeScript uses structural typing, meaning compatibility depends on the shape of types.

Can you assign a value of type 'number' to a variable of type 'string' in TypeScript?

A Yes, if you use type assertion

B Yes, always

C No, because number and string are incompatible

D Only if the variable is declared with 'any'

Number and string are incompatible types; direct assignment causes an error.

Explain how TypeScript checks assignment compatibility between two object types.

Think about the shape of the objects and member visibility.

Describe how function types are checked for assignment compatibility in TypeScript.

Consider how many parameters the functions have and their types.

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