Skip to content
tezvyn:
Menu

Speed Up Builds with TypeScript Project References

Source: typescriptlang.orgHardHow cards are made

Treat your codebase like a set of independent packages. Project References let you split a large project into smaller, interconnected pieces, dramatically speeding up builds by only recompiling what's changed.

Why it exists

Before Project References, large TypeScript codebases were awkward. A single tsconfig.json meant source code could accidentally import test files, and any small change triggered a full re-check of everything. Using multiple tsconfig files was a manual hack that was slow and couldn't be 'watched' easily.

The mental model

Treat your large TypeScript project not as one monolith, but as a collection of smaller, independent sub-projects that depend on each other. Project References formalize this dependency graph, allowing the compiler to build them like a package manager would build dependencies—only when necessary.

How it works

You add a "references" array to a tsconfig.json file. Each item in the array is an object with a "path" pointing to another directory that has its own tsconfig.json. When TypeScript compiles your project, two key things happen. First, any import from a referenced project resolves to its pre-compiled declaration file (.d.ts), not its source code (.ts). Second, running the compiler with the --build flag (or tsc -b) will first check if any referenced projects are out of date and build them if needed.

When to use it

Use Project References in any large codebase or monorepo to enforce logical boundaries and improve build performance. It's perfect for separating a shared 'core' library from multiple applications that consume it, or for isolating test suites from the application code they are testing. This prevents changes in one part from triggering slow, unnecessary type-checking across the entire project.

When not to use it

For small, simple projects with a handful of files, Project References are overkill. The overhead of setting up multiple tsconfig.json files and managing the dependency structure outweighs the benefits. Stick with a single tsconfig.json until build times become a noticeable problem or your project's structure becomes difficult to manage.

One canonical example

A common setup is to separate source code from test code. You would have a src/tsconfig.json for your main application and a test/tsconfig.json for your tests. The test tsconfig.json would include a reference like { "path": "../src" }. This ensures that tests can import from src, but src cannot import from test. When you run tsc --build in the test directory, it will first ensure src is compiled correctly before compiling the tests.

Interview question

What is the primary way TypeScript Project References optimize build times in a monorepo?

  • a.By merging all tsconfig.json files into a single, unified configuration for faster processing.
  • b.By converting all TypeScript files in referenced projects directly to JavaScript without generating declaration files.
  • c.By ensuring that only projects with modified source code or outdated dependencies are recompiled and re-type-checked.Correct
  • d.By allowing the compiler to skip type-checking for any code imported from a referenced project.
Why?

The card states that Project References speed up builds "by only recompiling what's changed" and that `tsc --build` checks if referenced projects are out of date before building them. While imports from referenced projects use pre-compiled declaration files, the referenced projects themselves are still type-checked and recompiled if they are out of date, ensuring type safety.

Just read this? Test yourself on what you have been reading.

Read the original → typescriptlang.org

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on typescript — each one lists the topics its interview covers.

See open roles