Why use Type and not Interface in TypeScript

I've come to the conclusion that you should pretty much always favor type over interface and here's why so very quickly what are the differences between Type Alias and interface well let's say we have some kind of component user component and take some props and we want to describe it with user props right so I could use type user props equal sign curly braces and then here you can have the various properties right so we're describing an object here and we could do the same thing with interface so we could say interface user props name and age and calibrous right this looks very similar instead of type you have interface and type has this equal sign right I get an error here because I'm using the same identifier twice now sometimes people add or an interface they add the i in front of the name and for types or type aliases I should say people sometimes add a t in front to indicate this type Alias right and here it's to indicate it's an interface now these days it's a little bit less common all right now very often you have some kind of Base type or base interface and you want to extend upon that so let's say again we have type user props it can be an object with name age and now let's say we also also want to have another type maybe an admin right so we're going to have an admin component perhaps and this is going to be very similar to a user because an admin also has a name and age but now an admin maybe should also get a role right but we still want to get the properties from this user props as well so how do we do that with the type over the type you do what's called an intersection so you do the pre the other type user props and then you have this Ampersand right and then you have the additional stuff that you want to add so here we could add a row right now for interface it's called extending so we could have interface user props name and age and then if we want to extend this you use the extent keyword right so I already get the suggestion from copilot here and this is what you would get right so let me comment this out so we don't get an error right so now it's the same result and so here there's a bit of a difference right so you use user prompts and then Ampersand for type Alias for interface you use the extent keyword now in general though they're very similar so on the official documentation website they also mentioned type aliases and interfaces are very similar and in many cases you can choose between them freely however I will take the position that you should pretty much always use type that's a type Alias because interface comes with some problems for example the interface can only describe an object while the type Alias can also describe object and everything else such as primitive values like string number and Boolean right so if we have for example an address variable and we want to type that specifically as an address let's say one two three main street so to implement this type address we can say type address is simply going to be a string let's say right so now I have typed this address variable specifically to B of this type and this is only possible with a type Alias right so if I would try doing this with an interface right so interface and address how would you do that you cannot do this equal sign right so the interface you don't have an equal sign you have these curly braces because you're always describing an object but interface right so here if I would do address string this doesn't work this is an object with a property address right so now we get this error I said now this is expecting an object now I could turn this into an object I'd select this and then as key you would need address right so now I have an object as is the first problem with interfaces you can only describe objects and type Alias can describe objects as well but then also everything else for example a type Alias can also describe Union types and interface cannot so if we copy this example so we're saying the address should be of type string but maybe we also want to allow an array of strings right so a user could have multiple addresses maybe they moved recently and we want to keep a history of their addresses right so we have a string array an array of strings and so now our address can be an actual string or an array of strings right so we could now turn this into an array of strings as well right so now this also works right so this is called a union type you have this or this you cannot do that with interface right so you cannot do something like interface address is string or an array of strings right so again you don't have this equal sign with interface you have these curly braces right so this is only possible with a type Alias right and this is a big problem because you're going to use a type Alias quite often in your apps all right now type Alias can also easily use utility types and interface can too but it's kind of ugly for example let's say we have user props again and that could have a name an age and maybe also something like created at now there's some date and now maybe we're going to have another component that is going to be let's say a guest component it's not not a registered user but just somebody browsing hasn't registered yet and here we want to use the same from user props but without name and age because the user hasn't registered yet we don't know about name and age but we do know about created ads maybe it's just when they first landed on the page right so we basically want to have the same as this but we want to Omit something we want to remove something so typescript gives us some utility types it's called well this one's called omit so we can say omit from user props we want to remove something essentially and let's say right I could say name right so now what we're going to get is basically an object this is going to be this is going and describe an object with age number and created ads right so name has been removed from here and I can also remove multiple things like this right so now name and H will be removed and this will only have created ads now technically it's possible to do the same with interface so I could say interfaced guest props extends and then you have omit from user props these two and then you have these empty curly braces so technically it works but this is ugly syntax we have the extends keywords and then we have these empty curly braces at the end so this is another reason for preferring type because you can just immediately sort of assign it to guest props here without any keywords without those weird curly braces all right now sometimes you're gonna have to describe two pulls so this is basically an array and specifically for example a string and a number in an array so if we have that address example again let's say we have some kind of address remember we could have multiple addresses so maybe we could say something like the first address that the user registered with so we could say something like one and that could be one to three main street right you could have an array a tuple as it's called something like this now to describe this as a type we could say it could be a number here and then a string here right so this is a tuple and then we can say we're going to have an address of type address and that's going to be well let's say the first address was this and then we could have another one right so the second address is you know some other street right something like this these two pools are easily described with the type Alias and it's the same story as before the interface can technically do the same thing but it's going to be quite ugly syntax right so if you want to do this with an interface it would look something like this so interface address extends extension array with a number and string and then you have this Index right so at index 0 you're going to have a number at index one you're gonna have a string that technically works the same way but this is much cleaner syntax with the type right so that's another reason to use type right so at this point I've already shown you four good reasons to use type right so we can describe primitive values such as string number and Boolean right you cannot do that with an interface we can also use type to describe grab Union types not possible with interface we can also easily use these utility types that we get from typescript and it's clean syntax interface can do the same but it's going to be ugly syntax and then we also have these tuples sometimes very easily done with the type Alias and awkwardly possible with interface so these are quite common things especially omit for example these utility types as well as Union types these are quite common so it's pretty much guaranteed that you're going to use a type alias in your code and since you're already going to use a type Alias why not just use a type Alias everywhere for consistency now there is another really good reason to prefer type Alias over interface and that's this one it's when you want to extract type from something else let's say we have some kind of project object this project could have a title let's say project project one and then it could have a nested object so maybe some kind of specification right maybe an area size and a number of rooms right so here we have a specification in inside a project and now we want to have a type for specification and so we can simply say type specification and then what you can do in typescript is you can say type of project if you do type of projects and now hover specification you can see it in it simply infers the shape of this variable right so we have title string specification area size rooms these are numbers now what we want is we we want to create a type out of this specification object so what you can do is you can be more specific you can say pull out this specification object right so now when you hover specification you can see it has pulled out this object of area size and rooms now technically possible with interface as well but you have to use extends and the interface just doesn't look as clean as this where you can just immediately sort of assign something to a new type I think this equal sign is simply something that we are used to as JavaScript developers we're more used to this because we do a lot of this assignment to variables right so we have a variable and you assign something to it so this syntax X to us as JavaScript developers just feels a bit cleaner now as a side note if we offer this you can see that typescript has inferred this to be these to be numbers right so area size number rooms number what if we know it's always going to be a hundred and three here so very cool trick that you can do here in typescript is you can you can add you can be more precise than that you can say s const so literally it's going to be this now if you hover this you can see it in first this to be literally the number 100 not just any number right we can be more specific than that it's always going to be the number 100 always going to be number three right that's just a side note this ascon's trick is actually really helpful so I just wanted to show you that right so technically possible with interfaces but I think it just looks cleaner with iPad so here's another good reason to prefer type so these interfaces they can be merged as it's called so what that means is if you have an interface for user with name String age number now what you could do is you can have you can sort of declare it again you can say interface user and now you can say Raw all string and now what's going to happen is if you use that type right let's say we have some kind of user of type user and let's see what we can use here so the intellisense shows us that we can use age name and role so what happens here is basically that it has a merge touchscreen has merged these into one interface right so the the good use case for this is maybe you are getting some interface from a third-party library and it doesn't contain something that you want so you can sort of add that yourself by redeclaring it but it's very confusing because you can have multiple Declarations of this with the same identifier now throughout your code base that's really confusing but the bigger problem is now when I use user here and I try to use intellisense here I know right now what I can use here but this can change at any moment somebody else could change this right especially if you work in a team big project somebody else could change this so now I don't really know what this is going to be it's unpredictable and when something is unpredictable in your code bad things happen generally speaking if you try doing that with a type right so if you have already created a type user and you try doing that again type user let me comment this out for now right so now time compiler is giving us an error right duplicate identifier user right this is also called interfaces are open because you can sort of redeclare them and they will be merged and type aliases are closed so you cannot just redeclare them and add something like that now if you want to add something you can still do that but you have to give it a different identifier here right so you have to call it user two let's say and it's just going to be an intersection right so here you would say it's going to be user and this additional stuff right so now that would work the same way but it's more predictable now because now this this won't suddenly change I do have to change the name here now right so now I get H name and Rule again but it's much more predictable I know what I'm getting and it reduces the opportunity for bugs and unintended stuff happening in our code base all right now some people think that you have to use an interface for classes we don't write many classes these days especially if you're a react developer but sometimes you come across it right so with classes you can for touchgrips you can make sure it adheres to some interface so you can use Implement and maybe we use the eye in front of it just to be clear here I user and we could have a names to an age and then we construct this right so then you could have an interface interface a user and that could be something like this right so now we're sort of we're forcing the class to implement this shape and that's not necessary right so this also works with time right so you can simply use type and let's make a t user now and add the equal sign and now if you make this T user this works perfectly fine right so type Alias works with class and implements as well all right now of course type is simply fewer characters as well right types four and interface is is nine nine characters all right now I saved the best argument for the last it's called type scripts not interface script all right so there are there no good reasons to use interface at all well there are some very specific use cases so on the official website they do mention that with interface you get some shorter and more focused error messages when you work with interfaces so here the owl is a type Alias and this is the error message example that they give us and then with chicken this is implemented with an interface and you get a shorter message here more precise that's one reason for using interface now or you really need that merging feature of interfaces right maybe you're developing you know a library and there are some specific use case where this makes sense in the past performance was also a reason to use interface which if you had a huge code base interface was maybe a little bit faster than type the type Alias but these days that doesn't seem to be any difference in performance all right now typescript can be quite difficult to learn and in my react and xgs course I will also cover typescript and specifically in the context of react and next.js so if you're interested in that make sure you get on the email list so you'll be notified and you'll get a discount code when I release that course now I do want to say I see a lot of developers they jump into react without really having mastered the fundamentals like JavaScript and CSS and if you want to be a professional developer it's really important that you have mastered those fundamentals also CSS for example just to pick up something like Tillman's very quickly so I have courses on both JavaScript as well as CSS I highly recommend check them out the links are in the description if you learned something from this video I really appreciate it if you could leave a like And subscribe with the notification Bell on and then thanks for watching and I hope to see you the next one bye

Channel: ByteGrad

Views: 192,814

Keywords: typescript, interface vs type

Id: Idf0zh9f3qQ

Length: 14min 12sec (852 seconds)

Published: Thu Jul 20 2023