Merging classes with interfaces in Typescript - Step-by-Step Execution

Concept Flow - Merging classes with interfaces

Define class

↓

Define interface with same name

↓

TypeScript merges interface into class type

↓

Class instances have combined type

↓

Use merged properties and methods

TypeScript merges an interface with the same name as a class, combining their types so class instances have all properties and methods.

Execution Sample

Typescript

class User {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
interface User {
  age: number;
}

Defines a class User and an interface User with an extra property; TypeScript merges them so User instances have both.

Execution Table

Step	Action	Evaluation	Result
1	Define class User with property name and constructor	Class User created	User has property 'name' and constructor
2	Define interface User with property age	Interface User created	Interface User has property 'age'
3	TypeScript merges interface User into class User type	Merged type includes 'name' and 'age'	User type now has properties 'name' and 'age'
4	Create instance: const u = new User('Alice')	Instance u created	u.name = 'Alice', u.age is undefined (needs assignment)
5	Assign u.age = 30	Property age assigned	u.age = 30
6	Access u.name and u.age	Read properties	Outputs: name='Alice', age=30
7	End of example	No more steps	Execution stops

💡 All steps executed; merged class and interface types combined successfully

Variable Tracker

Variable	Start	After Step 4	After Step 5	Final
u.name	undefined	'Alice'	'Alice'	'Alice'
u.age	undefined	undefined	30	30

Key Moments - 2 Insights

Why does the instance 'u' not have 'age' immediately after creation?

Because the class constructor only sets 'name'. The 'age' property comes from the merged interface and must be assigned separately, as shown in step 5.

How does TypeScript know to merge the interface with the class?

TypeScript merges declarations with the same name automatically, combining their types into one, as seen in step 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'u.age' after step 4?

A undefined

B 30

C 0

D 'Alice'

💡 Hint

Check the variable_tracker column 'After Step 4' for 'u.age'

At which step does 'u.age' get assigned a value?

A Step 3

B Step 5

C Step 4

D Step 6

💡 Hint

Look at the execution_table row describing property assignment

If the interface 'User' had a method instead of a property, what would happen?

A The method would be ignored

B The class would automatically have the method implementation

C TypeScript would merge the method signature, but class must implement it

D The code would cause a runtime error

💡 Hint

Recall that interfaces add type info but do not provide implementations

Concept Snapshot

Merging classes with interfaces in TypeScript:
- Define a class and an interface with the same name.
- TypeScript merges their types automatically.
- Class instances have combined properties.
- Interface adds type info; class provides implementation.
- Properties from interface must be assigned if not in constructor.

Full Transcript

This example shows how TypeScript merges a class and an interface with the same name. First, a class User is defined with a name property and constructor. Then, an interface User is defined with an age property. TypeScript merges these so the User type has both name and age. When creating an instance u of User, only name is set by the constructor. The age property must be assigned separately. This merging allows extending class types with interfaces for flexible typing.

Practice

1.

What happens when you declare an interface with the same name as a class in TypeScript?

For example:
class Car { drive() {} }
interface Car { color: string; }

easy

A. The interface replaces the class completely.

B. The interface merges with the class, adding the 'color' property to the class type.

C. TypeScript throws a syntax error because names conflict.

D. The class ignores the interface and remains unchanged.

Solution

1. Step 1: Understand interface and class merging

   In TypeScript, if an interface has the same name as a class, their types merge. This means the class type now includes members from both.

2. Step 2: Apply to example

   The interface adds a 'color' property to the class type, so instances of Car are expected to have 'drive()' and 'color'.

3. Final Answer:

   The interface merges with the class, adding the 'color' property to the class type. -> Option B

4. Quick Check:

   Same name interface + class = merged type [OK]

Hint: Same name means interface merges into class type [OK]

Common Mistakes:

• Thinking interface replaces class
• Expecting a syntax error
• Assuming class ignores interface

2.

Which of the following is the correct syntax to merge an interface with a class named Person in TypeScript?

easy

A. interface Person { age: number; }

B. interface Person() { age: number; }

C. interface Person[] { age: number; }

D. interface Person = { age: number; }

Solution

1. Step 1: Recall interface declaration syntax

   Interfaces are declared with the keyword 'interface' followed by the name and curly braces containing members.

2. Step 2: Check each option

   interface Person { age: number; } uses correct syntax: 'interface Person { age: number; }'. Options A, C, and D use invalid syntax like parentheses, brackets, or equals sign.

3. Final Answer:

   interface Person { age: number; } -> Option A

4. Quick Check:

   Correct interface syntax = interface Person { age: number; } [OK]

Hint: Interfaces use curly braces, no parentheses or equals [OK]

Common Mistakes:

• Using parentheses after interface name
• Using brackets instead of braces
• Assigning interface with equals sign

3.

Given the following code, what is the output?

class Animal {
  speak() { return "Roar"; }
}
interface Animal {
  age: number;
}

const a: Animal = { age: 5, speak() { return "Roar"; } };
console.log(a.age, a.speak());

medium

A. Runtime error

B. undefined Roar

C. 5 undefined

D. 5 Roar

Solution

1. Step 1: Understand merging and object literal

   The interface adds 'age' to Animal type. The object 'a' has both 'age' and 'speak' method matching Animal type.

2. Step 2: Check console.log output

   Logging 'a.age' prints 5, and 'a.speak()' returns "Roar". So output is '5 Roar'.

3. Final Answer:

   5 Roar -> Option D

4. Quick Check:

   Object has both properties, prints values [OK]

Hint: Merged type means object must have all members [OK]

Common Mistakes:

• Expecting undefined for age
• Confusing method call with property
• Thinking runtime error occurs

4.

Identify the error in this code that merges a class and interface named Book:

class Book {
  title: string;
  constructor(title: string) {
    this.title = title;
  }
}
interface Book {
  author: string;
}

const b = new Book("1984");
console.log(b.author);

medium

A. Constructor syntax is invalid.

B. Class and interface names must differ to merge.

C. Property 'author' is missing in class implementation causing runtime error.

D. No error; code runs fine.

Solution

1. Step 1: Check merging requirements

   The interface adds 'author' property to Book type, but the class does not implement it or assign it.

2. Step 2: Analyze runtime behavior

   Creating 'b' with new Book("1984") sets 'title' but 'author' is undefined. Accessing 'b.author' prints undefined, which may cause issues if expected to exist.

3. Final Answer:

   Property 'author' is missing in class implementation causing runtime error. -> Option C

4. Quick Check:

   Interface adds property, class must implement it [OK]

Hint: Merged interface members must be implemented in class [OK]

Common Mistakes:

• Thinking names must differ
• Ignoring missing property implementation
• Assuming no error occurs

5.

You want to extend a class Employee by merging an interface with the same name to add a new method getSalary(). How should you correctly implement this so that getSalary() is usable on Employee instances?

class Employee {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
}
interface Employee {
  getSalary(): number;
}

// What is the correct way to implement getSalary?

hard

A. Add getSalary() method to Employee.prototype after class declaration.

B. Add getSalary() method only in the interface; no class change needed.

C. Add getSalary() as a standalone function outside the class.

D. Add getSalary() method inside the Employee class body.

Solution

1. Step 1: Understand interface merging with class

   Merging adds type info but does not add implementation. The class must implement the method or it will cause errors.

2. Step 2: Implement method correctly

   Since the class does not have getSalary(), adding it to Employee.prototype after declaration provides the implementation and satisfies the interface.

3. Final Answer:

   Add getSalary() method to Employee.prototype after class declaration. -> Option A

4. Quick Check:

   Interface adds type; method must be implemented in class or prototype [OK]

Hint: Implement interface methods in class or prototype [OK]

Common Mistakes:

• Adding method only in interface without implementation
• Trying to add method outside prototype
• Assuming interface adds implementation automatically