TypeScript - Duck Typing: A Beginner's Guide

Hello there, future coding superstars! Today, we're going to dive into the wonderful world of TypeScript and explore a concept that's as fun as it sounds - Duck Typing. Don't worry if you're new to programming; I'll guide you through this journey step by step, just like I've done for countless students over my years of teaching. So, let's get quacking!

What is Duck Typing?

Imagine you're at a pond, and you see a bird swimming. It looks like a duck, it quacks like a duck, and it swims like a duck. What would you call it? A duck, right? Well, that's the essence of Duck Typing in programming!

Duck Typing is a concept that says, "If it walks like a duck and quacks like a duck, then it must be a duck." In programming terms, it means that the type or class of an object is less important than the methods it defines or the properties it has.

Let me share a little story from my teaching days. I once had a student who was struggling with understanding types in programming. I asked her to think about her pencil case. It didn't matter if it was made of plastic, metal, or fabric - as long as it could hold her pens and pencils, it was doing its job as a pencil case. That's Duck Typing in action!

How Duck Typing Works in TypeScript

In TypeScript, Duck Typing allows us to use an object as if it were of a certain type, as long as it has all the required properties and methods of that type. It's like saying, "If it has all the features I need, I don't care what it calls itself!"

Let's look at a simple example:

interface Quackable {
    quack(): void;
}

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

let rubberDuck = {
    quack: () => console.log("Squeak! Squeak!")
};

let realDuck = {
    quack: () => console.log("Quack! Quack!"),
    swim: () => console.log("Splash! Splash!")
};

makeItQuack(rubberDuck); // Output: Squeak! Squeak!
makeItQuack(realDuck);   // Output: Quack! Quack!

In this example, we have a Quackable interface that requires a quack method. Our makeItQuack function accepts any object that matches this interface. Both rubberDuck and realDuck have a quack method, so they can both be used with makeItQuack, even though realDuck has an additional swim method.

Benefits of Duck Typing

Now that we understand what Duck Typing is, let's explore why it's so awesome! Here are some key benefits:

1. Flexibility

Duck Typing allows for more flexible code. You don't need to create a strict hierarchy of classes to use objects in a similar way. As long as an object has the required methods or properties, it can be used interchangeably.

2. Code Reusability

With Duck Typing, you can write functions that work with a wide range of objects, as long as they have the necessary properties or methods. This promotes code reuse and can make your codebase more efficient.

3. Easier Testing

Duck Typing makes it easier to create mock objects for testing. You only need to implement the methods that are actually used in the test, rather than creating a full implementation of a class.

4. Intuitive Design

Duck Typing often leads to more intuitive API designs. You focus on what an object can do, rather than what it is labeled as.

Examples of Duck Typing in TypeScript

Let's dive into some more examples to really cement our understanding of Duck Typing in TypeScript.

Example 1: The Shape-Shifter

interface Drawable {
    draw(): void;
}

class Circle {
    draw() {
        console.log("Drawing a circle");
    }
}

class Square {
    draw() {
        console.log("Drawing a square");
    }
}

function drawShape(shape: Drawable) {
    shape.draw();
}

drawShape(new Circle()); // Output: Drawing a circle
drawShape(new Square()); // Output: Drawing a square

In this example, Circle and Square are different classes, but both have a draw method. The drawShape function doesn't care about the specific class of the object it receives; it only cares that the object has a draw method.

Example 2: The Noise Makers

interface NoiseMaker {
    makeNoise(): string;
}

let dog = {
    makeNoise: () => "Woof!"
};

let cat = {
    makeNoise: () => "Meow!",
    purr: () => "Purr..."
};

let car = {
    makeNoise: () => "Vroom!",
    drive: () => console.log("Driving...")
};

function makeNoise(thing: NoiseMaker) {
    console.log(thing.makeNoise());
}

makeNoise(dog); // Output: Woof!
makeNoise(cat); // Output: Meow!
makeNoise(car); // Output: Vroom!

Here, we have different objects - a dog, a cat, and even a car! They all have a makeNoise method, so they can all be used with the makeNoise function, even though they're very different things.

Example 3: The Fly-Swimmer

interface Flyable {
    fly(): void;
}

interface Swimmable {
    swim(): void;
}

class Duck implements Flyable, Swimmable {
    fly() {
        console.log("Duck is flying");
    }
    swim() {
        console.log("Duck is swimming");
    }
}

class Airplane implements Flyable {
    fly() {
        console.log("Airplane is flying");
    }
}

class Fish implements Swimmable {
    swim() {
        console.log("Fish is swimming");
    }
}

function makeFly(flyer: Flyable) {
    flyer.fly();
}

function makeSwim(swimmer: Swimmable) {
    swimmer.swim();
}

let duck = new Duck();
let airplane = new Airplane();
let fish = new Fish();

makeFly(duck);     // Output: Duck is flying
makeFly(airplane); // Output: Airplane is flying
makeSwim(duck);    // Output: Duck is swimming
makeSwim(fish);    // Output: Fish is swimming

In this example, we have different classes implementing different interfaces. The Duck class implements both Flyable and Swimmable interfaces, so it can be used with both makeFly and makeSwim functions.

Conclusion

And there you have it, folks! We've waddled our way through the basics of Duck Typing in TypeScript. Remember, the key takeaway is this: in Duck Typing, we care more about what an object can do (its methods and properties) rather than what it is (its type or class).

Duck Typing allows us to write more flexible, reusable, and intuitive code. It's a powerful concept that can make your TypeScript code more elegant and efficient.

As you continue your programming journey, keep an eye out for opportunities to apply Duck Typing. And remember, if it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck... or at least, it can be treated like one in your code!

Happy coding, and may your code always quack... I mean, work perfectly!

Method	Description
quack()	Makes a quacking sound
draw()	Draws a shape
makeNoise()	Produces a noise
fly()	Allows an object to fly
swim()	Allows an object to swim

Credits: Image by storyset