28.10. Configuring tsconfig: Composite Projects and Project References

TypeScript's tsconfig.json file is a cornerstone for configuring projects, allowing developers to define how their TypeScript code is compiled. As projects grow in complexity, especially in monorepos or when managing multiple interdependent packages, TypeScript introduces advanced features like Composite Projects and Project References to handle such scenarios efficiently.

Composite Projects and Project References are designed to improve the management and build performance of large codebases. They enable developers to break down their code into smaller, manageable pieces while still maintaining a cohesive build process. Let's delve into these concepts and see how they can be configured in tsconfig.json.

Understanding Composite Projects

A Composite Project in TypeScript is a project that is designed to be part of a larger build. It is a TypeScript project that can reference other projects or be referenced by other projects. The main purpose of a Composite Project is to enable incremental builds, meaning only the changed parts of the codebase need to be recompiled, significantly speeding up the build process.

To define a project as a composite, you need to set the "composite" option to true in your tsconfig.json:

{
  "compilerOptions": {
    "composite": true,
    ...
  }
}

When a project is marked as a composite, TypeScript generates additional metadata that helps with incremental builds. This includes an additional .tsbuildinfo file that stores information about the build state of the project.

Benefits of Composite Projects

• Incremental Builds: By only recompiling changed files, composite projects reduce build times.
• Dependency Management: Composite projects make it easier to manage dependencies between different parts of a codebase.
• Improved Build Performance: With the metadata generated by composite projects, TypeScript can avoid unnecessary recompilation.

Introducing Project References

Project References are a way to structure TypeScript projects such that one project can depend on another. This is particularly useful in monorepos or when you have multiple packages that need to be built separately but are interdependent.

To set up Project References, you need to add a "references" array in your tsconfig.json, listing the paths to other projects that the current project depends on:

{
  "compilerOptions": {
    "composite": true,
    ...
  },
  "references": [
    { "path": "../projectA" },
    { "path": "../projectB" }
  ]
}

Each referenced project must itself be a composite project. This ensures that all projects involved in the references can participate in the incremental build process.

Configuring Project References

When configuring Project References, there are a few important considerations:

1. Output Directories: Ensure that the output directories for compiled files do not overlap between projects. This avoids conflicts and ensures a clean build.
2. Build Order: TypeScript automatically determines the build order based on the references. You can use the tsc --build command to build all referenced projects in the correct order.
3. Consistency: Ensure that all referenced projects have consistent compiler options, especially those related to module resolution and output formats.

Benefits of Project References

• Modularization: Break down large codebases into smaller, manageable projects.
• Independent Builds: Build projects independently while maintaining the ability to reference other projects.
• Improved Build Times: By leveraging incremental builds across projects, you can significantly reduce build times.

Practical Example

Consider a scenario where you have a monorepo with three projects: a core library, a utilities library, and an application that uses both. Here's how you might configure the tsconfig.json files:

// core/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "outDir": "dist"
  }
}

// utils/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "outDir": "dist"
  },
  "references": [
    { "path": "../core" }
  ]
}

// app/tsconfig.json
{
  "compilerOptions": {
    "composite": true,
    "outDir": "dist"
  },
  "references": [
    { "path": "../core" },
    { "path": "../utils" }
  ]
}

In this setup, the utilities library references the core library, and the application references both the core and utilities libraries. This ensures that changes in the core library trigger rebuilds in the utilities library and the application, but only the necessary parts are recompiled.

Building Projects with References

To build a project with references, you can use the tsc --build command. This command is specifically designed to work with composite projects and project references:

tsc --build app/tsconfig.json

This command will build the application project and automatically build any referenced projects in the correct order.

Conclusion

Composite Projects and Project References are powerful features in TypeScript that provide a structured way to manage large codebases. By enabling incremental builds and allowing projects to reference each other, they help improve build performance and maintainability. Understanding and leveraging these features can greatly enhance your development workflow, especially in complex or monorepo environments.

By configuring your tsconfig.json files appropriately, you can take full advantage of these features and ensure that your TypeScript projects scale effectively as they grow in size and complexity.

Next page of the Free Ebook:

54Configuring tsconfig: Incremental Compilation in tsconfig.

6 minutes