Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to debug TypeScript compilation performance issues

My TypeScript project has been going for a while now, and is quite large. Recently compile time performance has become significantly worse. I think it's likely that some of the 'neat' typing tricks that I've included somewhere are causing this.

Unfortunately it's a large project, and includes many other large TypeScript dependencies, so it's hard to know the exact root cause.

Are there any tools to debug TS compiler typechecking performance in situations like this? E.g. to see which files/types take TypeScript the most time to compile.

like image 975
Tim Perry Avatar asked Aug 12 '19 13:08

Tim Perry


People also ask

How do I run or debug a typescript file?

In the JavaScript File field, specify the file to run or debug. Depending on your workflow, you can do that explicitly or using a macro. If you are going to always launch the same TypeScript file, click and select this file in the dialog that opens. By default, the run/debug configuration gets the name of the selected file.

Is it possible to debug typescript client-side code?

Debugging of TypeScript client-side code is only supported in Google Chrome and in other Chromium-based browsers. For information on running and debugging TypeScript with Angular, see Running and debugging Angular applications.

Why is typescript so slow?

The method analyzes the whole edited file, running types inference where needed That type inference is very, very expensive, and furthermore seems it's not linear of the file size TypeScript is slow by nature. Its performance degrades with the file size, and the relation is likely non-linear. But what can we do? Just keep files small.

How do I configure typescript and JavaScript compilations?

TypeScript and JavaScript users can always configure their compilations with a tsconfig.json file. jsconfig.json files can also be used to configure the editing experience for JavaScript users. You should always make sure that your configuration files aren't including too many files at once.


1 Answers

TypeScript 4.1 introduced a generateTrace flag to make it easier to identify the parts of a program that are taking the most time to compile.

There is a dedicated WIKI here

Please keep in mind:

This feature is still experimental and will likely change significantly in TS 4.2

like image 80
captain-yossarian Avatar answered Oct 07 '22 13:10

captain-yossarian