What structural typing means in Typescript - Mini Project: Build & Apply

What structural typing means

📖 Scenario: Imagine you are building a simple system where you want to check if different objects can be used in the same way based on their shape, not their exact type name.

🎯 Goal: You will create objects and functions to see how TypeScript uses structural typing to allow objects with the same shape to be used interchangeably.

📋 What You'll Learn

Create an interface called Person with properties name (string) and age (number).

Create an object called user that matches the Person interface exactly.

Create another object called employee that has the same properties as Person plus an extra property salary (number).

Write a function called greet that takes a parameter of type Person and returns a greeting string using the name property.

Call greet with both user and employee and print the results.

💡 Why This Matters

🌍 Real World

Structural typing helps when working with data from different sources that share common properties, like user profiles or API responses.

💼 Career

Understanding structural typing is key for TypeScript developers to write flexible and type-safe code that integrates well with various libraries and data shapes.

1

Create the Person interface and user object

Create an interface called Person with properties name (string) and age (number). Then create an object called user with name set to "Alice" and age set to 30.

Typescript

// Your code here

Hint

Use interface to define the shape. Then create user with the exact properties.

2

Create the employee object with extra property

Create an object called employee with properties name set to "Bob", age set to 40, and an extra property salary set to 50000. Do not declare employee as type Person explicitly.

Typescript

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Alice",
  age: 30
};

// Your code here

Hint

Create employee as a plain object with the extra salary property.

3

Write the greet function using Person

Write a function called greet that takes one parameter called person of type Person and returns a string greeting like "Hello, Alice!" using the name property.

Typescript

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Alice",
  age: 30
};

const employee = {
  name: "Bob",
  age: 40,
  salary: 50000
};

// Your code here

Hint

Use a template string to include the name in the greeting.

4

Call greet with user and employee and print results

Call the function greet with the user object and print the result. Then call greet with the employee object and print the result.

Typescript

interface Person {
  name: string;
  age: number;
}

const user: Person = {
  name: "Alice",
  age: 30
};

const employee = {
  name: "Bob",
  age: 40,
  salary: 50000
};

function greet(person: Person): string {
  return `Hello, ${person.name}!`;
}

// Your code here

Hint

Use console.log to print the greetings for both objects.

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