Now You Can Use TypeScript In Your Svelte Markup

hey friends today I wanted to share something exciting with you and that is that SW now natively supports typescript and what do I mean by that didn't all of those headlines imply that SW aband the Ty script so now it natively supports it what and of course everyone knows this is not true swel never aband the typescript it just uses JS docs for the types and then it generates the types so what does this really mean well this means that now that you can use TI script in your swell markup so previously this is something that wasn't possible before if I look at code example so something like this you would really run quickly into problems so here I'm using this input event listener and I'm saying e target. value and now when you would hover it it says okay Target is possibly null then you're like okay and now it says property value does not exist on types so you're like okay I'm like really tired let me just quickly cast this or whatever so you can say probably as HTML input value and then probably rubbing your hands together you're like okay my job here is done and then you see save and you didn't even notice this and you refresh your site and then everything breaks you get an error and why is that well basically the swell compiler has no idea about this typescript syntax in your swell markup right but now it does so let me just really quickly show you so in package Json if I open it you can see here I'm using the swell 5 version so this is specific to swell 5 if you're using the stable swell 4 version then this doesn't work yet but here is what you can do so you can try out SW in different ways you can say for example npm create SW get latest so this is going to give you the option to try the SW beta version out or if you just want to upgrade the package you can say npmi SW latest or actually it's SW next and I'm using pnpm here so I'm going to say pnpm add SW next so we're going to see is going to update to the latest version which should be 0.9 and let me just run the development server again and that should should be it so now if you look at the package ason here we're using this version point9 and we can even look at the releases here and we can see 0.9 release added the typescript support so here it is 0.9 all right beautiful so now when I go here and if everything still doesn't work you can always say reload actually restart language server so this should work your editor list okay so now you can see everything works as expected so now when I go here we no longer get an error everything work is expected now you can use the types here so now for example if I say do value and that's basically it all right so let's look at another example so here I have just this simple array with some items all active completed and I get this error here type string is not assignable to type filter and why it is because this array is infert to be of type string inside right so if we hover over option we can see that this is of type string hm all right all right so now you would have to take this and you would have to put it inside your script tag right here maybe you can add a type but when you're doing something quick or Etc something simple maybe you don't want to do this and now you don't have to so how can we turn this into a union string well we can just say as const and now we can see it might look confusing because we're using as here and as is also a keyword in this each Loop so as you can see this was for a long time complicated to implement because of these edge cases but you can see now this works as expected so now if we hover over option we can see that this is inferred as a union all active completed so now there is really no problem when you reassign the option to the filter and everything works as expected and there are no errors so let's look at this last example of a snippet and this is something new to 12 5 you can check out my previous video if you want to learn more about Snippets but basically Snippets allow you to reuse your markup more easily in SW and here we have this problem so here I have this Li snippet and I'm passing this item which is inferred as any right but if I go here to my options here I have item selected and on select I'm saying that we can just past a number and then everything works fine we can reassign selected to this item which is a number but spel has no idea about this right that this is a number so now we can go here and we can say okay this is a number cool so now everything works as expected all right so that's basically it friends if you like what you seen don't forget to like And subscribe and you can support me by becoming a patron thank you for watching and catch you in the next one [Music] [Music] peace

Channel: Joy of Code

Views: 9,740

Keywords: sveltekit, svelte, typescript

Id: hHB7Zd2F-nU

Length: 4min 50sec (290 seconds)

Published: Tue Nov 21 2023