TypeScript 5.1 Beta is OUT!

TypeScript 5.1 unblocks React Server components, brings some nice usability updates to functions returning undefined, and some perf improvements.

Transcript

0:00 What's up, Wizards? The TypeScript 5.1 Beta is out. My neighbors are building something in their back garden, so apologies for the noise, but I have to get this out right now. There are two main things that come from this release. The first one is undefined-returning functions.

0:14 Functions that don't return anything in JavaScript just return undefined. In TypeScript, they're inferred as void. This one here, for instance, this function that's just returning absolutely nothing, is inferred as a function with no parameters that just returns void.

0:28 What if the type of the function that you're passing in or the type that's expected actually returns undefined? This, currently, in TypeScript 5., will be an error. There are a bunch of these different cases here. This actually makes it less usable than you expect.

0:42 Now, in TypeScript 5.1, it would just be absolutely fine. TypeScript has now got its ideas or got the right idea into his head, that functions that return nothing actually return undefined. I think it will still infer it as void, but it will just loosen up that little bit of tightness and restriction that it previously placed on it.

1:03 This is the big headline item, decoupled type-checking between JSX elements and JSX tag types. What does that mean? They unblocked React Server Components. React Server Components broke some of the assumptions that TypeScript had previously made about components in React.

1:21 You would previously have thought that components could basically only be a function that is a sync function, not that returns a promise or anything, that just returns some JSX or perhaps , but React Server Components can use async functions.

1:37 Foo, it's basically like here, if you have...Oh God. The syntax highlighting in dark mode is awful. They've got async function Foo returns div. It basically says, "Foo cannot be used as a JSX component. Its return type Promise Element is not a valid JSX element."

1:53 Now, TypeScript has gotten smarter, so that you can actually specify the types that are allowed as an ElementType. Inside this global JSX namespace, you can specify ElementType and add all of the different ones to a union. This one, keyof IntrinsicAttributes, this is like div, span, a, whatever. We've got function. Components. We've got class components.

2:12 Now, when you ship React Server Components or you adopt them, React types can specify that promises are allowed. This means that React or TypeScript 5.1 is an absolute must upgrade for anyone using React. I've been testing it on Total TypeScript. It seems to be absolutely fine. You should be trying it out by installing the beta here and telling them if you run into any issues.

2:37 Otherwise, you should check out this next video that I've got here, which is another little tiny tip on all the cool things happening in the TypeScript ecosystem. I've been Matt. You should check out my TypeScript course on totaltypescript.com. I will see you very soon.

TypeScript 5.1 is out! With important updates to React Server Components and some small usability updates.

Discuss on Twitter

More Tips

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