How structural typing differs from nominal typing in Typescript - Visual Walkthrough

Concept Flow - How structural typing differs from nominal typing

Start: Define Type A

↓

Define Type B

↓

Compare Types

↓

Nominal Typing: Compare names

↓

Structural Typing: Compare shape

↓

Assign or Reject

↓

End

This flow shows how nominal typing compares type names, while structural typing compares the shape (properties) of types to decide compatibility.

Execution Sample

Typescript

type Cat = { name: string };
type Dog = { name: string };

let cat: Cat = { name: "Whiskers" };
let dog: Dog = cat; // Allowed in structural typing

Assigning a Cat object to a Dog variable works because both have the same shape in structural typing.

Execution Table

Step	Action	Type A	Type B	Comparison	Result
1	Define Type Cat	{ name: string }			Type Cat created
2	Define Type Dog		{ name: string }		Type Dog created
3	Create cat object	cat = { name: "Whiskers" }			cat assigned
4	Assign cat to dog	Cat	Dog	Compare names (Nominal): Cat != Dog	Nominal: Error
5	Assign cat to dog	Cat	Dog	Compare shape (Structural): same properties	Structural: Allowed
6	End				Assignment allowed in structural typing

💡 Nominal typing rejects assignment due to different names; structural typing allows it due to matching shape.

Variable Tracker

Variable	Start	After Assignment	Final
cat	undefined	{ name: "Whiskers" }	{ name: "Whiskers" }
dog	undefined	Error in nominal typing	{ name: "Whiskers" } in structural typing

Key Moments - 2 Insights

Why does assigning 'cat' to 'dog' cause an error in nominal typing but not in structural typing?

Nominal typing checks if the type names match exactly (Cat vs Dog), so it rejects the assignment (see execution_table step 4). Structural typing checks if the properties match, ignoring names, so it allows it (step 5).

What does 'shape' mean in structural typing?

Shape means the properties and their types inside the object. If two types have the same properties with the same types, they have the same shape (execution_table step 5).

Visual Quiz - 3 Questions

Look at the execution table, at which step does nominal typing reject the assignment?

A Step 4

B Step 3

C Step 5

D Step 6

💡 Hint

Check the 'Result' column for nominal typing rejection.

According to the variable tracker, what is the value of 'dog' after assignment in structural typing?

A undefined

B Error

C { name: "Whiskers" }

D null

💡 Hint

Look at the 'Final' column for 'dog' in variable_tracker.

If Type Dog had an extra property, how would structural typing handle assigning 'cat' to 'dog'?

A Allow assignment because names differ

B Reject assignment because shapes differ

C Allow assignment ignoring extra properties

D Error due to missing name property

💡 Hint

Structural typing requires matching properties; extra properties cause mismatch.

Concept Snapshot

Nominal typing compares type names exactly.
Structural typing compares object shapes (properties).
In TypeScript, structural typing allows assignment if shapes match.
Nominal typing rejects if names differ, even if shapes match.
Structural typing is more flexible and common in TypeScript.

Full Transcript

This visual execution shows how nominal and structural typing differ in TypeScript. We define two types, Cat and Dog, both with a name property. When assigning a Cat object to a Dog variable, nominal typing checks the type names and rejects the assignment because Cat and Dog are different names. Structural typing compares the properties inside the types and allows the assignment because both have the same shape: a name string. The variable tracker shows that 'cat' holds the object with name 'Whiskers', and 'dog' gets the same object in structural typing but causes an error in nominal typing. Key moments clarify why nominal typing rejects based on names and what shape means in structural typing. The quiz tests understanding of these steps and concepts.

Practice

1. Which of the following best describes structural typing in TypeScript?

easy

A. Types are compatible if their properties and types match, regardless of their names.

B. Types must have the exact same name to be compatible.

C. Types are only compatible if they come from the same class.

D. Types are checked only at runtime for compatibility.

Solution

1. Step 1: Understand structural typing concept

   Structural typing means compatibility depends on the shape (properties and types) of objects, not their names.

2. Step 2: Compare with nominal typing

   Nominal typing requires exact type names or declarations to match, which is not how TypeScript works by default.

3. Final Answer:

   Types are compatible if their properties and types match, regardless of their names. -> Option A

4. Quick Check:

   Structural typing = shape-based compatibility [OK]

Hint: Think about shape, not names, for structural typing [OK]

Common Mistakes:

• Confusing structural typing with nominal typing
• Thinking type names must match for compatibility
• Assuming runtime checks for type compatibility

2. Which TypeScript code snippet correctly demonstrates structural typing compatibility?

easy

A. const a: {name: string} = {name: 'Alice'}; const b: {name: string} = a;

B. class A {} class B extends A {} const a: A = new B();

C. type A = {id: number}; type B = {name: string}; const a: A = {id: 1}; const b: B = a;

D. interface A {name: string;} interface B {name: number;} const a: A = {name: 'Bob'}; const b: B = a;

Solution

1. Step 1: Check property shapes for compatibility

   const a: {name: string} = {name: 'Alice'}; const b: {name: string} = a; assigns an object with a matching property name: string to another variable with the same shape, which is allowed.

2. Step 2: Analyze other options for incompatibility

   A mismatches properties (id vs name), B uses classes (nominal typing), D mismatches property types.

3. Final Answer:

   const a: {name: string} = {name: 'Alice'}; const b: {name: string} = a; -> Option A

4. Quick Check:

   Matching shapes = compatible [OK]

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

Common Mistakes:

• Assuming different property names are compatible
• Ignoring property type mismatches
• Confusing class inheritance with structural typing

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

interface Point { x: number; y: number; }
interface Named { name: string; }

const p: Point = { x: 10, y: 20 };
const n: Named = { name: 'Origin' };

function printPoint(point: Point) {
  console.log(`x=${point.x}, y=${point.y}`);
}

printPoint(p);
printPoint(n as unknown as Point);

medium

A. x=10, y=20
x=0, y=0

B. x=10, y=20
x=undefined, y=undefined

C. x=10, y=20
x=Origin, y=undefined

D. Type error at compile time

Solution

1. Step 1: Understand structural typing and casting

   The object p matches Point shape, so printPoint(p) prints x=10, y=20. The object n does not have x or y, but is forced cast to Point.

2. Step 2: Predict output for forced cast

   At runtime, n lacks x and y, so accessing them prints undefined.

3. Final Answer:

   x=10, y=20 x=undefined, y=undefined -> Option B

4. Quick Check:

   Forced cast ignores shape, runtime undefined properties [OK]

Hint: Casting doesn't add missing properties, they stay undefined [OK]

Common Mistakes:

• Expecting runtime type errors
• Assuming cast adds missing properties
• Confusing property names with values

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

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

const a: A = { id: 1 };
const b: B = a;

medium

A. Error because interfaces cannot be assigned to each other.

B. Error because a and b have different interface names.

C. No error, assignment is allowed due to structural typing.

D. Error because a lacks property name required by B.

Solution

1. Step 1: Check property requirements for assignment

   Variable b expects an object with id and name. Variable a only has id.

2. Step 2: Understand structural typing rules

   Structural typing requires the assigned object to have at least the required properties. Here, a is missing name, so assignment fails.

3. Final Answer:

   Error because a lacks property name required by B. -> Option D

4. Quick Check:

   Missing required properties cause assignment error [OK]

Hint: Check all required properties exist before assignment [OK]

Common Mistakes:

• Ignoring missing properties in assignment
• Thinking interface names must match for compatibility
• Assuming partial property match is enough

5. Given these TypeScript classes, which assignment is allowed due to structural typing?

class Person { name: string; constructor(name: string) { this.name = name; } }
class Employee { name: string; salary: number; constructor(name: string, salary: number) { this.name = name; this.salary = salary; } }

let p: Person = new Person('Alice');
let e: Employee = new Employee('Bob', 50000);

// Which assignment is valid?
// 1) p = e;
// 2) e = p;

hard

A. Both assignments are allowed due to structural typing.

B. Only assignment 2) e = p; is allowed because Person has all Employee properties.

C. Only assignment 1) p = e; is allowed because Employee has all Person properties.

D. Neither assignment is allowed because classes use nominal typing.

Solution

1. Step 1: Compare properties of Person and Employee

   Person has name. Employee has name and salary. Employee has all Person properties plus more.

2. Step 2: Apply structural typing rules for assignment

   Assigning e (Employee) to p (Person) is allowed because e has at least the properties of p. The reverse is not allowed because p lacks salary.

3. Final Answer:

   Only assignment 1) p = e; is allowed because Employee has all Person properties. -> Option C

4. Quick Check:

   Subtype with extra properties can assign to supertype [OK]

Hint: Assign subtype to supertype, not vice versa [OK]

Common Mistakes:

• Assuming both assignments are allowed
• Confusing nominal typing with structural typing here
• Ignoring extra properties in assignment compatibility