Suggestions for enhancing or troubleshooting Typescript ts-node compilation speed?

Recently, I made the switch to TypeScript in my codebase. It consists of approximately 100k lines spread across hundreds of files.

Prior to the migration, my launch time was an impressive 2 seconds when using ESLint with --fix --cache. However, after implementing TypeScript (ts-node), the launch time has drastically increased to 25 seconds (20 seconds attributed solely to TypeScript).

It's important to note that this project is focused on backend development exclusively.

The current speed of 25 seconds is quite concerning and not ideal. Is this considered normal for TypeScript setups? Despite efforts to eliminate dynamic requires, the delay persists. Could a large file be the culprit behind the slow performance? How can I pinpoint the source of the slowdown?

typescript

Answer №1

Running a production build with ts-node is not necessary as it transpiles your code on the fly. By simply checking it, running ts-node, and pasting some code, you can observe the sources of the runtime code. Keep in mind that compilation level and other configurations specified in your tsconfig file also play a significant role.

> const a = (a: string) => a + 'hello';
undefined
> a.toString()
"function (a) { return a + 'hello'; }"

When you run your project, it performs the following steps:

  • Typeschecks every file
  • Transpiles every file
  • Interprets each file
  • Finally runs your code

Since it's an interpreted process, time is consumed in the sequence (require -> typecheck -> transpile -> run -> repeat) until all your code is executed. If your codebase is vast, you may encounter performance issues during the typechecking phase.

Answer №2

Optimal solutions tailored for development environment

  • To enhance efficiency, utilize tsc --watch as it rapidly rebuilds only the modified files upon changes.

Alternatively,

  • Consider leveraging ts-node-dev, which combines ts-node with nodemon or pm2 to automatically recompile and restart the server when file modifications occur.

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

Encountering error TS2307: Module 'redux' not found when trying to implement redux in Angular 7

Currently, I am diving into the world of Redux and attempting to integrate it into my Angular 7 project using ng2-redux. However, upon visiting the npm page, I discovered that the recommended approach was to install it with npm install @angular-redux/store ...

javascriptangulartypescriptredux

Identify and handle errors effectively using TypeScript

I have a question regarding my Express server setup. Here is the code snippet: import express from "express"; import helmet from "helmet"; import cors from "cors"; const app = express(); app.use(helmet()); app.use(cors()); a ...

typescriptexpresshelmet.js

Testing a function that utilizes Nitro's useStorage functionality involves creating mock data to simulate the storage behavior

I have developed a custom function for caching management, specifically for storing responses from API calls. export const cache = async (key: string, callback: Function) => { const cacheKey = `cache:${key}`; const data = await useStorage().get ...

typescriptnuxt.jsnuxtjs3vitestnitro

Encountering an unusual behavior with React form when using this.handleChange method in conjunction

RESOLVED I've encountered a quirky issue with my React/Typescript app. It involves a form used for editing movie details fetched from a Mongo database on a website. Everything functions smoothly except for one peculiar behavior related to the movie t ...

reactjsmongodbtypescriptforms

Show the Array List in a left-to-right format

Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...

cssangulartypescript

What is the proper way to utilize RxJS to append a new property to every object within an array that is returned as an Observable?

I'm not very familiar with RxJS and I have a question. In an Angular service class, there is a method that retrieves data from Firebase Firestore database: async getAllEmployees() { return <Observable<User[]>> this.firestore.collectio ...

angulartypescriptrxjsrxjs-observables

Error: Type '() => () => Promise<void>' is not compatible with type 'EffectCallback'

Here is the code that I'm currently working with: useEffect(() => { document.querySelector('body').style['background-color'] = 'rgba(173, 232, 244,0.2)'; window.$crisp.push(['do', 'ch ...

reactjstypescriptnext.js

Best practice for encapsulating property expressions in Angular templates

Repeating expression In my Angular 6 component template, I have the a && (b || c) expression repeated 3 times. I am looking for a way to abstract it instead of duplicating the code. parent.component.html <component [prop1]="1" [prop2]="a ...

htmlangulartypescript

What is the correct way to set up a custom class instance with specific parameters at the top level?

Is it possible to utilize the defineString(), defineInt, ... functions within a top-level custom class constructor? defineString() returns a StringParam object which has a value() method. I am looking to use parameterized configuration to initialize an in ...

node.jstypescriptfirebasegoogle-cloud-functionsfirebase-tools

Click event to verify, delete, and include class identifier in angular13

Looking to enhance functionality by dynamically adding and removing the 'active' class to 'li a' elements on click. While the current code performs well when clicking from top to bottom, it fails to work in reverse order. component.htm ...

javascriptangulartypescript

The error message "this.startLoginAnimatioon is not defined as a function" popped up

I've been developing a login system using TypeScript but I keep encountering an error that I can't figure out. Here's the issue in detail: The problem arises when the this.startLoginAnimation() function is called within the attemptLog ...

typescript

Unable to find solutions for all parameters needed by a CustomComponent within Angular

Whenever I attempt to compile the project for production, an error pops up: There is a problem resolving all parameters for EmployeeComponent in C:/.../src/app/employee/employee.component.ts: (?, ?, ?). Oddly enough, when I run the application, every ...

angulartypescript

Dependencies exclusively for NPM post-installUnique Rewrite: "N

I have been using git to distribute an internal TypeScript NPM package. To avoid cluttering my repository with build files, I have implemented a postinstall action to build the package upon installation: "postinstall": "tsc -p tsconfig.json& ...

typescriptnpmyarnpkg

An error has occurred: Type 'x' is not compatible with type 'x' (during Vercel deployment)

I encountered an issue during Vercel deployment which displays the following error message: - Type error: Type ' ({ params }: DashboardPageProps) = Promise' is not compatible with type 'FC<.DashboardPageProps>' Type 'Promise ...

typescriptnext.jsvercel

Using a union type annotation when passing into knex will result in the return of an unspecified

Knex version: 2.5.1 Database + version: postgres15 When passing a union typescript definition into knex as a type annotation, it returns the type any. However, by using type assertion as UserRecord, we can obtain the correct UserRecord type. It is my un ...

javascriptnode.jstypescriptpostgresqlknex.js

How can I suggest the return type of a function that is out of my control?

When I attempt to parse a JSON-formatted string, a linter error is triggered: let mqttMessage = JSON.parse(message.toString()) // ESLint: Unsafe assignment of an `any` value. (@typescript-eslint/no-unsafe-assignment) Given that I am in control of the con ...

jsontypescripteslinttype-assertion

Unable to classify mapRef.current

I am facing an issue with my react component that contains a leaflet map. TypeScript is warning me about line mapRef.current.setView(coords, 13), stating it is an "unsafe call of an any typed value" import 'leaflet/dist/leaflet.css'; import { Map ...

javascriptreactjstypescriptleaflet

What is the correct way to configure the environment variables for the vscode plugin?

After attempting to set it using cross-env, the variable remained undefined following execution in VSCode. What steps can I take to resolve this issue? ...

typescriptvisual-studio-code

Clearing error messages from a form using the reset button or after cancelling the form

I am having trouble removing the error outline around the input box and error messages displayed below it. When I cancel the form or click on the reset button, the input fields' content along with the error messages should be cleared. However, current ...

angulartypescript

NPM: There are no valid TypeScript file rules specified

Currently working on a small project using React.JS. Whenever I execute : npm run start, the following message gets logged: Starting type checking and linting service... Using 1 worker with 2048MB memory limit Watching: /Users/John/Projects/myProject/src ...

javascriptjsonreactjstypescriptnpm