Elixir + Typescript (start using it)

I think the biggest benefit people don't understand about typescript is just adding a TS config to your file and turning on check JS gives you a bunch of error checking basically for free this is how simple it is to add typescript to a new Phoenix project go to your assets directory Go to JavaScript rename this file from appjs to appts literally just rename it to a typescript file search for where it normally says appjs in your config here not this one leave this one alone cuz this is the script that's being loaded and it's going to compile to JavaScript but you want this line here in the config where es build is going to look for this file rename it to appts save it and now if we run the server and go check on the project everything runs correctly we see that there is no errors everything has compiled correctly that's literally all it takes you just got to rename the file and change that one spot so we just kind of speed ran adding typescript in like less than a minute I think that's literally how easy it is so there's not really an excuse not to add typescript because it's going to be difficult or something as you can see there's some new errors here and when people are learning typescript I think the thing they bounce off the most is the amount that the compiler throws at you it is challenging you're going to get new errors but I think what you have to realize to start really liking typescript is that the errors are not there uh as an impediment to you the errors are there to help you every single error you fix is something that is a potential bug that got squashed at the static analysis phase when I'm programming I use as many static analysis tools as I can when I'm writing Elixir I use Credo to check as much much as I can before my app goes live I use Soo to look for security problems I use dialyzer to get as many type things as can be found by dialyzer and you should apply the same principle to every programming language even if you are an Elixir developer and you hate JavaScript just try it out use as many static analysis tools as you can because they're there and they're basically for free so why not use them make sure you're using eslint and make sure sure you're using typescript cuz it's going to find a couple extra things now these first two things here are just telling us that there's no type declarations uh we come back to that but this one is new here object is possibly null so what that's telling us basically it's actually on this line here when we run get attribute on the result of query selector uh what typescript is telling us here with object is possibly null is that query selector is not not guaranteed to return a value now this is a contrived example obviously it's literally in the default code base so this is not like a bug that we found nine times out of 10 uh maybe 99 times out of 10 there's never really going to be a reason that this metat tag there is gone but it could be you know maybe you are I don't know messing with the head tag and you delete this meta tag for some reason it's possible that it's gone this is a contrived example but this is the kind of thing that only types can tell you if you're an Elixir developer you got to love types right so you really have no excuse not to use typescript and I'm going to know if you don't use it when people learn typescript the thing that they bounce off of like I said is trying to just satisfy the compiler it is kind of a skill because if you're used to writing JavaScript this is a whole category of error that you're not used to knowing what it's even telling you so it is a skill it's not something you're just going to pick up and it's not just going to be easy um but it's not that difficult so what we could do in this case if we wanted to totally satisfy this error now the way you tackle this problem is basically with type checking type guarding we need to check this intermediate step to see if it's null or not and there's a million ways you could do this one of them may be you could do something like this where we assign an intermediate value and then we check is it true or not uh you could do something like that uh it's telling us that we don't need to use let there and by the way I'm getting these errors about let because I always use es lint which reminds me I feel like I should probably make a PR against the live view project to get rid of these lets because there's no reason for them to be there but if you're not using eslint start using it I'm going to make another video about it at some point so you could do something like this if you wanted to be really safe about it but of course in reality this meta tag is always going to be there so this scenario is one where it's okay to tell typescript just to shut up basically one thing you could do instead is a nonnull assertion looks like this you basically put a bang before the dot and this is special typescript syntax that tells typescript this thing is never going to be null you can do that I I've got biome linting as well uh which I'll maybe I'll talk about later but I'm really into static analysis tools so I use as many as possible um so I run biome as well and I have a rule in biome turned on that's telling you not to use non-null assertion I'm probably going to turn that off I think it's okay to use non-null assertion when you want but there's like a million ways that you can do this you can also cast it so you can do like this kind of thing where we wrap this in Parn and we say this is as HTML element this may or may not be better than non-null assertion it may or may not be better than an actual type check like we did first it's just up to you you need to decide moment to moment which thing to do we can turn these into consts as well now what about these errors here it says we cannot find a corresponding type declaration now basically in order to solve that what you need to do is you need to install a set of types that comes from this package here this package has a whole bunch of types for various npm packages that don't publish their own types so on a case-by casee basis some npm packages you're going to use are going to have types some of them are going to have types indefinitely typed now if you have a new Phoenix project that doesn't have an npm setup it's really easy to add one all you have to do is go to the assets directory and run NP m in knit and we can just accept all the defaults or whatever it doesn't really matter then we can install packages from definitely typed that have this types prefix so we'll install Phoenix and we'll also install types Phoenix live view actually it has underscores okay that's why you got to look it up cuz you never know how they're going to name it so hit go on both of those and if we come back to the project we are no longer getting an error and we now have Types on these types here so if I hover over one of these definitions you can see now I have a type of live socket I probably should have showed it off before but before you install that types package typescript isn't going to know anything about this but because we install the types package it knows that this is a live socket I'm going to show you how you work with those types but but before I do that what about this error at the very end here property live socket does not exist on Type window and type of global this this is probably one of the most Googled typescript errors I think uh because there's a lot of stuff that exists on the window object and it's quite common to add more stuff to the window object so this scenario of typescript thinks that this thing shouldn't be on window it's a common problem here's how I deal with it there's a couple ways to do it but this is the best option in my opinion we want to do something like this where we open up this Global scope and when we do this we can kind of monkey patch into the window object using interface this is not a typescript tutorial but that's one of the things that's different about interface interface lets you kind of merge declarations and type does not and then we can say that there's a property called live socket on window and it's going to have the type of live socket which is coming from the package up here Phoenix live view the type is getting globally added so we can just use it without any kind of qualification and now when we come down here it says that window. livock is type live socket I would recommend you read through this article here by uh typescript wizard total typescript um this article is really really good everything typescript relate is this website is a really good place to check now I think the thing that comes in most handy with types and Phoenix is adding new hooks so we can define a hooks object here and we can pass it to the socket and this is a little section from the docs about hooks there is a hook we can take as an example down here this phone number hook we can just copy this in so we could put it on here like this this it would go in an object and then we'd copy it in and there's another one of those lets there maybe we should make a PR for that as well now what we can do to determine the type of this is if your editor has go to definition we can hit go to definition on live socket and this will tell us the type of a lot of stuff in here we can look for Hooks and if we look around the file by searching for hook we'll find this interface called view hook and this is what we're looking for this is the type of each of those hooks so so the best thing to do in this scenario is to actually use the satisfies operator which would look like this it tells us that this type does not exist that's because we're going to need to import it so we can do that by doing import type view Hook from Phoenix live view there's a number of properties that are actually optional which are not defined as such in the types so the way I would uh deal with this is by using satisfies and if you say satisfies view hook on this you'll get this error that says there's a bunch of properties missing like view name push event push event 2 blah blah blah the types say that those are required if you go here you can see these are all marked as things that are always going to be there and these callbacks are the things we Define and it's live .js that inserts them onto this object since this is like an exported interface these should probably be on something else and there should be a public interface for this and I don't know I mean we could make a PR to fix that but one thing you can do do instead is just type this as partial for now so you could do that and type each one of your hooks like that but you can also say something like this you can say that this whole record is a record of strings and paral view Hooks and so now this is properly typed in that it's not throwing an error at us but it also doesn't know about the existence of these things like view name now one thing you can do to get around that is and now we're getting into some real typescript weeds here but you can actually put a parameter here called this which is going to correspond to the type of this and we know that this is view hook so now that it's properly typed it's telling us that this doesn't exist uh view name does not exist on type view hook did you mean view name and we can fix it and boom there we go that's the benefit of using typescript and that's why you should use it on your Phoenix projects that's why you should use it on every project um if we didn't have this we could make that error and we'd never know about it and it's basically for free this runs at compile time so why wouldn't you do it it's like choosing not to have tests basically I mean I'm not going to say typescript is easy um I'm not going to say I didn't have to pause the video at times and solve a couple errors here and there but it's worth it the more I look at this the more I do think I really need to make a commit to the types library for this but I am really wanting the types to just move Upstream so we could get rid of this definitely type package and just put them in the Phoenix live view npm package I would personally really like that um I think I commented on an issue about that if I can find the issue I'll put it in the um in the description maybe but yeah so I'm a big typescript fan I could go on talking about typescript for quite a while but maybe I'll just leave it there if you like this and you want more content about typescript let me know if you want more tips on using typescript in Phoenix let me know and I hope you enjoyed the video by the way please remember to subscribe if you like this content if you want more Phoenix content typescript content Elixir content whatever the case may be

Channel: Andrew Stewart | src_rip

Views: 2,015

Keywords:

Id: PMq4IT4hKz0

Length: 14min 20sec (860 seconds)

Published: Sat Jan 20 2024