{

Typescript Difference between interface and Types


typescript Difference between interface and Types

This is a short tutorial about Interfaces and types of uses and the 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 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
Interfaces Type alias
Interfaces allow 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 objects, primitive, and classes types describe primitive types
Interfaces are extendable by adding properties Not possible to add new properties
Interface has no union or intersection, tuples Types work with unions, tuples, and intersection

Conclusion

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

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.