What structural typing means in Typescript - Step-by-Step Execution

Concept Flow - What structural typing means

Define Type A with properties

↓

Create object with matching properties

↓

Assign object to Type A variable

↓

TypeScript checks if object shape matches Type A

↓

If shapes match, assignment allowed

↓

Use object as Type A safely

Structural typing means TypeScript checks if an object has the right shape (properties and types) to match a type, not if it explicitly declares that type.

Execution Sample

Typescript

interface Point { x: number; y: number; }
const p = { x: 10, y: 20, z: 30 };
const point: Point = p;
console.log(point.x, point.y);

This code shows that an object with extra properties can still be assigned to a type if it has the required shape.

Execution Table

Step	Action	Evaluation	Result
1	Define interface Point with x:number and y:number	Type Point created	Point expects x and y as numbers
2	Create object p with x=10, y=20, z=30	Object p created	p has x,y,z properties
3	Assign p to variable point of type Point	Check if p matches Point shape	p has x and y, extra z ignored, assignment allowed
4	Access point.x and point.y	Retrieve values	Outputs 10 20

💡 Assignment allowed because p has at least the properties required by Point

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
p	undefined	{x:10, y:20, z:30}	{x:10, y:20, z:30}	{x:10, y:20, z:30}
point	undefined	undefined	{x:10, y:20}	{x:10, y:20}

Key Moments - 2 Insights

Why can an object with extra properties be assigned to a type?

Because TypeScript uses structural typing, it only checks if the object has the required properties with correct types, ignoring extra ones. See execution_table step 3.

Does the object need to explicitly declare the interface to be assigned?

No, the object just needs to have the right shape. It does not need to say it implements the interface. See execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what properties does object p have after step 2?

A Only z

B Only x and y

C x, y, and z

D No properties yet

💡 Hint

Check execution_table row 2 under Result column

At which step does TypeScript check if the object matches the type shape?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

See execution_table row 3 Action and Evaluation columns

If object p lacked property y, what would happen at step 3?

A Assignment allowed anyway

B TypeScript error: missing property y

C Extra properties cause error

D No error, but runtime crash

💡 Hint

Structural typing requires all required properties; see key_moments about shape matching

Concept Snapshot

Structural typing means TypeScript checks if an object has required properties and types.
Extra properties do not cause errors.
Objects do not need explicit interface declarations.
Assignment allowed if shape matches.
This enables flexible and safe code.

Full Transcript

Structural typing in TypeScript means that when you assign an object to a variable of a certain type, TypeScript checks if the object has the required properties with the correct types. It does not require the object to explicitly declare that it implements the type. For example, if you have an interface Point with properties x and y, and an object with x, y, and extra property z, TypeScript allows assigning that object to a Point variable because it has at least the required properties. This is shown in the execution steps where the object p with x=10, y=20, z=30 is assigned to point of type Point. The extra property z is ignored. This approach helps write flexible code while keeping type safety.

Practice

1. What does structural typing in TypeScript primarily check for?

easy

A. If an object inherits from a specific parent class

B. If an object is declared with the exact same class name

C. If an object has the required properties regardless of its explicit type

D. If an object uses the same variable names as another object

Solution

1. Step 1: Understand structural typing concept

   Structural typing checks the shape of an object, meaning its properties and their types.

2. Step 2: Compare with other typing methods

   Unlike nominal typing, it does not require the same class or inheritance, only matching properties.

3. Final Answer:

   If an object has the required properties regardless of its explicit type -> Option C

4. Quick Check:

   Structural typing = property shape check [OK]

Hint: Focus on properties, not class names or inheritance [OK]

Common Mistakes:

• Confusing structural typing with class inheritance
• Thinking variable names must match exactly
• Assuming explicit type declarations are required

2. Which of the following TypeScript code snippets correctly demonstrates structural typing?

easy

A. interface Point { x: number; y: number; } const p: Point = { x: 1, y: 2 };

B. class Point { x: number; y: number; } const p: Point = new Point();

C. type Point = { x: string; y: string }; const p: Point = { x: 1, y: 2 };

D. interface Point { x: number; y: number; } const p = { a: 1, b: 2 };

Solution

1. Step 1: Check interface and object matching

   interface Point { x: number; y: number; } const p: Point = { x: 1, y: 2 }; defines an interface with x and y as numbers and assigns an object with matching properties.

2. Step 2: Verify other options

   class Point { x: number; y: number; } const p: Point = new Point(); uses class instantiation, not structural typing demonstration. type Point = { x: string; y: string }; const p: Point = { x: 1, y: 2 }; mismatches types. interface Point { x: number; y: number; } const p = { a: 1, b: 2 }; has different property names.

3. Final Answer:

   interface Point { x: number; y: number; } const p: Point = { x: 1, y: 2 }; -> Option A

4. Quick Check:

   Matching properties and types = correct structural typing [OK]

Hint: Match property names and types exactly for structural typing [OK]

Common Mistakes:

• Using wrong property names
• Mismatching property types
• Confusing class instances with structural typing

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

interface User { name: string; age: number; }
const user = { name: 'Alice', age: 30, city: 'NY' };
function greet(u: User) { return `Hello, ${u.name}`; }
console.log(greet(user));

medium

A. Runtime error

B. Error: Object literal may only specify known properties

C. Hello, undefined

D. Hello, Alice

Solution

1. Step 1: Understand structural typing with extra properties

   The object has extra property 'city', but TypeScript allows it because it has required properties 'name' and 'age'.

2. Step 2: Check function usage

   The function greet uses only 'name', which exists, so it returns 'Hello, Alice'.

3. Final Answer:

   Hello, Alice -> Option D

4. Quick Check:

   Extra properties allowed if required ones exist [OK]

Hint: Extra properties don't block structural typing [OK]

Common Mistakes:

• Thinking extra properties cause errors
• Expecting undefined for missing properties
• Confusing compile-time errors with runtime

4. Identify the error in this TypeScript code related to structural typing:

interface Car { make: string; model: string; }
const vehicle = { make: 'Toyota' };
function printCar(c: Car) { console.log(c.make + ' ' + c.model); }
printCar(vehicle);

medium

A. vehicle is missing the 'model' property required by Car

B. vehicle has extra properties not allowed by Car

C. printCar function is missing a return type

D. No error, code runs fine

Solution

1. Step 1: Check object properties against interface

   vehicle only has 'make', but Car requires both 'make' and 'model'.

2. Step 2: Understand structural typing requirements

   All required properties must be present; missing 'model' causes error.

3. Final Answer:

   vehicle is missing the 'model' property required by Car -> Option A

4. Quick Check:

   Missing required properties cause errors [OK]

Hint: Check all required properties exist in the object [OK]

Common Mistakes:

• Ignoring missing properties
• Thinking extra properties cause errors
• Confusing missing return types with structural typing errors

5. Given these interfaces:

interface A { id: number; name: string; }
interface B { id: number; name: string; age: number; }

Which assignment is valid under TypeScript's structural typing rules?

hard

A. const a: A = { id: 1, name: 'John' }; const b: B = a;

B. const b: B = { id: 2, name: 'Jane', age: 25 }; const a: A = b;

C. const a: A = { name: 'Joe', age: 30 };

D. const b: B = { id: 4, name: 'Jill' }; const a: A = b;

Solution

1. Step 1: Analyze required property in interface B

   B has a required 'age' property.

2. Step 2: Check assignment compatibility

   const a: A = { id: 1, name: 'John' }; const b: B = a; fails: 'a' lacks 'age' required by B. const b: B = { id: 2, name: 'Jane', age: 25 }; const a: A = b; succeeds: 'b' matches B, extra 'age' OK for A. const a: A = { name: 'Joe', age: 30 }; misses required 'id' for A. const b: B = { id: 4, name: 'Jill' }; const a: A = b; misses 'age' required by B.

3. Final Answer:

   const b: B = { id: 2, name: 'Jane', age: 25 }; const a: A = b; -> Option B

4. Quick Check:

   More properties to fewer properties assignment is valid [OK]

Hint: Assign from bigger shape to smaller shape, not vice versa [OK]

Common Mistakes:

• Assigning smaller shape to bigger shape without optional properties
• Confusing optional properties as required
• Adding extra properties to interface A directly