Do TypeScript project references provide value when noEmit is used?

To enhance the speed of my editor interaction and reduce the time taken by tsc to run on my TypeScript code, I am considering implementing project references. Many teams have reported substantial performance improvements after incorporating project references into their workflow.

There are distinct breakpoints in my code structure that could be transformed into independent projects:

root/
  client/
    src/
    test/
  server/
    src/
    test/
  common/
    src/
    test/

Currently, I have set noEmit in my tsconfig.json as my processes do not typically require tsc to generate .js or .d.ts files. I compile my client code using Webpack and test my server code using ts-node. Error checking is disabled for these processes, and I primarily rely on VS Code and pre-push hooks for type error detection.

I was under the impression that TypeScript project references necessitated the generation of .js and .d.ts files. The example project project-references-demo follows this pattern. Will implementing project references enhance the speed of VS Code (via tsserver) even without emitting JavaScript? Would tsc --noEmit also experience performance improvements? Are there any instances of TypeScript projects utilizing noEmit that have benefited significantly from employing project references?

typescriptvisual-studio-code

Answer №1

Is it true that in order to use TypeScript project references, you had to generate .js and .d.ts files? The standard project-references-demo project follows this practice. Can you confirm?

I believe that project references did not require the emission of JS files to function. However, prior to version 3.7, it was necessary to emit type declaration files for a better IDE experience.

According to the TypeScript 3.7 release notes' section on "Build-Free Editing with Project References":

Project references in TypeScript allow for easier codebase organization to speed up compilation. In the past, editing projects with dependencies that had not been built or had outdated output led to a poor editing experience.

With TypeScript 3.7, when opening a project with dependencies, the source .ts/.tsx files are used automatically. This improvement enhances the editing experience for projects using project references where semantic operations are current and functional. You can opt out of this behavior with the compiler option 

disableSourceOfProjectReferenceRedirect
, especially in large projects where performance may be affected.

More details on this change can be found in the related pull request here.

Additionally, prior to v4.0, incremental builds were not supported with noEmit. Refer to the v4.0 release notes' section on "--incremental with --noEmit" for more insights:

In TypeScript 4.0, the noEmit flag can be used while benefiting from incremental compiles. This was previously restricted since incremental requires emitting .tsbuildinfo files, but the need for faster incremental builds outweighs this limitation and is now available for all users.

For more information, check out the implementation details in the respective pull request here.

For performance enhancements,

As mentioned in the documentation:

A new mode for tsc, the --build flag, is introduced for faster TypeScript builds in conjunction with project references.

The TypeScript team continuously focuses on improving performance. Visit their website for more release notes highlighting speed improvements, such as the 3.9 release notes with a section dedicated to speed enhancements, and the v3.6 release notes discussing "APIs to Support --build and --incremental", enabling third-party tools like Gulp and Webpack to utilize incremental builds.

If you utilize Webpack for building and are concerned about developer tooling performance, consider exploring esbuild and the esbuild loader for Webpack.

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

Prevent Component Reloading in Angular 4 when revisiting the page

My application consists of three main components: 1) Map 2) Search 3) User Profile Upon logging in, the MAP component is loaded by default. I can navigate to other screens using the header menu link. I am looking to implement a feature where the map comp ...

angulartypescriptbing-maps

Unable to set a breakpoint within Angular constructor or OnInit method

I am currently facing an issue with my Angular application where breakpoints set in F12 tools in Chrome or IE are not working. I have a simple test case below: export class LoginComponent implements OnInit { message: string; constructor(private r ...

angulartypescriptwebpackgoogle-chrome-devtools

What is preventing me from iterating through a dictionary or an array of keys?

After trying to log the dictionary using console.log(JSON.stringify(this.idTitleDict)) as suggested by @Kobe, I noticed that it was showing empty curly braces. All the code related to this dictionary (including its declaration and population) can be found ...

javascriptangulartypescriptfor-loop

Is it possible for OpenFin to store logs in a secure database and what is the process for accessing logs located at %LocalAppData%openfinapps<app>app.log

System Information Here are the details of the system setup: OpenFin Process Manager Version: RVM = 8.1.0.4 Node.js: v16.15.0 Windows 10 Angular Application with C# .NET backend Issue: The current setup saves all application logs locally on users' ...

angulartypescriptloggingerror-handlingopenfin

Retrieving the value that is not currently selected in a mat-select component

In my mat-table, there is a mat-select component displayed like this: <mat-select multiple placeholder="{{element.name}}" [(value)]="selectedCol" (selectionChange)="selectionChange($event)" [disabled]="!selection.isSelected(element.id)"> & ...

angulartypescriptangular-material

Customize the datepicker locale in Valor

Currently, I am working with Angular2 and typescript alongside the Valor datepicker. Unfortunately, the datepicker does not have the necessary locale built-in. After some research, I discovered that the essential JavaScript file containing the locale infor ...

angulartypescriptdatepicker

Can I modify a global array by updating a dynamically created array in the ngOnInit method of Angular?

Are there any suggestions on how to make a dynamic array available globally in Angular? I am currently using this codepen () which stores clicked countries in an array. The issue is that the array is nested within a function in ngOnInit and I need it to b ...

angulartypescriptamcharts

How can I apply styling to Angular 2 component selector tags?

As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...

javascriptcssangulartypescriptsass

Autoformatting files with ESLint on save

I'm encountering an issue where Visual Studio Code is saving my file in violation of the rules specified in my eslint configuration when using eslint and prettier for formatting. module.exports = { env: { browser: true, es2022: true, nod ...

reactjstypescripteslintprettier

What is the best way to handle missing values in a web application using React and TypeScript?

When setting a value in a login form on the web and no value is present yet, should I use null, undefined, or ""? What is the best approach? In Swift, it's much simpler as there is only the option of nil for a missing value. How do I handle ...

reactjstypescriptwebdefault-value

Why is TypeScript unable to recognize package exports? (using CommonJS as the module system and Node as the module resolution)

I have an NPM package that is built for ESM and CJS formats. The package has a dist folder in the root directory, which contains: dist/esm - modules with ESM dist/cjs - modules with CJS dist/types - typings for all modules In the package.json file, there ...

javascriptnode.jstypescriptnpmpackage.json

Guide on utilizing a declaration within a third-party module

I have encountered an issue while using the fingerprintjs2 library, as the declaration provided in DefinitelyTyped seems incomplete and incompatible. In order to resolve this, I decided to create my own declaration within my project. However, I am facing ...

typescripttypescript-typings

My tests are unable to execute on the test database due to the lack of a defined service

I am currently trying to execute my test file in NestJS. My goal is to connect to a test database and run my service with it. However, I am facing an issue where my service is undefined and the method service.findById is also undefined. How can I obtain an ...

typescriptjestjsnestjs

Exploring the NextPage type in Next.js

Could someone provide an explanation of the NextPage type within a Next.js TypeScript project? Most sources mention that it is used for type assignment in Next.js, but I am curious about its practical purpose. When and why should we utilize this type? Wha ...

typescriptnext.js

Could you provide an explanation of the styled() function in TypeScript?

const Flex = styled(Stack, { shouldForwardProp: (prop) => calcShouldForwardProp(prop), })<LayoutProps>(({ center, autoWidth, autoFlex, theme }) => ({ })); This syntax is a bit confusing to me. I understand the functionality of the code, b ...

typescriptmaterial-ui

Error in Redux with TypeScript: "Argument of type 'AsyncThunkAction<any, number, {}>' is not compatible with parameter of type 'AnyAction'"

So I've been working on this dispatch function: const dispatch = useAppDispatch() const handleFetch = (e: React.MouseEvent<HTMLAnchorElement>) => { const target = e.target as Element dispatch(fetchCity(parseInt(ta ...

reactjstypescriptredux

Encountered a hiccup when attempting to include the DatePicker component in app.module.ts using

I'm encountering an issue with some providers in my app.module.ts file. Specifically, when trying to use the DatePicker component, I'm getting this error message: Type 'DatePickerOriginal' is not assignable to type 'Provider'. ...

angulartypescriptcordovaionic-framework

What causes userAgent to be undefined within _app.tsx during the use of getInitialProps?

When I check the code below, I'm encountering userAgent being retrieved as undefined: const userAgent = context.req?.headers['user-agent'] ?? ''; The issue persists with isMobile, where it's also being returned as undefined a ...

typescriptreduxnext.jstypeerrorserver-side

Using `querySelector` in TypeScript with Vue 3

Encountered a TypeScript error while using the Vue Composition API let myElement = document.querySelectorAll('my-element') The TS error I'm getting when trying to access it like this: Property '_props' does not exist on type ...

typescriptvue.jsvuejs3

Guide on importing npm packages without TypeScript definitions while still enabling IDE to provide intelligent code completion features

I am currently utilizing an npm package that lacks type definitions for TypeScript. Specifically, I'm working with the react-google-maps library. Following their recommended approach, I have imported the following components from the package: import ...

javascripttypescriptnpmwebstormtypescript-typings