Is there a way to prevent Intellij from constantly compiling TypeScript at a very slow pace?

In the process of transitioning my Angular 1.x project from vanilla JS to TypeScript, I'm encountering frustratingly slow response times from my IDE.https://i.sstatic.net/LkiDj.png

When I uncheck "Track changes" in Settings > Languages & Frameworks > TypeScript, the compilation comes to a halt--but then my TS files don't compile at all!

While I could set up a gulp file with a watcher to recompile files upon change, I'd prefer to avoid having to run gulp for every project. Moreover, disabling "Track changes" removes TypeScript-specific suggestions and seems to break certain references.

With "Track changes" enabled: Assistance + References https://i.sstatic.net/nEwex.png

With "Track changes" disabled: No assistance + Broken References https://i.sstatic.net/bQby5.png

Question #1:

Can IntelliJ be configured to only compile changed files?

Question #2:

Why is IntelliJ compiling so many files? Here's a snippet of my tsconfig.json setup:

{
  "compilerOptions": {
    "module": "system",
    "noImplicitAny": false,
    "removeComments": true,
    "preserveConstEnums": true,
    "outFile": "build/local/tsc.js",
    "sourceMap": true,
    "typeRoots": [
      "./node_modules/@types",
      "./typings"
    ],
    "moduleResolution": "node"
  },

  "exclude": [
    "client/src/node_modules",
    "**/*.spec.ts",
    "src/bower_components",
    "client/src/bower_components",
    "client/src/node_modules",
    "build",
    "Saved_HTML",
    "site-ideas",
    "node_modules",
    "client/typings"
  ]
}

Despite specifying node_modules as an excluded directory, the compiler still seems to be delving into it. https://i.sstatic.net/6RSuO.png.

Answer №1

Query 1:

IntelliJ has a habit of frequently saving files, while Typescript compiles whenever a file is saved. Therefore, it is advisable to turn off or limit autosave.

Query 2:

If excluding files is not working as expected, consider adding "rootDir": "./yourSourceDir" instead of trying to exclude other files.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Formik QR code reader button that triggers its own submission

I recently developed a custom QR code reader feature as a button within the Formik component customTextInput.tsx, but I encountered an issue where clicking on the button would trigger a submission without any value present. The following code snippet show ...

Utilize TypeScript to match patterns against either a string or Blob (type union = string | Blob)

I have created a union type called DataType, type TextData = string type BinaryData = Blob type DataType = TextData | BinaryData Now, I want to implement it in a function function processData(data: DataType): void { if (data instanceof TextData) ...

Angular is unable to detect the dynamically loaded page when using Extjs

Within my Extjs SPA system, I have integrated Angular along with the necessary modules to be used on a page that is being referred in an external HTML panel in Extjs. While Angular is defined and functioning properly everywhere else, it seems to not work ...

Tomcat Java file location

My Java application is currently running on a Tomcat server and needs to read and write XML files to a specific directory. To achieve this, I have set up a constant in the code that defines the file path: public static final String DICTIONARY_PATH = getR ...

Error TS2322: You cannot assign a Promise<any> to a string type

Having an issue in my react app where I am attempting to import the img source but encountering an error: TS2322: Type 'Promise<any>' is not assignable to type 'string'. What is the correct way to import an element into a variabl ...

Unable to connect to localhost nodejs server from Windows browser when using WSL2

My computer runs on Windows 10 and has the Linux (Ubuntu-20.04) subsystem using WSL2. I've successfully initiated a frontend project (vue project) and running npm run serve works as expected with the application running on localhost:8080. However, whe ...

Adding an anchor tag to an ngx-datatable-column can be done by utilizing the properties

My task involves loading data from the server and populating the ngx-datatable. When a specific column is clicked (with either a link <a href="randomurl"/> or [routerLink]="randomcomponent"), it should redirect to a different page or display a modal ...

Tips for creating a redirect to a specific page after clicking a link in an email using Angular

I've been working on implementing a feature in Angular where users can click on a link provided in an email and then get redirected to the respective page after authentication. I've tried a few different approaches, but none of them seem to be wo ...

Oops! The type '{}' is lacking the properties listed below

interface Human { firstName: string; lastName: string; } let human1: Human = {}; human1.firstName = "John" human1.lastName = "Doe" Upon declaring human1, an error pops up: Type '{}' is missing the following properties from type Human ...

Struggling to grasp how to implement Redux and React-router together in one component

I have recently embarked on learning TypeScript and encountered a confusing behavior. Upon encountering this error: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> ...

Is it necessary for me to individually download every x.d.ts file for my application?

Do I need to include the following line for type checking when using fs.readFile in TypeScript? /// <reference path="node.d.ts" /> Is it considered 'best practice' to download and maintain the most recent version of node.d.ts file in my ...

Is it recommended to use separate Controllers for each tab in Angular JS to load the pane?

Recently delving into the world of Angular JS and eagerly seeking expert advice and suggestions. Would it be advisable to use separate controllers for initializing each Tab to load the Pane content? Is assigning separate controllers a recommended approac ...

Exclude items from AngularJS watch list

Is there a way to manually run a digest loop on specifically selected watches? Take, for example, the scenario where I need a directive that constantly displays the current time (including seconds), but without triggering the digest loop every second. One ...

Divide MUI theme into individual files

I have encountered an issue in my Next.js project. I currently have an index.ts file residing in the src/theme directory. 'use client'; // necessary for MUI to work with nextjs (SSR) import { createTheme } from '@mui/material/styles'; i ...

Comparison between bo-html and bo-text

As I was going through the documentation for the bindonce directive, a question popped into my head regarding the distinction between bo-html and bo-text. bo-html: This evaluates "markup" and displays it as HTML within the element. bo-text: ...

Issue with clicking checkbox using Protractor

Having trouble clicking a checkbox within an ng-repeater using Protractor with the following HTML structure. https://i.sstatic.net/FpY1x.png The snippet of code I'm currently using is as follows: element.all(by.repeater('user in siteUsers | fi ...

The 'type' property within the NGRX Effect is not present in the type Observable<any[]>

I am currently in the process of upgrading my Angular app from version 6 to version 7. Additionally, I am upgrading the TypeScript version from 2.7.2 to 3.1.6. The issue I'm encountering is that TypeScript is flagging an error stating that my ngrx ef ...

Angular8: Adjusting Activity Status After Leaving Page

When performing activities like upload, download, delete, and edit, I display statuses such as 'upload started' or 'upload completed'. This works perfectly when staying on the same page. However, there are instances where a user may nav ...

Implementing the sorting feature in Angular JS to properly align sub sections with their correct parent sections

I'm facing an issue with the functionality of my sample code. Users can add sections and subsections within those sections, which are sortable using ui-sortable. However, after sorting the items, if I try to add a new sub-section to Section 2, it wron ...

How can I handle optional props with defaults in React + TypeScript without relying on typecasting while ensuring strictNullChecks is enabled?

Consider the scenario where we have the following component: interface Props { someOptionalProp?: string; } class SomeComponent extends React.Component<Props, {}> { public static defaultProps = { someOptionalProp: 'some defaul ...