DEV Community

Cover image for Learn about difference between Type & Interface in Typescript
Code Oz
Code Oz

Posted on • Updated on

Learn about difference between Type & Interface in Typescript

#typescript #node #webdev #javascript

If you are using typescript, you might use interface & type but if I ask you the difference between them, are you able to answer it ?

At the end of this article, you will be able to answer it during any discussion or interview !

Type

The basic, it allow us to create a new type !

Interface

In contrary to type, interface is restricted to an object type.

With the news release, type and interface are similar but there some differences between them.

Similitude

Object typing

You can define the shape of an object with both, but the syntax is not the same

with interface:

interface A {
  a: number
}

const a: A = { a: 5 }
Enter fullscreen mode Exit fullscreen mode

with type:

type A = {
  a: number
}

const a: A = { a: 5 }
Enter fullscreen mode Exit fullscreen mode

Extend

Both can be extended, and the difference is ... yes the syntax again !

with interface:

interface A {
  a: number
}

interface AB extends A {
  b: number
}

const ab: AB = { a: 5, b: 6 }
Enter fullscreen mode Exit fullscreen mode

with type:

type A = {
  a: number
}

type AB = A & { b: number }

const a: AB = { a: 5, b: 6 }
Enter fullscreen mode Exit fullscreen mode

The difference

What type can do, and what interface cant do

Unlike interface, type can be used for creating new type with union, tuples or can be used to defined primitive type !

type A = string | number // union

type Primitive = string | boolean | number | null | interface | symbol // Create a new type from primitives type

type DataTuple = [number, string] // tuple typing
Enter fullscreen mode Exit fullscreen mode

What interface can do, and what type cant do

A class can implement an interface

Edit: Since TS 2.7, type can be implements on class, thank you to @faiwer

interface A {
  a: number
}

class Toto implements A {
   a = 55
}
Enter fullscreen mode Exit fullscreen mode

Interface can be merged in a single interface if there are defined multiple times

interface Toto {
  a: number
}

interface Toto {
  b: number
}
const toto: Toto = {
   a: 55,
   b: 66,
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

As you can see type & interface are very similar but each other have his own dedicated feature !

I personally use interface when I need to type object structure, and I use type when I need to create type from primitive type or when I want to combine other types in one type !

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!

Top comments (12)

Collapse
 
faiwer profile image
Stepan Zubashev •

What interface can do, and what type cant do. A class can implement an interface

type A = { a: number };
class B implements A { 
  a: number = 1; 
}
Enter fullscreen mode Exit fullscreen mode

no errors

Collapse
 
fullstackchris profile image
Chris Frewin •

Coming from somewhere like C# a class implementing a type is kind of... weird... Though, all instances of a class automatically are that type... so it makes sense in a weird way too.

Collapse
 
codeoz profile image
Code Oz •

Hey ! thank you for your comment, I miss something wrong since a few time, this is available ! I edit my article thank you :)

Collapse
 
bravemaster619 profile image
bravemaster619 •

In a word, interface for OOP, type for FP

Collapse
 
peerreynders profile image
peerreynders • • Edited

FYI: A class implicitly exposes an interface that can be merged into - example:

type CompareFn = (lhs: number, rhs: number) => number;

const sortWith: (a: readonly number[], f: CompareFn) => number[] = (
  array,
  fn
) => array.slice().sort(fn);

const ascending: CompareFn = (lhs, rhs) => lhs - rhs;
const descending: CompareFn = (lhs, rhs) => rhs - lhs;

class Container {
  readonly #values: readonly number[];

  constructor(values: number[]) {
    this.#values = Object.freeze(values.slice());
  }

  get values(): readonly number[] {
    return this.#values;
  }
}

interface Container {
  ascending(): number[];
  descending(): number[];
}

function asc(this: Container): number[] {
  return sortWith(this.values, ascending);
}

function desc(this: Container): number[] {
  return sortWith(this.values, descending);
}

Container.prototype.ascending = asc;
Container.prototype.descending = desc;

const container = new Container([10, 45, 15, 39, 21, 26]);
console.log(container.values);
console.log(container.ascending());
console.log(container.descending());
Enter fullscreen mode Exit fullscreen mode

playground

Collapse
 
codeoz profile image
Code Oz •

Nice remark I learn something thank you bro !

Collapse
 
flutch profile image
flutch •

Nice Article CodeOzz !

Collapse
 
rayleigh93 profile image
Rayleigh-Sama •

Just follow you nice content man

Collapse
 
tcelestino profile image
Tiago Celestino •

Great. When I started to learn about TS, this topics confuse to me.

Collapse
 
codeoz profile image
Code Oz •

thank you Tiago

Collapse
 
king11 profile image
Lakshya Singh •

A type can have circular dependencies while interface can't it's super cool to try :)

Collapse
 
codeoz profile image
Code Oz •

nice remark Lakshya

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

Read next

amankumarsingh01 profile image

React native and the JavaScript bridge.

A -

darkterminal profile image

OhMyPunk - Remember Last Tab Open in HTMX

Imam Ali Mustofa -

dillonheadley profile image

HTMZ inspired form subission

Dillon Headley -

developeralamin profile image

Deep Linking for Andriod and Apple in Next.js

Al-Amin Islam -