Did He Really Fix TypeScript?

Key Takeaways

Matt pocock who is an incredible typescript wizard with a great YouTube channel has claimed to have fixed typescript and to be honest he's kind of right [Music] welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream projects sooner and today I want to talk about the TS reset library now the whole idea behind this library is to change around and reset some of the base types in typescript and the base behaviors of typescript make them a little bit more intuitive and most importantly quite a bit stricter which makes it harder to introduce bugs into your code pretty much the main thing that TS reset does at least in my opinion is it removes a bunch of enemies that get added into your code by typescript automatically which can make your code a little bit more error prone and more difficult to keep track of and debug as time goes on now if you want to learn more about why Matt actually created this Library I'll link his video on it in the cards and description down below and honestly his channel is just great for any typescript content so if you want to learn more about typescript definitely go check his channel out but the whole idea behind this Library like I mentioned is to make typescript a little bit stricter and a little bit more intuitive so one thing that it fixes right away is the use of Json so if you use json.parse or if you have a fetcher request and you just have a DOT then in here and you do res oops res dot Json the return type of both of these is going to give me an object with the return type of any because it doesn't know what your Json is it just knows it could be anything but this is a bit of a problem because when you have a value of any in typescript you can do anything you want with it for example in our code here you can see this Json object clearly has just one property which is a name and I'm trying to say something else I'm just saying Json dot something which is clearly a property that does not exist so I should make sure I have type checking in place to make sure that this dot something property exists and that's one of the things that his Library can do so if you want to use this Library all you need to do is make sure you install it so what we can do is we can just say npmi and we can just save this as a Dev dependency and it's going to be at total Dash typescript slash TS reset just like that that's going to install this and then all we need to do is import it so you can see if we just copy this line over and we import this to any of our files you're going to notice immediately Json has now been typed as unknown and the unknown type in JavaScript it just says that this object it doesn't know what it can be so it has absolutely no properties defined on it so no matter what you do it's going to give you an error unless you check to see if that thing exists so in our case what we could do here is I could just come in here and I could just say if Json or type of Json is equal to an object we make sure to check that the something property oops something property is inside of our Json object as well then if we put this code inside here we're going to notice that we still get one more error right here because I just need to make sure that this thing exists essentially it could be null so I just make sure Json is not equal to null and then I do a quick save you're going to notice now we're not getting any errors at all so really this is forcing me to be much more strict by making sure this thing isn't object it's not null and it has the specific property that I'm trying to check and you'll notice I no longer get errors if I try to check for another property you're going to notice the error comes back because now it's saying it doesn't know if it has this property or not now this is just one of the many things that this Library does by default and really when you use this Library it's recommended that you create a separate file here just called the reset dot d dot TS and this is where you put your import that way it's going to be imported into all your different files you don't have to worry about you can see everything is still working the same as it did before and also with this you can actually import only specific things so let's say here I only wanted to import the fix for Json well I can just do slash Json parse and now it's only going to import that particular fix and nothing else the only thing you need to consider when you do this is inside your TS config you need to be using node next here or node 16 as your module version otherwise it's not going to work properly when you do this type of import of importing only one single thing at a time as the only thing had to watch out for so in our case we're only doing the Json parse fix and nothing else and if we come in here you can see there's actually a bunch of different options by default it uses the recommended one which currently just essentially enables everything but you can see we can enable or disable only certain things that we want now I'm not going to cover all of the different things inside of this library because it's going to be constantly changing and getting updated but I will look at another one because this actually solves a different problem and this one is the filter Boolean so you notice immediately when I import just this all of this code now no longer returns unknown and it returns any which is the default because I'm not importing that Json parse but if we look at this what happens if I have an array here and I want to only get the true D values essentially the non-null values so I can just say I have an array which is equal to one two three and we'll just put null inside of here now let's say I just want to get the truthy values well I can really easily doing that by just saying truth D here is going to be equal to array dot filter and I can say Boolean just like this it should essentially just going to call this Boolean method by passing in each value in my array and if it's a truthy value it's going to be returned now you'll notice if I highlight over this you can see it's changed the type my array to a number array while my original array here is a number or null array because obviously there are no values inside of here this is very intuitive it makes sense because if I'm filtering out all those null values obviously it should return to me a non-null array as you can see here but if we don't have this enabled for example I just comment this one line out and I come back over here you now notice this array can contain numbers or null even though with this filter here it's literally impossible for it to contain null this is just again another nice quality of life feature where typescript should be smart enough to know that when I write this code that this array right here no longer contains null values but it's not smart enough to do that by default and you need this reset to be able to handle that specific scenario now the final thing I want to cover I'm just going to copy this code over here real quick into our main file that we're working with and inside of this code if I just break it up a little bit here you'll notice that we have an array of numbers and we actually set it as a constant value here so we're just saying that this array of numbers can't change it's just always going to be one two three and if I highlight this you can see the type is just one two three super easy read only array now you'll notice if I try to call the includes method here the include method expects a value of one two or three because obviously my array has the values one two and three so it expects me to only pass those values to includes but oftentimes what happens if I have a user input which I'm simulating here with this input and I want to check to see if their input is included in this array that is a constant value well right now it throws me an error because it's saying hey this is returning to me a number and I don't know if that number is one two or three so it's not going to work this just is kind of counterintuitive it doesn't really make sense so inside of the reset here we also have a way to fix this so I can just come in here and I can say array slash and let's do includes and now if I save come over here you'll notice that error is no longer there because this is now not actually expecting it to be a specific number of one two or three but instead is just expecting it to be a number in general so now this is working just fine there are actually many different instances of this actually having a problem so as you can see inside of here if we just look you can see we have the index of we have includes we have down here map has and set has they all work very similar to array includes and they solve the exact same problem of obviously I don't want to just check to see if this has the number one two or three because I already know that's going to be true I want to be able to check to see if what I'm checking against is contained in that array so this is going to help you solve that problem and really that sums up everything about this Library it just helps you solve really small problems and helps you make your typescript a little bit more secure and a little bit more user friendly with things like this includes method now eventually I really hope that typescript would add in some configuration options where you can maybe enable some of this by default inside of your TS config but until that happens all you need to do is just download this Library if you want to start using some of these and you can enable only the ones you want or enable all of them if you really want to be super strict and with that said if you want to learn more about this or really just deep dive in typescript in general I highly recommend checking out Matt pocock's Channel I'm going to link it right over here as well as the video that he talks about this TS reset in with that said thank you very much for watching and have a good day