So, we've got the compiler installed and we're writing some types. But if you're like me, you've probably noticed that running tsc index.ts is fine for a tiny script, but it gets annoying fast. I'm currently working on a small Product Catalog utility, and my project folder is starting to look like a disaster zone because every .ts file is spitting out a .js file right next to it.

The Messy Root Folder Problem

Right now, my folder looks like this: product.ts, product.js, user.ts, user.js. It's cluttered. I want my source code in one place and my compiled code in another. I could try passing flags to the command line, but that's a nightmare to remember.

I'll run tsc --init. This generates a tsconfig.json file. It's huge—mostly comments—but it tells the compiler, "Hey, stop guessing and use these settings for every file in this project."

I'm going to find the outDir setting. By default, it's commented out. I'll uncomment it and set it to "./dist":

{
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Now, when I just run tsc (without specifying a filename), the compiler looks at this config file, sees the outDir, and magically sweeps all those .js files into a clean /dist folder. Much better. Now I can actually see my source code again.

Teaching TS Which Era of JS to Use

Here is where things get interesting. In my catalog.ts file, I'm using async/await and some arrow functions. If I'm deploying this to a very old environment—say, an ancient version of Node or an old browser—those features might crash the app.

I'll look for the target option. Right now it's likely set to ES2016 or ESNext. Let's see what happens if I force it to ES5 (the old school standard):

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES5"
  }
}

I'll run tsc again and peek into dist/catalog.js. Suddenly, my sleek arrow functions have been transformed into chunky function() {} declarations. TypeScript isn't just checking types; it's acting as a translator. I usually keep this at ES2020 or ESNext for modern projects, but knowing you can toggle this is a lifesaver when you're supporting legacy systems.

Turning Up the Volume on the Compiler

I noticed something frustrating. I wrote a function that takes a user object, and I'm accessing user.address.zipcode. Even though I defined the type, TypeScript is letting me get away with a potential crash if address happens to be undefined. It's being too "nice."

I want the compiler to be a drill sergeant. I'll find the strict flag and set it to true:

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES2020",
    "strict": true
  }
}

The moment I save this, my editor lights up with red squiggles. TypeScript is now screaming at me: "Object is possibly 'undefined'". This is exactly what I want. By enabling strict, I'm opting into noImplicitAny and strictNullChecks. It's more work up front, but it's the only way to actually trust your types.

Defining the Boundaries

One last thing. I've got some helper scripts and a tests/ folder in my project. I don't want TypeScript trying to compile my test files into the dist folder; that's just wasted space and potential bloat.

I'll add include and exclude arrays at the root of the config file (outside of compilerOptions):

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "ES2020",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Now, I've told the compiler: "Only look at files inside the src folder, and absolutely ignore anything in node_modules or any file ending in .spec.ts." My build process is now lean, predictable, and strict. This is the baseline for almost every professional TS project I've ever touched.

📋 Practical Task

Exercise: Hardening the Inventory System Config

You have been handed a project for an Inventory System, but the current tsconfig.json is too permissive, and the file structure is a mess. Your goal is to clean up the configuration to match professional standards.

The Current State:

• The project has a src/ folder for source code and a tests/ folder for unit tests.
• The tsconfig.json currently has "strict": false and no outDir defined.
• The target is currently set to "ES3", which is unnecessarily old for this modern Node.js project.

Your Requirements:

1. Modify tsconfig.json to ensure all compiled JavaScript files are sent to a folder named build.
2. Update the target to ES2020.
3. Enable strict mode to catch potential null or undefined errors.
4. Configure the compiler to only include files within the src directory and explicitly exclude the tests directory.

Verification: Once you've updated the config, run tsc. Check that no .js files appear in src/ and that all output is contained within build/.