What structural typing means in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Structural Typing in TypeScript

Which statement best describes what structural typing means in TypeScript?

A Types are compatible if their structures (properties and methods) match, regardless of explicit declarations.

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

C Type compatibility depends on inheritance hierarchy only.

D Types are checked only at runtime, not during compilation.

💡 Hint

Think about how TypeScript compares objects based on their shape, not their names.

Structural typing means that TypeScript checks if types have the same shape (properties and methods) to decide compatibility, ignoring explicit names or inheritance.

❓ Predict Output

intermediate

Output of Structural Typing Example

What is the output of this TypeScript code?

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 Runtime error: Property 'x' is undefined.

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 x: 10, y: 20, z: 30

💡 Hint

Remember TypeScript allows extra properties when passing objects if required properties exist.

The object has at least the properties x and y required by Point, so it is accepted. Extra properties like z are ignored.

🔧 Debug

advanced

Why does this TypeScript code cause an error?

Consider this code snippet. Why does it cause a TypeScript error?

Typescript

interface Animal { name: string; }
interface Dog extends Animal { bark(): void; }

function makeAnimalBark(animal: Dog) {
  animal.bark();
}

const myAnimal = { name: 'Buddy' };
makeAnimalBark(myAnimal);

A No error; structural typing allows this call.

B Error because 'myAnimal' has extra properties not in 'Dog'.

C Error because 'myAnimal' lacks the 'bark' method required by 'Dog'.

D Error because 'Animal' and 'Dog' are unrelated types.

💡 Hint

Check if the object passed has all required properties and methods.

Structural typing requires the object to have all properties and methods of the target type. 'myAnimal' lacks 'bark', so it causes an error.

📝 Syntax

advanced

Which TypeScript code correctly demonstrates structural typing?

Choose the code snippet that correctly uses structural typing to assign one object to another type.

A

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

B

type A = { id: number };
type B = { id: number; name: string };
const b: B = { id: 1, name: 'Test' };
const a: A = b;

C

interface A { id: number; }
interface B { id: number; name: string; }
const a: A = { id: 1 };
const b: B = a;

D

interface A { id: number; }
interface B { id: number; name: string; }
const b: B = { id: 1, name: 'Test' };
const a: A = b;

💡 Hint

Remember that a type with more properties can be assigned to a type with fewer properties if the required ones match.

Option D assigns a bigger type (B) to a smaller type (A), which is allowed by structural typing. Other options either assign smaller to bigger or have errors.

🚀 Application

expert

Predict the output of this structural typing example with functions

What will be the output when running this TypeScript code?

Typescript

type FuncA = (x: number) => number;
type FuncB = (x: number, y: number) => number;

const f1: FuncA = (x) => x * 2;
const f2: FuncB = (x, y) => x + y;

const test1: FuncA = f2;
const test2: FuncB = f1;

console.log(test1(5));
console.log(test2(5, 10));

A Type error at compile time assigning f1 to FuncB.

B

10
TypeError at runtime because test2 expects two arguments but f1 only uses one.

C Type error at compile time assigning f2 to FuncA.

D

10
15

💡 Hint

Think about function parameter compatibility in structural typing.

In TypeScript, a function with fewer parameters can be assigned to a type expecting more parameters, but not vice versa. Assigning f1 (one param) to FuncB (two params) causes a compile error.

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