TypeScript - 5.1 is here! -What's new ?
Tags: typescript, programming, productivity, web
Published: 2023-06-03 09:29:44


**TypeScript 5.1** introduced several new features and improvements. 
Here's a summary of what's new in TypeScript 5.1:

 - **Easier Implicit Returns for undefined-Returning Functions**: TypeScript 5.1 allows undefined-returning functions to have no return statement, simplifying the syntax.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewy48kgza0vpnwztj1jr.png)


-  **Unrelated Types for Getters and Setters**: TypeScript now allows get and set accessor pairs to specify different types.

```typescript
interface Serializer {
    set value(v: string | number | boolean);
    get value(): string;
}
declare let box: Serializer;
// Allows writing a 'boolean'
box.value = true;
// Comes out as a 'string'
console.log(box.value.toUpperCase());
```


- **Decoupled Type-Checking Between JSX Elements and JSX Tag Types**: TypeScript 5.1 allows JSX libraries to accurately describe what JSX components can return, making it possible to use asynchronous server components in libraries like React. 


```typescript
// Previously in TypeScript versions before 5.1
const myComponent: JSX.Element = <MyComponent prop1="value" prop2={42} />;

// With TypeScript 5.1, you can omit the explicit JSX tag type
const myComponent = <MyComponent prop1="value" prop2={42} />;
```

-  **Namespaced JSX Attributes**: TypeScript now supports namespaced attribute names when using JSX, allowing more flexibility in attribute naming.
When type-checking <Foo /> or <Bar></Bar>, TypeScript always looks up a namespace called JSX and fetches a type out of it called Element - or more directly, it looks up JSX.Element.

```typescript
// A self-closing JSX tag
<Foo />
// A regular element with an opening/closing tag
<Bar></Bar>

// Old versions of TypeScript
import * as React from "react";
async function Foo() {
    return <div></div>;
}
let element = <Foo />;
//             ~~~
// 'Foo' cannot be used as a JSX component.
//   Its return type 'Promise<Element>' is not a valid JSX element.
```
- **typeRoots Are Consulted In Module Resolution**: TypeScript's module resolution strategy now considers the specified typeRoots when resolving package paths.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ibvw1xbv29avwz2kmk4u.gif)


- **Linked Cursors for JSX Tags**: TypeScript now supports linked editing for JSX tag names, allowing simultaneous editing of multiple locations.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r34n9nlpbgomz6g0wox3.gif)


- **Snippet Completions for @param JSDoc Tags**: TypeScript provides snippet completions when typing out the @param JSDoc tag, improving the documentation process.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtl5n6a7tecx4n531kil.gif)



- In addition to these new features, TypeScript 5.1 includes **optimizations to improve performance** and addresses some breaking changes related to the minimum runtime requirements (**ECMAScript 2020 and Node.js 14.17**).

Please note that this information is based on the provided announcement, and you can refer to the official TypeScript documentation or release notes for more detailed information about TypeScript 5.1. or this good [blog post](https://devblogs.microsoft.com/typescript/announcing-typescript-5-1/#linked-cursors-for-jsx-tags).

---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2zcidciydse9dofz4fs.png)


[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/kristiyan-velkov-763130b3/)

<a href="https://revolut.me/kristiyanvelkov" target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxmsw2d2ooukhdg8x5ar.png)
</a>

If you like my work and want to support me to work hard, please donate via:

<a href="https://revolut.me/kristiyanvelkov" title="Link to Revolut">Revolut website payment</a> or use the QR code above.                                                                                                                           


**Thanks a bunch for supporting me! It means a LOT 😍**

---