--- title: Mastering tsconfig.json in TypeScript | daily.dev description: Discussion about "Mastering tsconfig.json in TypeScript" on daily.dev - join the developer community canonical: https://daily.dev/posts/mastering-tsconfig-json-in-typescript-em3ynxt4q twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Mastering tsconfig.json in TypeScript | daily.dev og:description: Discussion about "Mastering tsconfig.json in TypeScript" on daily.dev - join the developer community og:url: https://daily.dev/posts/mastering-tsconfig-json-in-typescript-em3ynxt4q og:image: https://api.daily.dev/og/posts/EM3YnXT4Q.png og:image:alt: Mastering tsconfig.json in TypeScript og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Mastering tsconfig.json in TypeScript **[WebDev](https://daily.dev/sources/webdev)** · [@anatolynevzorov](https://daily.dev/anatolynevzorov) · 442 upvotes · 23 comments ## Content ### **What is tsconfig.json?** The `tsconfig.json` file is the **"recipe book"** of the TypeScript compiler. It tells TypeScript how to "cook" your code: which ingredients (options) to use, how long to simmer (compile), and where to serve the final JavaScript output. Without it, a TypeScript project is like a chef without a recipe—chaos and confusion reign. --- ### **Key Sections of tsconfig.json** #### **1. `compilerOptions` — The "Recipe Book"** This section holds **all critical compilation settings**. Examples include: - **`target`**: Specifies the JavaScript version to transpile to (e.g., `ES5`, `ES2020`). *Metaphor*: Like choosing the difficulty level of a recipe—from basic (ES5) to modern (ES2020). - **`module`**: Defines the module system (CommonJS, ES6). *Example*: `module: "ESNext"` uses the latest experimental modules, as if you’re on the tech frontier. - **`strict`**: Enables "strict mode," enforcing type safety and optional fields. *Association*: Imagine your code attending school with a meticulous teacher. - **`outDir` and `rootDir`**: - `rootDir`: The root of your raw TypeScript code. - `outDir`: The folder for the compiled JS output. *Metaphor*: Think of `rootDir` as the kitchen door and `outDir` as the buffet where dishes are served. #### **2. `include`, `exclude`, `files` — The "Shopping List"** - **`include`**: Lists directories/files to compile. *Example*: `include: ["src/**/*"]` compiles everything in the `src` folder. - **`exclude`**: Excludes files (e.g., `node_modules`). *Association*: A list of ingredients forbidden in the recipe. - **`files`**: Explicitly lists specific files. *When to use?* For small projects or when precise control is needed. --- ### **Advanced Settings** #### **1. Paths and Aliases (`baseUrl`, `paths`)** - **`baseUrl`**: Sets the base directory for relative imports. *Example*: Set `baseUrl: "src"` to import like `import MyComponent from 'components/MyComponent'`. - **`paths`**: Creates aliases to simplify imports. *Example*: ```json "paths": { "@models/*": ["src/models/*"] } ``` *Metaphor*: Like creating shortcuts in a file explorer—faster and cleaner. #### **2. Compilation Optimization** - **`watch`**: Auto-recompiles on file changes. - **`incremental`**: Saves intermediate results to speed up future builds. - **`build`**: Multi-project builds (ideal for libraries). --- ### **Practical Examples** #### **1. Simple Project** ```json { "compilerOptions": { "target": "ES2020", "module": "ESNext", "strict": true, "outDir": "./dist" }, "include": ["src/**/*"] } ``` #### **2. Library with Aliases** ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@utils/*": ["src/utils/*"] }, "declaration": true // Generates `.d.ts` files for publishing } } ``` --- ### **Key Takeaways** 1. **`tsconfig.json` is the heart of a TypeScript project**. Proper setup saves time and prevents errors. 2. **Strict mode (`strict`)** is your friend if you want to avoid "silent" bugs. 3. **Aliases (`paths`)** make imports cleaner and simplify refactoring. 4. **Optimization flags** (`watch`, `incremental`) are vital for large projects. 5. **Understanding `outDir` and `rootDir`** avoids path confusion. --- ### **How to Get Started?** 1. Create a `tsconfig.json` using `tsc --init`. 2. Start with basics: `target`, `module`, and `strict`. 3. Add `include` and `exclude` to control compilation. 4. Experiment with aliases and optimizations as your project grows. --- `tsconfig.json` isn’t just a file—it’s a **project management strategy**. When configured correctly, it turns chaos into structure and bugs into opportunities for improvement. ## Community discussion Top comments from developers on daily.dev. **@katabenedek** · 12 upvotes > Using cooking as a metaphor was hilarious and genuinely genius at the same time 😀. Good summary. In my opinion ot would be beneficial to also write a bit about in more detail what are the different things you can put on the right side of the assignment. Like what are the different types of modules, etc. **@kyratzakos** · 4 upvotes > Another tip for bigger codebases is combining `composite: true` with **project references**. This keeps incremental builds snappy across multiple packages while still letting each team own its own “recipe book.” It might be worth mentioning for folks building mono-repos or libraries. **@jliter85** · 3 upvotes > I really like this article. It made so much sense to me. **@baibhavkc11** · 3 upvotes > This made me realize my tsconfig.json is basically Gordon Ramsay yelling at my TypeScript until it compiles properly. “It’s RAW! You forgot ‘strict: true’ again!!” 🍳😂 **@mrey** · 2 upvotes > This is awesome, it is easier to grasp how things work. keep it up ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- [View this post on daily.dev](https://daily.dev/posts/mastering-tsconfig-json-in-typescript-em3ynxt4q) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"DiscussionForumPosting","mainEntityOfPage":"https://daily.dev/posts/mastering-tsconfig-json-in-typescript-em3ynxt4q","headline":"Mastering tsconfig.json in TypeScript","text":"Discussion about \"Mastering tsconfig.json in TypeScript\" on daily.dev - join the developer community","url":"https://daily.dev/posts/mastering-tsconfig-json-in-typescript-em3ynxt4q","datePublished":"2025-05-03T20:52:48.138Z","dateModified":"2025-05-03T20:52:48.138Z","author":{"@type":"Person","name":"Anatoly Nevzorov","url":"https://daily.dev/anatolynevzorov","image":"https://media.daily.dev/image/upload/s--Z8r74PPz--/f_auto/v1752003046/avatars/avatar_JvPzARQiWzmPAq2T2z7YS?_a=BAMClqZW0","interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"EndorseAction"},"userInteractionCount":1150}},"image":"https://media.daily.dev/image/upload/s--Jao7P4hh--/f_auto/v1746280682/posts/ql44JNiKy","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":442},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":23}],"comment":[{"@type":"Comment","text":"Using cooking as a metaphor was hilarious and genuinely genius at the same time 😀. Good summary. In my opinion ot would be beneficial to also write a bit about in more detail what are the different things you can put on the right side of the assignment. Like what are the different types of modules, etc.","datePublished":"2025-05-05T07:50:34.344Z","url":"https://daily.dev/posts/EM3YnXT4Q#c-E9EXgHeGM","author":{"@type":"Person","name":"Kata Benedek","url":"https://daily.dev/katabenedek","image":"https://media.daily.dev/image/upload/s--ws7y5Y4c--/f_auto/v1785425106/avatars/avatar_UyHqBHvGMXwWjucPwbVrC?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":12}},{"@type":"Comment","text":"Another tip for bigger codebases is combining composite: true with project references. This keeps incremental builds snappy across multiple packages while still letting each team own its own “recipe book.” It might be worth mentioning for folks building mono-repos or libraries.","datePublished":"2025-05-19T15:21:55.814Z","url":"https://daily.dev/posts/EM3YnXT4Q#c-boHiqCrsl","author":{"@type":"Person","name":"Apostolos Kyratzakos","url":"https://daily.dev/kyratzakos","image":"https://lh3.googleusercontent.com/a/ACg8ocKcspxQ-mOrgRE1evG_t_X8WvRBfMRtRYeW3RCXoxfINA=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"I really like this article. It made so much sense to me.","datePublished":"2025-05-14T20:00:14.111Z","url":"https://daily.dev/posts/EM3YnXT4Q#c-OnkQY1WLb","author":{"@type":"Person","name":"John Liter","url":"https://daily.dev/jliter85","image":"https://media.daily.dev/image/upload/s--DQ2HUrO4--/f_auto/v1785100315/avatars/avatar_yHf9cPdgTQEtokv6d8qhM?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"This made me realize my tsconfig.json is basically Gordon Ramsay yelling at my TypeScript until it compiles properly. “It’s RAW! You forgot ‘strict: true’ again!!” 🍳😂","datePublished":"2025-05-29T10:44:58.846Z","dateModified":"2025-05-29T10:45:41.663Z","url":"https://daily.dev/posts/EM3YnXT4Q#c-ETcW0rU3X","author":{"@type":"Person","name":"Baibhav K.C","url":"https://daily.dev/baibhavkc11","image":"https://media.daily.dev/image/upload/s--V9uxugIK--/f_auto,q_auto/v1698897948/avatars/avatar_KhXVDMYpNXGBaYFgyjnge"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"This is awesome, it is easier to grasp how things work. keep it up","datePublished":"2025-05-16T00:50:38.661Z","url":"https://daily.dev/posts/EM3YnXT4Q#c-tQSM5T6mL","author":{"@type":"Person","name":"Jon Rey Galera","url":"https://daily.dev/mrey","image":"https://avatars.githubusercontent.com/u/55083108?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}],"isPartOf":{"@type":"WebPage","url":"https://daily.dev/squads/webdev","name":"WebDev"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"WebDev","item":"https://daily.dev/squads/webdev"},{"@type":"ListItem","position":3,"name":"Mastering tsconfig.json in TypeScript"}]} ```