Typescript Difference between interface and Types

This is a short tutorial about Interfaces and types of uses and the difference between them. You can check another post on Fix for Object is possibly null Types and [interfaces] (/2018/08/understanding-typescript-interfaces.html) 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?

In typescript, We have different primitive types like string, number, boolean

if we want to create a custom type using this type, It is possible with type aliases.

Also, the Type alias does create using the type keyword. For example, if you 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

Type in typescript helps

• When you want to treat multiple types as single
• if you have a custom object of multiple types which is difficult to read and simple

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.