TypeScript 5.0 beta brings a bunch of exciting features, including const annotations, decorators, speed improvements and a new option for resolving modules in TS.

TypeScript 5.0 beta brings a bunch of exciting features, including const annotations and decorators.

TypeScript 5.0 beta is out! Here's a breakdown of all the most important features.

TypeScript 5.0 Beta Deep Dive

Sometimes you may need want to type an object which has several different optional keys, but all with the same type. We can map over a union type to accomplish this instead of chaining 

I start with some code that looks like this

Let's start improving this. First I will make a 

 object, then I'm going to make a new type called 

What this is doing is its taking each key in 

 and setting its type to an empty object. So when I use it, TypeScript will be expecting a shape like this.

But, I want the properties to be numbers.

As you can see, if I just do that, I still haven't quite got a union type. I get this odd nested structure, and I will still have to have every possible fruit present.

So, what I'm going to do is map over our 

 type to get rid of those parent keys, and fully create my union type.

Learn how to derive a union type from an object - an incredibly useful switcheroo that's at the heart of most TS magic out there.

Derive a union type from an object

 Hello, folks. For this TypeScript tip, I'm going to show you how to change this fruitCounts object here into a union type. Imagine our code is a little bit crap at the moment because, really, we want to be deriving this type, this union of objects, from this object. I'm going to show you how to do it.

 What we're going to do is we're going to name this NewSingleFruitCount, and I'm going to create a new type here, which is type NewSingleFruitCount. This is going to be an object. This is going to get a little bit funky here. First of all, I'm going to make a type out of this const up here, which is going to be type FruitCounts equals typeof fruitCounts.

 Inside here, I'm going to go K in keyof FruitCounts is going to be...Let's, first of all, make it an object. This is going to be interesting because now, what we're going to have is fruitCounts is expecting this shape, where apple is now an empty object. In fact, it's even asking for apple is apple, which is an empty object or something crazy.

 Essentially, what we have now is -- This is correct -- we're now looking for a shape like this. Inside, here we can specify anything and it will get put into here. We can say wow true, for instance, and now, all of these will require wow true. We don't want that. We actually want to take this key and we want to represent it as this apple number.

 We're going to say K2 in K is a number. Now, each of these now require apple as a number. This is going to be 12, for instance, whatever. This is still not quite what we wanted. Even though we have all of this stuff represented, we've got this nice dynamic key here, it's still not quite a union.

 To turn it into a union, all we need to do is map over these keys and essentially get rid of them. What we're going to do is just call these and say keyof FruitCounts. Maybe call isn't the right there. Now, what we have is we can have apple 2, and it satisfies it. There you go. This is how you turn a object type into a union.

The challenge for today is to take this union type here type 

. As you can see bellow, we are manually defining the types of those id properties.

We'll want to turn this object into a union type. We do this by applying an index operation to the object. In this case we'll use 

and this means. now that we now have our type comment or type user

But we haven't really added anything here. We just sort of created the same type again.

 property AND our id property. We can create the dynamic id property using 

 utility type. This is used to define a key and the type of its value. We'll make the key dynamic by using string interpolation.

 which is another way of saying we have an object with a key of `

Transform a union to another union, using the in operator as a kind of for-loop. This pattern can be used for almost any kind of transformation.

Transform a union to another union, using the 'in' operator as a kind of for-loop.

This pattern can be used for almost any kind of transformation - here, I add a dynamic key.

Use 'in' operator to transform a union to another union

 Folks, the challenge for today is to take this union type here, type user, type post, type comment, and dynamically add the ID type, which is going to be userID, postID, and commentID. As you can see, the EntityWithID is currently not really...we could be auto generating this and we're not. Let's try and improve on this. 

 We're going to say type EntityWithID = -- we're going to use the sort of same trick as we did last time -- which it's going to be [EntityType in Entity ["type"] ]. This is going to be an object where the type is the EntityType. Now, so far, what this will do is we'll get to this point where we have comments where the type is 'comment'. 

 We're doing pretty well there, but really what we needed to turn this into a union. To turn into a union, we basically go EntityType here. This means now that we now have our type: 'Comment' or type: 'User', but we haven't really added anything here. We just created the same type again. We haven't added the IDs. 

 The way that we do this is we say, "OK, we've got this object here, which is representing this." We say and we're going to make a record where it's going to be entity type. In fact, we're going to use a new string literal type where it's going to be entity type and then ID. That's going to be a string. 

 now commentID is going to appear 1, 2, 3. This little thing here, we're basically saying we have the type entity type and the record, which is another way of saying a string or rather an object with this is the key, with this as the value of that key. 

 If we remove this little end, then commentID no longer exists. If we remove this bit here, then we don't need to pass the type anymore. We just pass the commentID. There we go. That's how we handle it. We've used a little bit of a quite modern TypeScript here to handle this, but it's perfectly possible to do this, of course, if we didn't then go post, then we need to pass in a post ID. 

TypeScript has really cool string interpolation powers. We want to take this following query:

This features autocomplete and if we change one of the query parameters, TypeScript will let us know that it's incorrect and give us autocomplete.

To accomplish this we start with creating a 

 type and then splitting the query up on the 

 character in order to get the query parameters. Make sure to grab the second element of the array because the first element is just the path.

Once we have the query split up, we'll split it again on each 

 character to get each individual query parameter.

 library to help us with the string manipulation.

 type now that we have them all split up. First of all, we want each 

Then we can create key value pairs of each parameter by mapping again over the split 

 and setting the key to the first element of the split and the value to the second element of the split.

And we then do this funny thing. that we've seen in previous tips. We iterate over each each member of the object, since we don't want the type to be the nested structure, just the key value pairs of the query params.

TypeScript's string interpolation powers are incredible, especially since 4.1. Add some utilities from ts-toolbelt, and you've got a stew going.

TypeScript's string interpolation powers are incredible, especially since 4.1. Add some utilities from 

Here, we decode some URL search params AT THE TYPE LEVEL.

Decode URL search params at the type level with ts-toolbelt

 Hello folks. Today I'm going to show you how cool TypeScript's string interpolation powers really are. We want to turn this query here, this kind of search params query into an object down here. Through this crazy web of TypeScripts, we managed to do it.

 Here we should see that if we go a=wonderful, then the type down here is no longer correct. It gives us auto complete to wonderful. Let's go through each step and see how we've managed to do this. First of all, we've taken the query and just for fun purposes, we've taken a type of it. We're going to type of query.

 Next up, the second query part we've basically split the query by here and we've taken the second part of it. If I remove the second part here, we've got string query part. We've split it by this point here. We've just said just grab the second bit of it.

 Now we've split it again by the & here. We've got now a=wonderful and B=now. We are doing this by grabbing some utilities from TS tool belt, which is a very cool library. Next up, we've got these query params, which somehow we've managed to turn into a union type. We've got now a=wonderful and b=now.

 What we do is we take query elements, which is a two pull here and we say, first of all, we want each query element. The query elements number here is a way of saying each one of these query elements. For each query element in that two pull, first of all we grab the key here.

 That key is going to be the a for instance, there, so a=wonderful because we're splitting the string by the by the equals there and grabbing the first part, and then we say is the value. The value is then the same code there is we're grabbing the second part.

 We then do this funny thing that we've seen in previous tips, where we then iterate over each member of that object. If we return this or grab it there, then you'd see it would be a=wonderful, b=now. Like this, for instance.

 Whereas instead we grab that and we do that instead, and that means that we then just get a=wonderful, b=now. Then we union merge them, which is just merges all the elements of the union into an object.

Function overloads in TypeScript are an incredibly powerful tool for building. things that really are not possible to build otherwise. Here we have a 

 function. which takes in multiple other functions and produces another function.

This is a key tenet of functional programming.

 function we would just have a number which returned another number.

But what if we wanted to chain several functions together? With the result of each previous function piping into the next.

How would we achieve this? We use function overloads.

We've got the actual implementation of the function here and you can see that it's kind of stubbed. It's just got an 

 inside it, which TypeScript allows you to do.

What's actually interesting are the overloads. So we have a function that takes in a function and returns a function.

We have the first signature or the first overload for compose, which takes in two generics. It has the 

 which is the very first thing you input into the returned function and then you have the first argument.

, because further down we're going to add a 

This is only triggered if you use one argument.

If you add in a second function there then the second overload is triggered. So now you have an 

And the third overload here it means it just does the same thing again but adds a third arg to it.

What this does is protect you from cases where the output from one of the previous functions doesn't match the input of the next function.

And this means that function overloads are incredibly powerful for these sorts of compositions.

Function overloads can be used in conjunction with generics to make incredibly complex and dynamic type signatures.

Here, we make a compose function - incredibly useful for functional programming.

Use function overloads and generics to type a compose function

 Hello, folks. Function overloads in TypeScript are an incredibly powerful tool for building things that are not possible to build otherwise. Here, we have a compose function, which takes in multiple other functions and produces another function, which is a key tenet of functional programming.

 Here, if we just had an addOne function, we would have a number which returned another number. Then, if we wanted to take a num to a string, so we add one, and then turn it into a string, then finally, it goes number to string. Then if we want to turn it into a number again, we go stringToNum, and finally it's number to number.

 How do we achieve this? Well, we've used function overloads. We've got the actual implementation of the function here. You can see that it's stubbed. It's just got any inside, and TypeScript allows you to do this. Currently, we're returning this as any so I don't need to look at that too hard.

 Instead, look up here. We have the first signature of the first overload for compose, which takes in two generics. It has the Input, which is the very first thing you input into the returned function. Then you have the first argument.

 Here, we're saying FirstArg because, down here, we're going to add a SecondArg and a ThirdArg. What it returns is a function which essentially just returns the function that it's passed there. Now, that's only triggered if you use one argument here, so only if you do this, if you add one.

 If you add in a second function there, then the second overload is triggered. Now, you have an input, FirstArg, and a SecondArg. Here, you have func and func2. This returns the FirstArg. Then the FirstArg gets passed in to the second function there, which returns the SecondArg, which returns a function which takes in the input and returns the SecondArg.

 The third overload here means it just does the same thing again, but adds a third arg to it. What this does is it means that you can have things like where you add one, but imagine if you go numToString first, and then you try to add one to it. This means that there's an error here because the string is not compatible with a number signature.

 This means that function overloads are incredibly powerful for these sorts of compositions.


 keyword to narrow the scope of a generic to make it more useful. Here for instance, we want to get a deep value from an object

 is gonna take in the object and then take in the two keys that it's gonna use to then grab the value. So we can use 

And now we get some nice auto-complete on this deep value. Which is either 

And that means that when we select bar, this third argument is going to be c or d.

And when we select foo, it will be either a or b.

So let's say it's a for instance. We now need to work out what the 

 is going to be, because it's currently typed as 

. So here in the return type definition we can just say 

 just like property access in JavaScript.

 is a Boolean. And if I change the third argument to b, then it becomes a number.

The 'extends' keyword is very powerful in TypeScript. Here, I use it to narrow the value of a generic to enable some beautiful autocomplete/inference.

 keyword is very powerful in TypeScript. Here, I use it to narrow the value of a generic to enable some beautiful autocomplete/inference.

Use 'extends' keyword to narrow the value of a generic

 You can use the extends keyword to narrow the scope of a generic to make it more useful. Here, for instance, we want to get a deep value from an object, and getDeepValue is going to take in the object and then take in the two keys that it's going to use to grab the value. 

 We can use extends here to say the FirstKey needs to be keyof Obj, which is our object. Now, we get some nice autocompletes on this deep value, which is either foo or bar. Let's say it's bar. This second key is now going to extends keyof Obj, FirstKey. That means that we get this bar. When we select bar, this is going to be C or D. When we select foo, this is going to be A or B. 

 Let's say it's A, for instance. We now need to work out what this result is going to be. It's currently typed as any. Here, we can say Obj, FirstKey, SecondKey, just like a property access is JavaScript. The result is a Boolean. If I change that to B, then it becomes a number.

A common pattern in TypeScript is to create type helpers that allow you to extract types from things that are not types.

Currently what we want it to do is to return the props. Here it would return 

 which is a functional component, then we can actually add a generic there and we can say 

 and otherwise, because this is a ternary and it needs to return something, we say 

 object to be false, then that's. going to fail because it's expecting 

But what if you want to feed multiple types of things into this helper? For instance what if we also wanted to derive the prop types of a class component instead of a functional component.

To do this we'll need to add another layer to the 

So here in the ternary, for the else case we'll check if the 

 which is the type of a class component. From that we'll infer its 

So this now is working both with react functional components and class components.

Type helpers change the game when it comes to types in your codebase. They help TypeScript infer more from your code - and make your types a lot more readable. 

Type helpers change the game when it comes to types in your codebase. They help TypeScript infer more from your code - and make your types a lot more readable. Here, I write my own PropsFrom helper to extract props from any React component.

Write your own 'PropsFrom' helper to extract props from any React component

 A common pattern in TypeScript is to create type helpers that allow you to extract types from things that are not types. Here, we've created a PropsFrom type helper which extracts a component, if I call this TComponent here. Currently, what we wanted to do is we want it to return the props. Here, it would return enabled boolean if we put my components in there. Let's see how we do that.

 If we go TComponent extends React.FC, which is a functional component, then we can actually add a generic there. We can say infer the props and then we can return the props. Otherwise, because this is a ternary, it needs to return something, we say never.

 Now, PropsFrom, this is going to return enabled boolean because, if I change this up here to a, for instance, just say it's true and I had false here, then that's going to fail because it's expecting true. What if you want to be able to feed in two different types of things into this helper? Then you need to add an extra layer to the ternary.

 Let's imagine that we had a MyOtherComponents here, because React components can be added as classes, too. Here, what we do is we say instead of this, TComponent extends React.Component, then we return Props, and then we have never.

 Now, we can say PropsFrom is basically like...Why is this not working? Boolean is not returned, so never, so we can say Components instead. This now is working both with React functional components, which you see here, and with react components declared as classes.

A common pain point when using TypeScript is when you have this 

 function here. My object here has keys a b and c but when I try to iterate over its keys when I've extracted them from 

That means that when I try to access it I get this horrible long type error. 

No index signature with parameter of type string was found in type

 and the way to get around this is to create your own 

. We'll set that as the type for our argument 

 and then set the return type to be an array of 

 to make a type assertion. This tells the compiler to infer the result of 

 to be an array of the objects keys as strings.

The looseness of Object.keys can be a real pain point when using TypeScript. It's pretty simple to create a tighter version using generics and keyof operator.

 can be a real pain point when using TypeScript. Luckily, it's pretty simple to create a tighter version using generics and the 

Create your own 'objectKeys' function using generics and the 'keyof' operator 

 A common pain point when using TypeScript is when you have this object.keys function here. MyObject here has keys A, B, and C, but when I try to iterate over its keys when I've extracted them from object.keys, then the key is typed as a string. That means that when I try to access it, I get this horrible long type error, "No index signature with parameter of type 'string' was found in type A, B, C." 

 This should be typed as key of myObject. The way to get around this is to create your own object.keys function, so object.keys=. We're going to have Obj, which is our object. We're going to add that to the generics list here. Then we're going to return a keyof Obj, and that is going to be in an array like this. 

 Here, "A function whose declared type is neither 'void'...and must return a value." We just need to return Object.keys(obj) as...Yeah, we can do this instead. Now, if we go object.keys(myObject), then key is typed as A, B, or C.


You might be used to using generics with functions but you can also use them with react components.

 component takes in an array of items which I've currently typed as just 

 and then it also takes a function to render the item which says 

What you want here is to be able to pass in any items and for that 

 string to then propagate through to the 

What you need to do instead is you need to turn this 

If we ever want to pass the generic manually we specificy it with our 

 instance. Now the example below will error out since 

So it's a funny syntax and not a lot of people know about it. I kind of stumbled on it by accident and every time. But, every time I use it I think, "wow that's pretty cool!"

You can use generics in React to make incredibly dynamic, flexible components. Here, I make a Table component with a generic 'items' type.

Use generics in React to make dynamic and flexible components

 You might be used to using generics with functions, but you can also use them with React components. Here, this Table component, it takes in an array of items, which have currently time to just ID String. Then it also takes a function to render the item, which says Item ID String.

 Actually, what you want here is you want to be able to parse in any items. For that ID String to then propagate through to the renderItem here. We can do that. You can make a item here, which would be, lets say, tItem. You might be put off by the fact that inside this TSX file, this syntax actually isn't valid.

 What you need to do instead is you need to turn this table into a function, which looks like this, and remove the arrow. Now, you're allowed to use it. Here, we probably need to make this generic as well, tItem. Let's add tItem up here.

 We can take the ID String and just put tItem in there. Anything we put into here, name, Matt, for instance, will be propagated through to our item because it's generic. If we ever want to pass the generic manually and specify it, then we can pass it here. We can say, "ID equals a number," for instance.

 This will array because it's not passing that. It's a funny syntax. Not a lot of people know about it. I stumbled on it by accident. Every time I use it, I think, "Wow, that's pretty cool."

Generics are really interesting in that they're tied to a function's 

. What that means is that you can make a function, which has one generic locked inside of it, then make 

 function, in the future, out of that function, with the first generic still locked, and then add another one.

Here's what I mean by that. We want to make a function called 

, is going to return a function that removes keys from an object. 

 is that it's going to be an object with just the key of c. In 

, we're actually calling the function and using it.

To make this work, first of all, what we're going to do is say, 

And then we're going to say that the argument 

 is an array of keys. The key's generic has been locked in as a or b.

What we want to do next is take in the object, which is going to be the generic 

. That means that we need to just remove the keys from the object.

To do that we'll set the return type of this function to be 

. Then we'll return that blank object and set the type to any to quite down an error. 

What's going on here is that now we've got Omit, which removes keys from an object.

, when we instantiate the second function, locks in the generic, 

Generics can be 'locked in' by function calls, meaning that generics can be 'curried' through functions.

Generics can be 'locked in' by function calls, meaning that generics can be 'curried' through functions. Here, we create a 'key remover' function which can process any generic object.

Create a 'key remover' function which can process any generic object

 Generics are really interesting in that they're tied to a function's execution context. What that means is that you can make a function, which has one generic locked inside of it, then make another function in the future out of that function with the first generic still locked and add another one.

 Here's what I mean by that. Here, we want to make a function called Make Key Remover. Now, Make Key Remover, what it's going to return is a function to remove keys from an object. Here, the expected case for this object is that it's going to be a new object with just the key of C. Here, we're making a function. Here, we're actually calling the function and using it.

 How do we get around to that? First of all, what we're going to do is we're going to say, "Key, extend string here." This is the first function, the key remover one. We're going to say, This key is a...or key array." This is an array of keys. You can see now that the key's generic has been locked in as A or B.

 What we want to do next is we want to take in the object, which is going to be...I'm going to give it a generic of obj. Obj is going to be here. I'll just save it to get the formatting. Obj, as you can see here, it's been locked in. The generic is locked in here into the key remover. That means that we need to just remove the keys from the object.

 We're going to return from this function. I think it's Omit, and then obj, and then key. If I just return this, I need to quieten down the error. What's going on here is that now we've got Omit, which removes keys from an object.

 We're removing A and B. You can see that the key remover locks in that first generic, which is just up here. Then this one, when we actually instantiate the second function, is, it locks in this generic. The new object, it only has C available to it. Pretty cool.

You can use TimeScript to throw some absolutely crazy errors at the type level even without touching the runtime code at all.

 which is really good for comparing primitives like two numbers or a string to another string but it's really not very good at comparing two arrays.

The array comparison will always return false, because this first array is not the same element as the other array. We can actually move this to the type level.

first of all we're going to say check for bad args and we're going to say this is going to be. a generic and the arg is going to be like this. We're going to say arg extends any array and we're going to say you cannot compare two arrays using 

. We're just going to copy and. paste that in otherwise we're going to return the arg

and we're going to use this in the function arguments of 

"Argument of type 'never[]' is not assignable to parameter of type ''You cannot compare two arrays using deepEqualCompare'"

So we've actually successfully moved this error to the type level!

Using a crazy trick I picked up from @AndaristRake, you can throw detailed error messages for type checks.

, you can throw detailed error messages for type checks.

Here, I move a runtime check in a function to the type level, meaning you get a detailed error if you use it wrong.

Throw detailed error messages for type checks

 You can use TypeScript to throw some absolutely crazy errors at the type level, even without touching the runtime code at all. Here in our deepEqual compare function, we use this A triple equals B, which is really good for comparing primitives like 1 and 1, for instance, or a string to another string.

 It's really not very good at comparing two arrays. This will always return false, for instance, even if it's like this because this first array is not the same element as the other array. We can actually move this to the type level by saying, first of all, we're going to say, "Check for bad args."

 We're going to say, "This is going to be generic. The arg is going to be like this." We're going to say arg extends any array." We're going to say, "You cannot compare two arrays using deepEqual compare." We're just going to copy and paste that in.

 Otherwise, we're going to return the arg. We're going to use this in the function arguments here. We're going to say, "Check for bad args here and check for bad args there." Now, what you'll see is that here, argument of type never is not assignable to parameter of type.

 You cannot compare two arrays using deepEqual compare. We actually managed to move this to the type level.

Deep partials are incredibly useful. For very, very narrow use cases. For instance, if you're in a test file, writing a unit test or something, and you have an entity that you want to mock. Let's say it's a 

Deep partials are SUPER useful and not natively supported by TypeScript. Here, I use one to help with mocking an entity in a (imaginary) test file.

TypeScript 5.0 Beta Deep Dive

More Tips

Derive a union type from an object

Use 'in' operator to transform a union to another union

Decode URL search params at the type level with ts-toolbelt

Use function overloads and generics to type a compose function

Use 'extends' keyword to narrow the value of a generic

Write your own 'PropsFrom' helper to extract props from any React component

Create your own 'objectKeys' function using generics and the 'keyof' operator

Use generics in React to make dynamic and flexible components

Create a 'key remover' function which can process any generic object

Throw detailed error messages for type checks

Use deep partials to help with mocking an entity

Create autocomplete helper which allows for arbitrary values

Turn a module into a type

Use 'declare global' to allow types to cross module boundaries

Use generics to dynamically specify the number, and type, of arguments to functions

Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig

Map over a union type

Know when to use generics

Assign local variables to default generic slots to dry up your code and improve performance

Use assertion functions inside classes

Get a TypeScript package ready for release to NPM in under 2 minutes

Understand how TypeScript infers literal types

Ensure that all call sites must be given value

Access deeper parts of objects and arrays

Use infer in combination with string literals to manipulate keys of objects

Compare function overloads and generics

Understand assignability in TypeScript

Avoid unexpected behavior of React’s useState

Conform a Derived Type Without Losing Its Literal Values

Don't use return types, unless...