DEV Community

DIWAKARKASHYAP
DIWAKARKASHYAP

Posted on

5 1 1 1 1

Difference between Interface and Type in TypeScript

In TypeScript, both interfaces and types are used to define custom data structures, but there are some differences in their capabilities and use cases. Here are the key distinctions between interfaces and types:

Interfaces:

  1. Declaration Merging:
    • Interfaces in TypeScript support declaration merging. This means that if you declare two interfaces with the same name, they will be merged into a single interface.
   interface Person {
     name: string;
   }

   interface Person {
     age: number;
   }

   // Merged into a single interface
   // Resulting interface: { name: string; age: number; }
Enter fullscreen mode Exit fullscreen mode
  1. Extending Interfaces:
    • You can extend other interfaces using the extends keyword.
   interface Animal {
     name: string;
   }

   interface Dog extends Animal {
     breed: string;
   }
Enter fullscreen mode Exit fullscreen mode
  1. Implementing Classes:
    • Interfaces can be used to define the shape of a class and ensure that a class adheres to a particular structure.
   interface Printable {
     print(): void;
   }

   class Document implements Printable {
     print() {
       console.log("Printing document...");
     }
   }
Enter fullscreen mode Exit fullscreen mode

Types:

  1. Union and Intersection:
    • Types in TypeScript can represent union and intersection types, allowing you to create complex types by combining multiple types.
   type UnionType = string | number;
   type IntersectionType = { prop1: string } & { prop2: number };
Enter fullscreen mode Exit fullscreen mode
  1. Support for Primitives:
    • Types can represent primitive types directly.
   type Age = number;
Enter fullscreen mode Exit fullscreen mode
  1. Mapped Types:
    • Types can be used to create mapped types, allowing you to transform the properties of an existing type.
   type Optional<T> = {
     [P in keyof T]?: T[P];
   };
Enter fullscreen mode Exit fullscreen mode
  1. Tuple Types:
    • Types can be used to define tuple types.
   type Point = [number, number];
Enter fullscreen mode Exit fullscreen mode

When to Choose:

  • Use Interfaces When:

    • You want to represent the shape of an object or define contracts for classes.
    • You need declaration merging or want to extend other interfaces.
  • Use Types When:

    • You need to create union or intersection types.
    • You want to create mapped types or define complex types.
    • You are working with primitive types or tuple types.

In many cases, interfaces and types can be used interchangeably, and the choice between them often comes down to personal preference or specific use-case requirements.

Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and Typescript, as well as contribute to open-source projects and learning Typescript. I am currently seeking a remote job.

Twitter: https://twitter.com/Diwakar_766

GitHub: https://github.com/DIWAKARKASHYAP

Portfolio: https://diwakar-portfolio.vercel.app/

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (2)

Collapse
 
jangelodev profile image
João Angelo

Hi DIWAKARKASHYAP!
Great article, very useful
Thanks for sharing

Collapse
 
diwakarkashyap profile image
DIWAKARKASHYAP

I'm glad you found the article useful! If you have any questions or need further clarification on anything, feel free to ask. Happy to help!

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay