DEV Community

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 ...

Read full post

Leonardo Montini • Sep 19 '22 • 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
}

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 :)

Johnny Simpson • Sep 19 '22 • 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).

sschneider-ihre-pvs • Sep 21 '22

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

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

Johnny Simpson • Sep 21 '22

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.

sschneider-ihre-pvs • Sep 21 '22

Adis Durakovic • Sep 26 '22

regarding unions. you can do the following

type foo = ifaceA | ifaceB

Johnny Simpson • Sep 26 '22

yeah that is true to be fair

Jose Antonio Felix • Sep 19 '22

Excelente post, I was looking for this info

Demian Ferreiro • Sep 21 '22 • 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;
}

Link to TS Playground

Johnny Simpson • Sep 21 '22 • 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

José Pablo Ramírez Vargas • Sep 19 '22 • 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!