TypeScript 6/7 Is Here - What You Should Know

The latest version of TypeScript has some features that you should be using today. Now, if you haven't heard, the latest version TypeScript 6 is being known as the bridge release. It's the last TypeScript compiler written in JavaScript and TypeScript. Later this year, TypeScript 7 will be coming out that'll be written in Go. It'll be much faster. However, these features I'm showing you today will be compatible with TypeScript 7, and they're also just kind of neat features that I think you should be using. Now, stay all the way to the end. I have a skill that I created that will help you upgrade your older Type Script versions to the latest ones. Make sure you stay for that. Let me start with Temporal. So, let's take a look at what it would look like before. So, we all know the JavaScript date. It's pretty old by now. The developer experience isn't great in it. Now, one thing that's really nice is this new Temporal API. It's built into TypeScript 6. You can see here, now I can put in dates basically just year, month, day. I can add or subtract weeks or days or months. You can see here I have a whole bunch of different options. Era, year, leap, month. I can I just work with dates a lot nicer, and I don't have to bring in a a date library. Another thing I really like is you can use multiple time zones. I have a America Los Angeles. I have all these different time zones. I'm running this to local string through it through this for loop, and you can see here it formats it in really nicely, and it just works well. Uh one last thing, here's another date example. Here's one just taking today's date, and then giving you a from, and then you can see like how many days from this text string is it from September 1st. It does the calculation for you. It's pretty awesome. I really like it. Another feature I think everyone should take a look at is this map get or insert. Let's take a look at the old way. So, the old way of doing it is you would do this new map. I don't know if you've ever done this. I've done this many times where I'm working with a map, and then I have to check to see if the value is inside that map. So in this case I'm saying, so I actually don't want to accidentally set it and overwrite if it's something's already in there. I only want to set it if it's empty. And then you can uh do this assertion. So this is something that's kind of bothers me too because in TypeScript you have to do this null non-null assertion because this could be undefined. Uh so it's not perfect DX. I don't really love it. Now with the latest version of TypeScript you get this get or insert. So let me show you how this works. So what it's going to do is going to check to see if the value exists or not. If it does exist, then it just doesn't make any changes. If it doesn't exist, it will create the value. So you never have this chance where you accidentally overwrite what you have in there and you don't have to do this if then uh dance that you normally have to do. In this case I'm inserting in I'm running the same get or insert a bunch of times and you can see it's not overwriting it every single time and you can see the output here, which is really nice. Another example of maybe even something even a little bit nicer for your DX is to do this called get or insert computed. So what this does is it takes the value, the key, and then the value of it and the value of it is in the in the form of a function. If you kind of take a look here, I'm just giving a a function here that console logs it and returns one and then returns two. And you can see here uh it ran the computing A. So as soon as I entered this in, it ran this. And then when it when the second one got added, it didn't actually output this never runs. Uh the reason is is that it will try to insert this A in here. It'll notice it's already there and instead of overriding it, it just won't do anything. So you can see here the second one never got added in. You only have one value which equals one, which is the computed value of this function here, the first one. So, this is really good because what happens if this function here had a whole bunch of expensive operations in it. So, this won't get ran at all because it's going to fail as soon as it finds out this key is already there. So, unlike the get or insert will actually run the values if you do have a function or something in in the key value, this will actually not run it. So, it's a little bit of an edge case, but I find it very nice and something that I'll be using in my future apps. This is something that I've run into before is this regex escape. Let me show you what it does here. I don't know if you've ever used regex, which every time I use regex I always look for some AI to help me do it because I always get confused, but take a look here. So, I have this user input 1.0, and then I have this text version 1.0 and build 1X0 are different. And I'm using this new reg- regular expression and passing in this text that this user input 1.0, and then I'm creating an expression that's basically says, "Use this whole value here." This global. And then I'm using the text.match, and what it's doing is it's matching on both the 1.0 and 1X0 X0Y0. So, it's not matching as I would expect it. I would expect it to only match on this first one, and it's matching on both of them. For those of you who are watching who got this far in the video, thank you so much for watching. Make sure you leave a comment below if you did get this far. But, if you probably see the problem is is that these are wildcards and they're not escaped at all in regular expression. There is a nice new option inside TypeScript 6, which is called regex escape. So, you do the same thing. You create this regular expression, but you use regex escape, and now it only matches on the 1.0 as we expect it, because the dots are no longer wild cards, they're escaped out, and then it matches it correctly. So, just a nice improvement, a nice quality improvement of life quality that I really like. I want to talk to you about subpath imports. This is a nice new feature, a quality of life improvement. What it is is it helps you with relative paths, and it standardizes on this hash or pound sign as the way to import in local files into your app. So, you've probably seen this before with local path imports. You can kind of set Usually, a lot of people use the at sign to import in local files from their file system. The problem with that is it can conflict with actual node modules or packages that you've installed. And so, this just makes a little bit more sense. To set it up, you can go into your TS config app.json file. You need to set the module resolution to bundler, and you also set the paths inside there. And then, you actually have to go to your package.json file and set up the imports in there as well. Uh I'll leave a link in the description to this whole app if you want to try it out. It's just a nice little quality life improvement. And if you've saw my last video and on my Vite TS config paths, I check that out as well. It has a little bit to do with this, but this is more of like how you configure it with the latest version of TypeScript 6. The last thing I want to talk about is generic interfaces. So, let me know if this sounds familiar. So, I'm creating this create pair interface. I'm using this generic T. And if you look at the definition here, essentially, what I'm saying is it takes in config as the argument. It's an object that accepts actually returns T, the generic, and accepts T as the value for the consume, which is a function. So, to actually use it, it would look a little bit like this. This is kind of before TypeScript 6. You would have to explicitly set the generic as number here. And then everything would work uh as you expect it. And you would get the nice types everywhere. Uh this is a little bit limiting. So, with TypeScript 6, you can now it now infers the type instead of having to set it. And this gives you a lot more flexibility cuz what happens if sometimes you want to use it as a string or type or something else? So, in this case, it infers since we have 42 here that we can use it for here as well and it works as you expect it. And so, you don't have to put in the type here. Uh just a nice quality of life improvement as well. One last thing I want to show you. I mentioned this at the beginning. If you are interested in this, I'll put a link in the description. You can get to this code, but I created a skill for this that will actually help you do a TypeScript 6 upgrade. Now, this is an experimental. I'd like for people to try it out. Now, if you're using something like Kiro like I am or Cloud Code or whatever agent or coding editor you want and you want to try some of these things out, take a look at my skill, see if it makes sense. You can kind of play around with it. Try to do an upgrade to an older version of TypeScript 5 to TypeScript 6 or you can just kind of ask it use this skill to ask it and see what these things do for you. Also, please leave a comment. I appreciate it. Thanks. Take care.