Typescript Difference between interface and Types


This is an short tutorials about Interfaces and types uses and difference between them.

Types and [interfaces] (/2018/08/understanding-typescript-interfaces.html) are used to describe the design of an custom type but there are some differences. What is interface in typescript?

Interfaces in typescript provides contract and rules for classes to implement it.

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

Let’s create an interface

class shape{
    length:number;
    width:number
}

Interfaces in typescript helps

  • To create an objects 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 types using this types, It is possible with type aliases.

Type alias can be created using type keyword For example, if you declare an variable which is union of multiple types like number or boolean, string, null or undefined

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

Type in typescript helps

  • When you want treat multiple types as single
  • if you have 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 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, below code throws 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 with 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 to combine multiple types with OR condition.

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

interface Shape1 {
  length: number;
  breadth: number;
};

interface Shape2 {
  color: string;
};

It is possible to create a type by 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 | union operator.

type Shape1 = {
length: number;
  breadth: number;
  };

type Shape2 = {
color: string;
  };


type Shape =Shape1  | Shape2
Interfaces   Type alias  
Interfaces allows to create a new name It is not allowed to create a new name
Interfaces can be extended or implemented types are not extendable
Interfaces can be merged can not be merged
Interfaces describe about object,primitive and classes types describe about primitive types
Interfaces are extendable by adding properties Not possible to add new properties
Interface has no union or intersection,tuples Types works with unions,tuples and intersection
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.