Try the Future TypeScript Engine With the WebStorm@next Program | The WebStorm Blog (2024)

News

TL;DR

There is an experimental WebStorm@next build, which introduces improved type inference for enhanced performance and accuracy. You can install it via the Toolbox App.

Introduction

The WebStorm team is currently undertaking a significant rework of the TypeScript language support. The new TypeScript engine will power future versions of WebStorm and other JetBrains IDEs with TypeScript support. Through the WebStorm@next program we are offering experimental builds for enthusiasts who are keen to provide their feedback, as well as for those of you who struggle with longstanding compatibility and performance issues with TypeScript. The program is scheduled to conclude before the launch of the 2024.1 EAP. We are eager to get your feedback, which we hope will enable us to polish the new engine and turn it on by default in the next major release.

Goals

The rework of the TypeScript engine is driven by two primary goals:

• Fixing compatibility issues. A major focus is to address and fix issues related to discrepancies with the native TypeScript type evaluation. By aligning more closely with the TypeScript compiler, we ensure that miscalculated types are minimized and overall type accuracy is increased.
• Boosting performance in specific scenarios. We are also committed to improving performance, especially in certain setups where users have historically faced problems.

Motivation

The TypeScript type system is renowned for its power, a quality that is essential for covering the dynamic nature of JavaScript. Since introducing TypeScript support, WebStorm has operated with its own TypeScript engine. This engine has been effective in evaluating types, closely replicating the type evaluation mechanisms of the TypeScript compiler.

However, this approach has led to the emergence of subtle bugs due to divergences from the TypeScript compiler. In the end, it has become clear that, while our efforts to match the TypeScript compiler’s accuracy have been significant, we can never surpass the precision of the TypeScript compiler itself.

Additionally, there is already integration with the TypeScript language server in WebStorm, which is utilized, for instance, in error highlighting. However, as we use both the language server and our type evaluation, in some cases the overall performance is limited by the slower component. Recognizing this, we have come up with the idea of utilizing the TypeScript language server’s capabilities for type evaluation to enhance both accuracy and performance.

Changes under the hood

In this update, a critical aspect to note is that our own robust TypeScript language support remains intact. All mechanisms that rely on IntelliJ PSI continue to operate as before. The primary change concerns type evaluation. The new engine utilizes the same TypeScript language service instance that is already in use. Additionally, we’re now retrieving type information, caching it, and converting it into our internal representation.

It’s important to emphasize that this shift doesn’t mean a complete transition to the language service. Therefore, plugin developers and our team can still utilize our model to provide complex refactorings and inspections. This new approach ensures that, while we align with TypeScript for improved accuracy, our powerful features continue to be functional.

What to expect

The new engine should primarily address issues in specific setups and projects, particularly those with complex TypeScript typings. While this update does not introduce new functionality, it affects crucial aspects of the IDE such as highlighting, inspections, completions, and navigation.

In terms of performance, you can generally expect a decrease in CPU consumption and an improvement in the responsiveness of completion and highlighting speed. However, please don’t expect widespread performance improvements across the entire IDE.

Area of application

While the new approach introduces substantial improvements, please be aware of its current application scope:

1. General TypeScript support: The new type evaluation is fully functional in *.ts and *.tsx files, ensuring general support for TypeScript files. Consequently, it works in React-based projects.
2. Integration with Vue: For Vue developers, the updated evaluation works effectively within <template> and <script> blocks if Volar integration is enabled and the bundled Vue language server is used.
3. JavaScript and other frameworks are not fully supported yet: The team is working to expand this solution to include full support of JavaScript and other popular frameworks. We anticipate the introduction of the expanded framework support in the coming year.

How to get it

The WebStorm@next program offers free-to-use Early Access Preview builds, and you can download them through the Toolbox App.

GET VIA TOOLBOX BUTTON

In the Toolbox, click the three dots button on the regular WebStorm item, and then select Other versions from the context menu.

Find the 2024.1 Next build and then click the Install button:

WebStorm@next builds do require a login and will expire one month after the build date.
We’re continuously improving the new engine, which means we’ll be regularly publishing updates. Just like the initial installation, these updates will be accessible via the Toolbox App.

Feedback

Your insights are incredibly important to us, especially in these areas:

• Overall experience when working with TypeScript: As mentioned before, the changes in type evaluation may affect various aspects, thus it’s crucial for us to verify that all smart features such as refactorings, quick-fixes, and find usages continue to work as expected.
• Performance: We’re interested in your experience regarding performance when working with TypeScript code in WebStorm. Any observations about variations in CPU consumption, responsiveness of completion, speed of highlighting and running inspections, or any other related aspect would be highly appreciated.

If you encounter any problems with type evaluation, we encourage you to create an issue and label it with the WebStorm@next tag. Here is the issue template for your convenience. If any issues arise, it would be great if you could provide a project and reproduction steps. If that’s not possible, please attach a CPU snapshot and the contents of the log folder.

Additionally, if there is a TypeScript-related issue you’ve previously reported or in which you’ve participated and the WebStorm@next build resolves it, please leave a comment on the corresponding issue. Your feedback is crucial to help us improve the performance and quality of WebStorm!

The WebStorm team