The TypeScript 5.3 Feature They Didn't Tell You About
TypeScript 5.3 introduces relaxed rules around readonly arrays and improvements in const type parameters.
The TypeScript 5.1 beta is out - here's everything you need to know:
5.1 doesn't bring much in the way of new features. It's not got much in the way of new keywords or new tools for transforming types.
One small improvement is to usability improvements in functions which return ,undefined
. If you've got a type that expects () => undefined
...
typescript
type FunctionReturningUndefined = () => undefined
...in 5.0 you'd need to explicitly return a value of undefined
for it to work:
typescript
// Type '() => void' is not assignable to type// 'FunctionReturningUndefined'.const myFunc: FunctionReturningUndefined = () => {}const myFunc2: FunctionReturningUndefined = () => {// Now it's happy!return undefined}
But in 5.1, both of the above cases will pass.
Another nice feature is linked cursors in JSX. This means when you're editing the opening tag of a <div>
in JSX, it'll also edit the closing tag. Beautiful.
These are nice usability improvements, but even together they don't feel like enough for a new TS version. So - what's the headline?
This is why 5.1 is shipping now. React Server Components don't really work in TypeScript.
The reason for that is that React Server Components introduced async
components:
tsx
const MyAsyncComponent = async () => {return <div></div>}const Parent = () => {// 'MyAsyncComponent' cannot be used as a JSX// component. Its return type 'Promise<Element>'// is not a valid JSX element.return <MyAsyncComponent />}
Before 5.1, TypeScript hard-coded an idea of what they expected valid JSX elements to be - it was JSX.Element | null
. Along with blocking Server Components, this meant that perfectly valid React code, like returning strings from components, was not allowed:
tsx
const MyStringComponent = () => {return 'Hello world!'}const Parent = () => {// 'MyStringComponent' cannot be used as a JSX component.// Its return type 'string' is not a valid JSX element.return <MyStringComponent />}
Now, TypeScript will consult a global type called JSX.ElementType
to calculate if a JSX component is valid. This gives frameworks that use JSX (like React, Solid and Qwik) a LOT more control over what constitutes a valid JSX element - opening up the potential for new API's using JSX itself.
I've tested 5.1 with Total TypeScript so far, and I've seen no breaking changes. I imagine you're safe to upgrade - and if you're using React Server Components, it's an absolute must.
If you've enjoyed this breakdown, check out my video on Total TypeScript to learn more.
Share this article with your friends
TypeScript 5.3 introduces relaxed rules around readonly arrays and improvements in const type parameters.
Learn how to provide a TypeScript playground when asking for help with your TypeScript questions, making it easier for others to assist you.
Learn how to work with events in React and TypeScript, from onClick to onSubmit.
A step-by-step guide on setting up ESBuild to bundle a Node application.
When using '--moduleResolution' with the option 'nodenext', it is necessary to add explicit file extensions to relative import paths in EcmaScript imports.
Learn how to add TypeScript to your existing React project in a few simple steps.