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 implement.

It is used to group the properties to create custom class types.

Let’s create an interface

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

Interfaces in typescript help

• To create an object of classes
• Promotes object-oriented design
• Allows type safety
• Can be implemented by other classes

What is type in typescript?

Typescript has different primitive types like string, number, boolean etc.

If we want to create a custom type using these type, It is possible with type aliases.

Also, the Type alias does uses to create an new type using the type keyword.

For example, Let’s declare a variable that is the union of multiple types like a number or 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.

Type in typescript helps

• 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
• Can create a tuple types
• Can create 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

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 types

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

Union in typescript allows combining multiple types with OR conditions.

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;

Conclusion

To Sum up, Learned a Comparison of type alias and interface in typescript with examples.