DEV Community

Cover image for The Difference between TypeScript Interfaces and Types

The Difference between TypeScript Interfaces and Types

Johnny Simpson on September 18, 2022

In TypeScript, you might have noticed you can declare custom types in two different ways. One is with the interface keyword, and the other is with ...
Collapse
 
balastrong profile image
Leonardo Montini • Edited

Hey, thanks for the article!
I've got a thing to mention on point 1 which reads "Interfaces are extendable - types are not".

You say:

If, after its been defined, I suddenly realise I want to add an address too, I will need to change the original type declaration. With interfaces, we can declare something new, and extend user

Actually, with types you can do pretty much the same using an Intersection Type with &.

type user = {
    name: string,
    age: number
}

type userWithAddress = user & {
    address: string
}
Enter fullscreen mode Exit fullscreen mode

The result is pretty much the same as with interfaces. The only difference is (as also explained in the doc) on conflicts, but as long as all fields are different, you can extend types with other types :)

Collapse
 
smpnjn profile image
Johnny Simpson • Edited

hey, that's a good point that I forgot about. Let me update the article. I've also updated to include the info on conflicts which is quite interesting (and something I didn't know about before, actually).

Collapse
 
sschneiderihrepvs profile image
sschneider-ihre-pvs

Now let's add some other aspect on the difference between both. Compiler Performance ;)

github.com/microsoft/TypeScript/wi...

Collapse
 
smpnjn profile image
Johnny Simpson

Ah very interesting.. makes me wonder how much time is lost to compiling typescript projects per year per developer from badly written TS code haha.

Collapse
 
sschneiderihrepvs profile image
sschneider-ihre-pvs

Image description

Collapse
 
adonis profile image
Adis Durakovic

regarding unions. you can do the following

type foo = ifaceA | ifaceB

Collapse
 
smpnjn profile image
Johnny Simpson

yeah that is true to be fair

Collapse
 
jafb321 profile image
Jose Antonio Felix

Excelente post, I was looking for this info

Collapse
 
epidemian profile image
Demian Ferreiro • Edited

Point 5, "Classes can implement interfaces, but not types", is not correct. IDK if it was the case on a previous version of TypeScript, but at least in the current one (4.8) the example with the createUser class works the same if you change the interface user to be type user instead:

type user = {
    name: string;
    age: number;
}

class createUser implements user {
  name = "John";
  age = 143;
}
Enter fullscreen mode Exit fullscreen mode

Link to TS Playground

Collapse
 
smpnjn profile image
Johnny Simpson • Edited

thanks - this must be new since older versions don't allow for this - and I assumed it was still the case. I'll update the article

Collapse
 
webjose profile image
José Pablo Ramírez Vargas • Edited

I liked this. To the point and clear. May I ask for a favor? I am the author of wj-config. It is my first-ever TypeScript project and while largely successful based on my experimentation with the end result, I bet there are a lot of things in its source code that can be done better.

Favor is: Could you browse the source code and point out the errors you see? You can blog about those, and feel free to call out the errors you see in the repo. Of course, I'll probably correct them in due time, so don't expect them to be there forever. Cheers!

Collapse
 
bgrand_ch profile image
Benjamin Grand • Edited

Thanks for this article.

There is also a difference on imports.

It isn't possible to import type {} from '...' with an Interface.

Collapse
 
woow_wu7 profile image
7

interface is also possible.

Collapse
 
mhcrocky profile image
mhcrocky

cool!!!!!!