TypeScript Type vs. Interface

Interface

An interface comprises the properties, methods, and events that it defines. It contains only the declarations of these members, while their actual implementation is the responsibility of the derived class. TypeScript compiler utilizes interfaces for type-checking and helps to establish a consistent structure that derived classes must follow. Interfaces are created using the interface keyword.

Implementation

//Interface definition
interface Rectangle {
  width: number;
  height: number;
  calculateArea(): number;
}

// Derived class implementing the Rectangle interface
class Square implements Rectangle {
  width: number;
  height: number;

  constructor(side: number) {
    this.width = side;
    this.height = side;
  }

  calculateArea(): number {
    return this.width * this.height;
  }
}

// Usage
const square = new Square(5);
console.log("Square area:", square.calculateArea()); 

You can also try this code with Online Javascript Compiler

Run Code

Output

Square area: 25

Explanation

Code defines a "Rectangle" blueprint with "width," "height," and "calculate area ()" methods. It's used to create a "Square" with equal "width" and "height." A square of side length 5 has an area of 25 (5 * 5).

TypeScript Type vs. Interface

Differences between Types and Interfaces

Primitive Types

• Types can represent primitive data types like string, number, boolean, etc
• Interfaces cannot directly represent primitive types but can be used to describe complex structures containing primitive types

Union Types

• Both Types and Interfaces can represent union types, combining multiple data types
• Union types allow variables to hold different types of values

Declaration Merging

• Types support declaration merging, meaning multiple type declarations with the same name are combined
• Interfaces automatically merge declarations with the same name, extending the original interface definition

Extends vs. Intersection

• Types use "extends" to extend or inherit from other types
• Interfaces use intersection (`&`) to combine multiple interfaces

Handling Conflicts when Extending

• When extending types with conflicting property names, the latter type definition overwrites the former
• When extending interfaces with conflicting property names, both property definitions are combined

Frequently Asked Questions

Should we use the Interface or type in TypeScript?

Use the Interface when defining contracts for objects, classes, or related entities. Use type for unions, complex types, or utility functions. Consider readability and consistency when choosing between them.

What is the main advantage of types in TypeScript?

The main advantage of types in TypeScript is that they allow us to explicitly define and enforce the data types of variables, ensuring type safety and catching potential errors early during development. This leads to more reliable and maintainable code.

What is the main difference between type and Interface?

Type is used to define data shapes, including primitive types and unions. The interface defines contracts for objects and classes with specific structures and behavior, promoting code organization and consistency.

Conclusion

In this article, we discussed TypeScript Type vs Interface. We discussed both the type and Interface in detail. In the end, we concluded by discussing some different points in applications and some frequently asked questions.

Now that you know TypeScript Type vs. Interface, you can refer to similar articles.

• Interfaces
• Differences between TypeScript and JavaScript
• type casting in typescript

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning!