Duck typing mental model in TypeScript - Mini Project: Build & Apply

Duck typing mental model in TypeScript

📖 Scenario: Imagine you are building a simple system to check if different objects can be treated as a bird based on their behavior, not their exact type. This is like recognizing a bird by its ability to quack and fly, even if it is not a real bird.

🎯 Goal: You will create objects with different properties and use TypeScript's duck typing to check if they can be treated as birds by having the right methods. You will then print messages confirming which objects behave like birds.

📋 What You'll Learn

Create two objects with different properties but both have quack and fly methods.

Create a type alias called Bird that requires quack and fly methods.

Write a function called makeItFly that accepts a parameter of type Bird and calls its quack and fly methods.

Call makeItFly with both objects and print the results.

💡 Why This Matters

🌍 Real World

Duck typing helps in real-world programming when you want to use objects that behave the same way without forcing them to share a class or inheritance.

💼 Career

Understanding duck typing is important for TypeScript developers to write flexible and reusable code that works with different objects sharing the same behavior.

1

Create two objects with quack and fly methods

Create two objects called duck and toyDuck. Both should have a quack method that returns the string "Quack!" and a fly method that returns the string "Flying!". The duck object should also have a property isReal set to true. The toyDuck object should have a property material set to "plastic".

Typescript

# Your code here

Hint

Remember to create two objects with the exact names duck and toyDuck. Both need quack and fly methods returning the exact strings.

2

Create a Bird type alias

Create a type alias called Bird that requires two methods: quack and fly. Both methods should return a string.

Typescript

const duck = {
    isReal: true,
    quack: () => "Quack!",
    fly: () => "Flying!"
};

const toyDuck = {
    material: "plastic",
    quack: () => "Quack!",
    fly: () => "Flying!"
};

// Your code here

Hint

Use type Bird = { quack: () => string; fly: () => string; } exactly.

3

Write a function that accepts Bird type

Write a function called makeItFly that accepts one parameter called bird of type Bird. Inside the function, call bird.quack() and bird.fly() and return a string combining both results separated by a space.

Typescript

const duck = {
    isReal: true,
    quack: () => "Quack!",
    fly: () => "Flying!"
};

const toyDuck = {
    material: "plastic",
    quack: () => "Quack!",
    fly: () => "Flying!"
};

type Bird = {
    quack: () => string;
    fly: () => string;
};

// Your code here

Hint

Define makeItFly with parameter bird: Bird and return the combined string.

4

Call makeItFly with both objects and print results

Call makeItFly with duck and print the result using console.log. Then call makeItFly with toyDuck and print the result using console.log.

Typescript

const duck = {
    isReal: true,
    quack: () => "Quack!",
    fly: () => "Flying!"
};

const toyDuck = {
    material: "plastic",
    quack: () => "Quack!",
    fly: () => "Flying!"
};

type Bird = {
    quack: () => string;
    fly: () => string;
};

function makeItFly(bird: Bird): string {
    return bird.quack() + " " + bird.fly();
}

// Your code here

Hint

Use console.log(makeItFly(duck)) and console.log(makeItFly(toyDuck)) to print the results.

Practice

1. What does duck typing mean in TypeScript?

easy

A. Only objects created from the same class are compatible.

B. If an object has the required properties or methods, it is accepted regardless of its explicit type.

C. TypeScript requires explicit class inheritance to match types.

D. TypeScript checks the runtime type of objects strictly.

Solution

1. Step 1: Understand duck typing concept

   Duck typing means an object is accepted if it has the needed properties or methods, regardless of its declared type.

2. Step 2: Compare with other options

   The other options describe strict or class-based typing, which is not how TypeScript works.

3. Final Answer:

   If an object has the required properties or methods, it is accepted regardless of its explicit type. -> Option B

4. Quick Check:

   Duck typing = structural compatibility [OK]

Hint: Focus on properties, not explicit types, for duck typing [OK]

Common Mistakes:

• Thinking TypeScript requires class inheritance
• Confusing runtime type checks with compile-time checks
• Assuming exact type names must match

2. Which of the following is a correct TypeScript syntax to define a type that matches any object with a name string property and a quack() method returning void?

easy

A. type Duck = { name: string; quack: () => void; };

B. interface Duck { name: string; quack: void; }

C. type Duck = { name: string; quack(): string; };

D. interface Duck { name: string; quack: () => string; }

Solution

1. Step 1: Check property and method types

   The name property must be a string, and quack must be a method returning void.

2. Step 2: Validate each option

   type Duck = { name: string; quack: () => void; }; correctly defines quack as a function returning void. The other options have incorrect method signatures or return types.

3. Final Answer:

   type Duck = { name: string; quack: () => void; }; -> Option A

4. Quick Check:

   Correct method signature = type Duck = { name: string; quack: () => void; }; [OK]

Hint: Method type must be a function signature with correct return type [OK]

Common Mistakes:

• Using method return type as property type
• Confusing void and string return types
• Incorrect interface method syntax

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

interface Duck { name: string; quack: () => void; }

function makeItQuack(duck: Duck) {
  duck.quack();
}

const obj = { name: 'Daffy', quack: () => console.log('Quack!'), swim: () => console.log('Swim') };
makeItQuack(obj);

medium

A. No output

B. Swim

C. Error: obj does not match Duck interface

D. Quack!

Solution

1. Step 1: Check if obj matches Duck interface

   obj has name (string) and quack (function returning void), so it matches by duck typing.

2. Step 2: Call makeItQuack with obj

   Calling duck.quack() runs console.log('Quack!'), printing "Quack!".

3. Final Answer:

   Quack! -> Option D

4. Quick Check:

   Duck typing allows extra properties, output = Quack! [OK]

Hint: Extra properties don't block duck typing; focus on required ones [OK]

Common Mistakes:

• Thinking extra properties cause errors
• Expecting 'Swim' output instead of 'Quack!'
• Assuming runtime type errors

4. Identify the error in this TypeScript code using duck typing:

interface Duck { name: string; quack: () => void; }

const notADuck = { name: 'Donald' };

function makeItQuack(duck: Duck) {
  duck.quack();
}

makeItQuack(notADuck);

medium

A. notADuck is missing the quack method required by Duck interface.

B. The name property should be a number, not a string.

C. makeItQuack should accept any object without type restrictions.

D. There is no error; code runs fine.

Solution

1. Step 1: Check properties of notADuck

   notADuck has name but lacks quack method required by Duck interface.

2. Step 2: Understand TypeScript type checking

   TypeScript will report an error because notADuck does not satisfy the Duck type.

3. Final Answer:

   notADuck is missing the quack method required by Duck interface. -> Option A

4. Quick Check:

   Missing required method = Type error [OK]

Hint: Check all required properties/methods exist for the type [OK]

Common Mistakes:

• Ignoring missing methods in objects
• Assuming extra properties cause errors
• Thinking TypeScript allows missing required members

5. Given this code, which object will TypeScript accept as a valid Duck type?

interface Duck { name: string; quack: () => void; }

const a = { name: 'Daisy', quack: () => console.log('Quack!') };
const b = { name: 'Goose', quack: 'loud' };
const c = { name: 'Swan', quack: () => 'quack' };
const d = { name: 'Mallard' };

function testDuck(duck: Duck) { duck.quack(); }

Which call to testDuck will NOT cause a TypeScript error?

hard

A. testDuck(c);

B. testDuck(b);

C. testDuck(a);

D. testDuck(d);

Solution

1. Step 1: Check each object's quack property type

   a.quack is a function returning void (correct). b.quack is a string (wrong). c.quack is a function returning string (wrong return type). d.quack is missing (wrong).

2. Step 2: Determine which matches Duck interface

   Only object a matches the Duck interface exactly.

3. Final Answer:

   testDuck(a); -> Option C

4. Quick Check:

   Correct method signature only in a [OK]

Hint: Method must be function returning void to match Duck [OK]

Common Mistakes:

• Accepting string or wrong return type as method
• Ignoring missing methods
• Confusing method return types