Duck typing mental model in TypeScript - Step-by-Step Execution

Concept Flow - Duck typing mental model in TypeScript

Start with an object

↓

Check if object has required properties

Yes↓

Treat object as that type

↓

Use object with expected methods/properties

↓

End

Duck typing means if an object has the right properties, TypeScript treats it as that type without explicit inheritance.

Execution Sample

Typescript

interface Quackable {
  quack(): void;
}

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

const duck = { quack: () => console.log('Quack!') };
makeItQuack(duck);

This code shows that an object with a quack method can be used where Quackable is expected.

Execution Table

Step	Action	Object Properties Checked	Result	Output
1	Call makeItQuack with duck	duck has quack method	Passes type check
2	Inside makeItQuack, call obj.quack()	N/A	Method called	Quack!
3	Function ends	N/A	Execution complete

💡 Function ends after calling quack method on object that matches interface shape

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
duck	{ quack: function }	{ quack: function }	{ quack: function }	{ quack: function }
obj	undefined	{ quack: function }	{ quack: function }	{ quack: function }

Key Moments - 2 Insights

Why does TypeScript accept the duck object without explicitly implementing Quackable?

Because TypeScript uses duck typing, it checks if the object has the required properties (here, quack method) rather than requiring explicit interface implementation, as shown in execution_table step 1.

What happens if the object lacks the quack method?

TypeScript will give a type error at the call site because the object does not match the expected shape, preventing the function call, unlike the successful call shown in execution_table step 1.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 2?

A No output

B Quack!

C Error: quack is not a function

D undefined

💡 Hint

Check the Output column at step 2 in the execution_table.

At which step does TypeScript confirm the object matches the expected type?

A Step 1

B Step 2

C Step 3

D Before Step 1

💡 Hint

Look at the Result column in execution_table step 1.

If the duck object lacked the quack method, what would change in the execution table?

A Step 3 would be skipped but step 2 runs

B Step 2 would output 'Quack!' anyway

C Step 1 would show a type error and no further steps occur

D No change, code runs as normal

💡 Hint

Refer to key_moments about missing properties causing type errors before function execution.

Concept Snapshot

Duck typing in TypeScript means an object is accepted if it has the required properties.
No need for explicit interface implementation.
TypeScript checks shape, not inheritance.
If object matches shape, it can be used as that type.
Missing properties cause type errors at compile time.

Full Transcript

Duck typing in TypeScript means that if an object has the right properties and methods, TypeScript treats it as that type without needing explicit inheritance or interface implementation. In the example, the function makeItQuack expects an object with a quack method. The duck object has a quack method, so TypeScript allows it. When makeItQuack is called with duck, it calls duck.quack(), which prints 'Quack!'. If the object did not have the quack method, TypeScript would give a type error before running the code. This shows how TypeScript uses the shape of objects to check types, not their explicit declarations.