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.
More Tips
Type Predicates
1 min
How to Name your Types
4 mins
Don't use return types, unless...
4 mins
TypeScript 5.0 Beta Deep Dive
6 mins
Conform a Derived Type Without Losing Its Literal Values
1 min
Avoid unexpected behavior of React’s useState
1 min
Understand assignability in TypeScript
2 mins
Compare function overloads and generics
1 min
Use infer in combination with string literals to manipulate keys of objects
1 min
Access deeper parts of objects and arrays
1 min
Ensure that all call sites must be given value
1 min
Understand how TypeScript infers literal types
1 min
Get a TypeScript package ready for release to NPM in under 2 minutes
1 min
Use assertion functions inside classes
1 min
Assign local variables to default generic slots to dry up your code and improve performance
2 mins
Know when to use generics
2 mins
Map over a union type
1 min
Make accessing objects safer by enabling 'noUncheckedIndexedAccess' in tsconfig
1 min
Use generics to dynamically specify the number, and type, of arguments to functions
1 min
Use 'declare global' to allow types to cross module boundaries
2 mins
Turn a module into a type
2 mins
Create autocomplete helper which allows for arbitrary values
2 mins
Use deep partials to help with mocking an entity
1 min
Throw detailed error messages for type checks
1 min
Create a 'key remover' function which can process any generic object
1 min
Use generics in React to make dynamic and flexible components
1 min
Create your own 'objectKeys' function using generics and the 'keyof' operator
1 min
Write your own 'PropsFrom' helper to extract props from any React component
1 min
Use 'extends' keyword to narrow the value of a generic
1 min
Use function overloads and generics to type a compose function
2 mins
Decode URL search params at the type level with ts-toolbelt
2 mins
Use 'in' operator to transform a union to another union
2 mins
Derive a union type from an object
2 mins