Merging classes with interfaces in Typescript - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean to merge a class with an interface in TypeScript?

It means adding extra type information or members to a class by declaring an interface with the same name. The class and interface combine, so the class must satisfy both its own members and the interface's members.

beginner

How do you declare an interface to merge with an existing class named <code>Person</code>?

You declare an interface with the exact same name: <br><pre>interface Person { <br>  newProperty: string; <br>}</pre> This adds <code>newProperty</code> to the <code>Person</code> class instance type.

intermediate

Can merged interfaces add properties to the class's instance type or static type?

Merged interfaces add properties to the class's instance type, not the static type. To add static members, you must merge with the class's constructor type separately.

intermediate

What happens if the class does not implement the members declared in the merged interface?

TypeScript will show a type error because the class instance does not satisfy the interface's contract. You must implement all interface members in the class or provide them via other means.

beginner

Why is merging classes with interfaces useful in TypeScript?

It allows you to extend or add type information to existing classes without modifying their original code. This is helpful for adding properties or methods for typing purposes, especially with third-party libraries.

What must an interface have to merge correctly with a class in TypeScript?

A The same name as the class

B The same properties as the class

C A different name than the class

D Only static members

Interfaces merge with classes only if they share the exact same name.

When merging an interface with a class, what type of members does the interface add?

A Private members

B Static members

C Constructor parameters

D Instance members

Merged interfaces add instance members to the class type.

If a class Car is merged with an interface adding a property color, what must the class do?

A Ignore the <code>color</code> property

B Implement the <code>color</code> property

C Rename the class

D Add a static <code>color</code> property

The class must implement all properties declared in the merged interface.

Can merging interfaces add static members to a class type directly?

A Yes, always

B Only if the interface uses the static keyword

C No, static members require merging with the constructor type

D Only if the class is abstract

Static members require merging with the class constructor type, not the instance interface.

Why might you merge an interface with a class from a third-party library?

A To add extra type information without changing the original code

B To rename the class

C To remove properties from the class

D To convert the class to a function

Merging interfaces lets you extend types safely without modifying external code.

Explain how merging a class with an interface works in TypeScript and why it is useful.

Think about how interfaces and classes combine by name and what that means for the class type.

Describe the difference between adding instance members and static members when merging interfaces with classes.

Consider what part of the class the interface affects.

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