DEV Community

Cover image for TypeScript - 5.1 is here! -What's new ?
Kristiyan Velkov
Kristiyan Velkov

Posted on • Updated on

TypeScript - 5.1 is here! -What's new ?

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

  • Unrelated Types for Getters and Setters: TypeScript now allows get and set accessor pairs to specify different types.
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'
Enter fullscreen mode Exit fullscreen mode
  • 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.
// 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} />;
Enter fullscreen mode Exit fullscreen mode
  • Namespaced JSX Attributes: TypeScript now supports namespaced attribute names when using JSX, allowing more flexibility in attribute naming. When type-checking or , 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.
// A self-closing JSX tag
<Foo />
// A regular element with an opening/closing tag

// 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.
Enter fullscreen mode Exit fullscreen mode
  • typeRoots Are Consulted In Module Resolution: TypeScript's module resolution strategy now considers the specified typeRoots when resolving package paths.

Image description

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

Image description

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

Image description

  • 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.

Image description


Image description

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

Revolut website payment or use the QR code above.

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

Top comments (2)

kristiyan_velkov profile image
Kristiyan Velkov • Edited

Don't forget to SUBSCRIBE 🚀😍

Don't miss out on the latest updates in the Front-end world!
Stay up to date with the newest trends, technologies, and insights by subscribing.

kristiyan_velkov profile image
Kristiyan Velkov • Edited

SHARE what you like most about the new updates? 💻🚀