@zayne-labs/tsconfig provides battle-tested TypeScript configuration presets based on Total TypeScript’s TSConfig Cheat Sheet, with additional refinements for modern development.
Installation
Base Configuration
All presets extend the base configuration, which includes strict type-checking and modern TypeScript features.Core configuration with strict linting and isolated modules.Path: Usage:
./src/base/tsconfig.base.jsonIncludes:Choosing the Right Preset
Decide based on two key questions:-
Are you using
tscto transpile.tsfiles to.js?- Yes → Use
tsc/*presets - No (using bundler like Vite, Webpack) → Use
bundler/*presets
- Yes → Use
-
Does your code run in the DOM?
- Yes (browser apps) → Use
*/dom/*presets - No (Node.js, CLIs) → Use
*/no-dom/*presets
- Yes (browser apps) → Use
TSC Presets
For projects using TypeScript’stsc compiler directly.
DOM Environments
For applications running in the browser, transpiled with Usage:
tsc.Path: ./src/tsc/dom/tsconfig.app.jsonConfiguration:For libraries running in the browser, with declaration files.Path: Usage:
./src/tsc/dom/tsconfig.library.jsonConfiguration:For libraries in monorepos with TypeScript project references.Path: Usage:
./src/tsc/dom/tsconfig.library-monorepo.jsonConfiguration:Non-DOM Environments
For Node.js applications or CLIs.Path: Usage:
./src/tsc/no-dom/tsconfig.app.jsonConfiguration:For Node.js libraries with declaration files.Path: Usage:
./src/tsc/no-dom/tsconfig.library.jsonConfiguration:For Node.js libraries in monorepos.Path:
./src/tsc/no-dom/tsconfig.library-monorepo.jsonConfiguration: Same as tsc/dom/library-monorepo but with lib: ["ES2022"]Usage:Bundler Presets
For projects using external bundlers (Vite, Webpack, esbuild, etc.) that handle transpilation.DOM Environments
For browser apps/libraries using a bundler. Aliases: Usage:
bundler/dom/app, bundler/dom/library, bundler/dom/library-monorepo.Path: ./src/bundler/tsconfig.dom.jsonConfiguration:All
bundler/dom/* paths point to the same config since bundlers handle both apps and libraries identically.Specialized preset for Next.js applications.Path: Usage:
./src/bundler/tsconfig.next.jsonConfiguration:Non-DOM Environments
For Node.js apps/libraries using a bundler. Aliases: Usage:
bundler/no-dom/app, bundler/no-dom/library, bundler/no-dom/library-monorepo.Path: ./src/bundler/tsconfig.no-dom.jsonConfiguration:Quick Reference
| Use Case | Environment | Preset |
|---|---|---|
| React app with Vite | Browser + Bundler | bundler/dom |
| Next.js app | Browser + Bundler | bundler/next |
| Node.js CLI | Node + Bundler | bundler/no-dom |
| React library (tsc) | Browser + tsc | tsc/dom/library |
| Monorepo package | Browser + tsc | tsc/dom/library-monorepo |
| Express API | Node + tsc | tsc/no-dom/app |
Extending Presets
All presets can be extended with project-specific options:Key Differences
TSC vs Bundler
- TSC presets: Use
module: "NodeNext"andtarget: "ES2022"for direct compilation - Bundler presets: Use
module: "Preserve"andtarget: "ESNext", letting the bundler handle transpilation
App vs Library
- App presets: No declaration files needed
- Library presets: Include
declaration: truefor distributing types
Library vs Library-Monorepo
- Library-Monorepo: Adds
composite: trueanddeclarationMap: truefor TypeScript project references
These presets prioritize type safety with strict checking and modern TypeScript features. Adjust individual compiler options as needed for your project.
