How structural typing differs from nominal typing in Typescript - Practice Exercises

Challenge - 5 Problems

❓ Predict Output

intermediate

Output of structural typing example

What is the output of this TypeScript code using structural typing?

Typescript

interface Point { x: number; y: number; }

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

const pointLike = { x: 10, y: 20, z: 30 };
printPoint(pointLike);

A x: 10, y: 20, z: 30

B x: 10, y: 20

C Type error: Argument of type '{ x: number; y: number; z: number; }' is not assignable to parameter of type 'Point'.

D Runtime error: Property 'x' is undefined

💡 Hint

Think about how TypeScript checks object shapes rather than exact types.

TypeScript uses structural typing, so extra properties like z do not cause errors if required properties exist.

❓ Predict Output

intermediate

Nominal typing behavior in TypeScript with classes

What is the output or error of this TypeScript code using nominal typing with classes?

Typescript

class User {
  constructor(public name: string) {}
}

class Admin {
  constructor(public name: string) {}
}

function greet(user: User) {
  console.log(`Hello, ${user.name}`);
}

const admin = new Admin('Alice');
greet(admin);

A Runtime error: Property 'name' is undefined

B Hello, undefined

C Hello, Alice

D Type error: Argument of type 'Admin' is not assignable to parameter of type 'User'.

💡 Hint

Consider how classes create nominal types in TypeScript.

Classes in TypeScript create nominal types, so an instance of Admin is not assignable to User even if they have the same properties.

🔧 Debug

advanced

Identify the error caused by nominal typing

Why does this TypeScript code cause a type error?

Typescript

class Car {
  constructor(public model: string) {}
}

class Truck {
  constructor(public model: string) {}
}

function showModel(vehicle: Car) {
  console.log(vehicle.model);
}

const myTruck = new Truck('Ford');
showModel(myTruck);

A Because myTruck is undefined.

B Because Truck does not have a model property.

C Because showModel expects a string, not an object.

D Because Truck and Car are different nominal types, myTruck cannot be passed to showModel.

💡 Hint

Think about how TypeScript treats class instances as distinct types.

Even though Truck and Car have the same properties, their class types are nominal and incompatible.

🧠 Conceptual

advanced

Key difference between structural and nominal typing

Which statement best describes the key difference between structural typing and nominal typing?

A Structural typing checks if types have the same shape; nominal typing checks if types have the same name.

B Structural typing requires explicit inheritance; nominal typing does not.

C Nominal typing allows more flexible type assignments than structural typing.

D Nominal typing ignores property names and only checks values.

💡 Hint

Think about how types are compared in each system.

Structural typing compares the shape (properties) of types, while nominal typing compares their declared names or identities.

❓ Predict Output

expert

Output of mixed structural and nominal typing example

What is the output of this TypeScript code that mixes structural and nominal typing?

Typescript

interface Animal {
  name: string;
}

class Dog implements Animal {
  constructor(public name: string) {}
}

class Cat {
  constructor(public name: string) {}
}

function printName(a: Animal) {
  console.log(a.name);
}

const dog = new Dog('Buddy');
const cat = new Cat('Whiskers');
printName(dog);
printName(cat);

A Buddy\nWhiskers

B Buddy\nType error: Argument of type 'Cat' is not assignable to parameter of type 'Animal'.

C Type error: Dog is not assignable to Animal.

D Runtime error: Property 'name' is undefined

💡 Hint

Consider how interfaces and classes interact in TypeScript's structural typing.

TypeScript uses structural typing for interfaces, so Cat matches Animal by shape even without explicit implementation.

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