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 }
with type:
type A = {
a: number
}
const a: A = { a: 5 }
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 }
with type:
type A = {
a: number
}
type AB = A & { b: number }
const a: AB = { a: 5, b: 6 }
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
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
}
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,
}
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
☕️ 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)
no errors
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.
Hey ! thank you for your comment, I miss something wrong since a few time, this is available ! I edit my article thank you :)
In a word, interface for OOP, type for FP
FYI: A class implicitly exposes an interface that can be merged into - example:
playground
Nice remark I learn something thank you bro !
Nice Article CodeOzz !
Just follow you nice content man
Great. When I started to learn about TS, this topics confuse to me.
thank you Tiago
A type can have circular dependencies while interface can't it's super cool to try :)
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