Difference between interface and Type alias in interface with examples

This is a short tutorial about Interfaces and types, difference between them.

You can check another post on Fix for Object is possibly null Types and interfaces are used to describe the design of a custom type but, there are some differences.

What is an Interface in TypeScript? Interfaces in TypeScript provide contracts and rules for classes to adhere to. They are used to group properties to create custom class types.

For example, let’s create an interface:

class Shape {
  length: number;
  width: number;
}

Interfaces in TypeScript help

• Create objects of classes
• Promote object-oriented design
• Ensure type safety
• Enable implementation by other classes
• Supports polymorphism and inheritance

What is a Type in TypeScript?

TypeScript offers various primitive types like string, number, boolean, etc. When creating a custom type using these types, we use type aliases. Type aliases are declared using the type keyword.

For instance, let’s declare a variable that can hold values of multiple types such as number, boolean, string, null, or undefined:

type CustomType = number | string | boolean | null | undefined;

CustomType is a new type that accepts any variable of declare types. You can create a instance of these types.

Types in TypeScript assist in:

• Create an alias for given existing multiple types as single
• if you have a custom object of multiple types which is difficult to read and simple
• Defining tuple and union types

#Difference between Interfaces and Type Aliases

let’s see the difference between interface and types in typescript

• Interfaces can be merged, but not aliases

  When two interfaces with the same name have different members, TypeScript merges their member variables. This merging is not possible with type aliases.

  For example, We have defined two interfaces with the same name Shape with different members

  interface Shape {
    length: number;
    breadth: number;
  }
  
  interface Shape {
    color: string;
  }
  

  Typescript merges two interfaces member variables and accepts two properties as described below

  const shape: Shape = {
    length: 5,
    breadth: 10,
    color: "red",
  };
  

  With type aliases, the below code throws a duplicate identifier ‘Shape’ compilation error.

  type Shape = {
    length: number;
    breadth: number;
  };
  
  type Shape = {
    color: string;
  };
  

• Combining types as well as interfaces While interfaces cannot create a new interface by combining multiple interfaces, it is possible with type aliases using the & operator.

  With interfaces, it is not possible to create a new interface by combining multiple interfaces.

  interface Shape1 {
    length: number;
    breadth: number;
  }
  
  interface Shape2 {
    color: string;
  }
  

  It is possible to create a type by combining multiple interfaces.

  type Shape = Shape1 & Shape2; // valid
  

  It is not possible with interfaces

  interface Shape =Shape1 & Shape2 // not valid
  

  With types, It is possible to combine different types using & operator.

  type Shape1 = {
    length: number;
    breadth: number;
  };
  
  type Shape2 = {
    color: string;
  };
  
  type Shape = Shape1 & Shape2;
  

• Union with Interface and Types Interfaces cannot form a new interface by combining multiple interfaces, but type aliases can through the | union operator.

  With interfaces, it is not possible to create a new interface with the union of multiple interfaces.

  interface Shape1 {
    length: number;
    breadth: number;
  }
  
  interface Shape2 {
    color: string;
  }
  

  It is possible to create a type by the union of multiple interfaces.

  type Shape = Shape1 | Shape2; // valid
  

  It is not possible with interfaces

  interface Shape =Shape1  | Shape2 // not valid
  

  With types, It is possible to combine different types using the | union operator.

  type Shape1 = {
    length: number;
    breadth: number;
  };
  
  type Shape2 = {
    color: string;
  };
  
  type Shape = Shape1 | Shape2;
  

#Compare Interface with Type aliases

#Conclusion

In summary, we have compared type aliases and interfaces in TypeScript through various examples, illustrating their differences and best use cases.