Implementing interfaces in classes in Typescript - Step-by-Step Execution

Concept Flow - Implementing interfaces in classes

Define Interface

↓

Create Class

↓

Implement Interface in Class

↓

Add Required Properties/Methods

↓

Create Class Instance

↓

Use Instance with Interface Contract

This flow shows how a class follows a blueprint (interface) by adding required parts, then creating and using an instance.

Execution Sample

Typescript

interface Animal {
  name: string;
  makeSound(): void;
}

class Dog implements Animal {
  name: string = "Buddy";
  makeSound() { console.log("Woof!"); }
}

const pet = new Dog();
pet.makeSound();

Defines an interface Animal, a class Dog that follows it, then creates a Dog and calls its sound.

Execution Table

Step	Action	Evaluation	Result
1	Define interface Animal with name and makeSound()	Interface created	Animal interface ready
2	Create class Dog implementing Animal	Class Dog must have name and makeSound()	Dog class created with interface contract
3	Set Dog.name = "Buddy"	Property assigned	Dog.name = "Buddy"
4	Define Dog.makeSound() to print "Woof!"	Method assigned	Dog.makeSound() ready
5	Create instance pet = new Dog()	Object created	pet is Dog with name "Buddy"
6	Call pet.makeSound()	Execute method	Output: Woof!
7	End of program	No more actions	Execution stops

💡 Program ends after calling makeSound() on pet instance

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
Dog.name	undefined	"Buddy"	"Buddy"	"Buddy"
pet	undefined	undefined	Dog instance	Dog instance

Key Moments - 3 Insights

Why does the class Dog have to include both name and makeSound()?

Because Dog implements the Animal interface, it must have all properties and methods defined in Animal, as shown in execution_table steps 2-4.

What happens if Dog does not implement makeSound()?

TypeScript will give an error at step 2 because the class does not fulfill the interface contract.

Why can we call pet.makeSound() without errors?

Because pet is an instance of Dog which implements Animal, so makeSound() is guaranteed to exist (see execution_table step 6).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of Dog.name after step 3?

A "Buddy"

B undefined

C null

D "Dog"

💡 Hint

Check the variable_tracker row for Dog.name at After Step 3

At which step is the pet instance created?

A Step 6

B Step 3

C Step 5

D Step 2

💡 Hint

Look at execution_table step descriptions for object creation

If Dog did not implement makeSound(), what would happen?

A Program runs normally

B TypeScript error at class definition

C Error only when calling makeSound()

D No error, but makeSound() prints nothing

💡 Hint

Refer to key_moments about interface contract enforcement

Concept Snapshot

interface InterfaceName {
  property: type;
  method(): returnType;
}

class ClassName implements InterfaceName {
  property = value;
  method() { /* code */ }
}

- Class must have all interface members.
- Ensures consistent structure.
- Use instances to access implemented members.

Full Transcript

This example shows how to use interfaces in TypeScript. First, we define an interface Animal with a name and a makeSound method. Then, we create a class Dog that implements Animal, so it must have a name property and a makeSound method. We assign the name "Buddy" and define makeSound to print "Woof!". Next, we create an instance pet of Dog and call pet.makeSound(), which outputs "Woof!". The execution table traces each step, showing how the class follows the interface contract and how the instance behaves. The variable tracker shows how Dog.name and pet change during execution. Key moments clarify why the class must implement all interface members and what happens if it doesn't. The quiz tests understanding of variable values, instance creation, and interface enforcement. The snapshot summarizes the syntax and rules for implementing interfaces in classes.