Learn TypeScript/

...

/

Configuring TypeScript for Real-World Projects

Configuring TypeScript for Real-World Projects

Set up TypeScript like a pro using tsconfig.json and unlock the full power of strict typing.

We'll cover the following...

Real-world projects aren’t just a single file—they’re structured, sometimes sprawling codebases. TypeScript gives us the tools to manage them with confidence. This is where configuration comes in.

Let’s dig into how to set up TypeScript using tsconfig.json and how to unlock the full power of its type system with strict mode.

What is tsconfig.json?

TypeScript needs to know how to interpret your project—what files to include, how strictly to type check, which JavaScript version to compile to, and more. That’s exactly what tsconfig.json does.

When we add this file to the root of our project, we’re saying: “Hey TypeScript, here’s how we want this codebase handled.”

Here’s a minimal example to start with:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}
A minimal tsconfig.json that turns on strict mode and targets modern JavaScript

What do these fields mean? Let’s break this down:

  • compilerOptions: It is the brain of the config. This is where you control how TypeScript behaves.

  • target: This tells the compiler what version of JS to emit. ES2020 is a safe, modern default.

  • module: This sets how modules are compiled (e.g., commonjs for Node, esnext for ESM).

  • strict: This one flips on a whole suite of powerful type checks. We’ll come back to this.

  • include: This indicates which files to compile ("src" folder in this case).

  • exclude: This indicates which files to ignore (always exclude node_modules).

With this one config file, TypeScript can take over your project’s type checking, code navigation, and editor experience.

Why does strict mode matter?

Turning on strict mode is the best decision you’ll make with TypeScript. It enables several compiler checks that make your code safer, more predictable, and easier to refactor.

This one flag activates settings like:

  • strictNullChecks: This forces you to handle null and undefined explicitly.

  • noImplicitAny: This prevents TypeScript from silently falling back to the any type when it can’t figure out what a variable should be. any disables type checking, so we want to avoid it unless we’re doing it on purpose.

  • strictFunctionTypes, alwaysStrict, and more.

Let’s see what that looks like in practice. Here’s what happens when strict mode is on:

Press + to interact
TypeScript 5.8.3
Files
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true
  }
}

Here’s how we’d rewrite it under strict mode:

Press + to interact
TypeScript 5.8.3
Files
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true
  }
}

We explicitly annotate name as a string. If someone tries to call greet(42), the compiler stops them cold. Strict mode is like wearing a seat belt and driving a high-performance car—you move fast and stay safe.

Even with strict mode on, TypeScript will still emit the compiled JavaScript by default, even if there are type errors. If you want to block output on error, you can set "noEmitOnError": true. This makes it easy to adopt strict checks gradually without breaking your workflow.

Note: The coding playgrounds in this course are configured to reflect how TypeScript is used in serious, real-world projects. Here’s what you should know:

  • All playgrounds run with strict mode enabled. This isn’t just a preference—it’s how modern TypeScript is written. It catches mistakes early, enforces best practices, and helps you build solid habits.

  • We can hover over any variable, function name, or parameter to instantly see its type. This mirrors what we’d expect in a TypeScript-aware IDE and helps us develop a strong sense of what the compiler sees.

  • We’ll see squiggly lines for common issues like type mismatches, invalid calls, or missing properties. That live feedback helps us move fast and stay in flow.

  • Be mindful that the types we see on hover—and the inline errors you see as we type—follow TypeScript’s default inference behavior. They don’t reflect your tsconfig.json settings. These are great for quick reference, but to see full type checking (including strict mode rules), click “Run.”

Key takeaways:

  • tsconfig.json is the control center. It tells TypeScript how to interpret, type check, and compile your project.

  • compilerOptions shape how TypeScript behaves. Flags like target, module, and strict define what JavaScript is emitted and how strict the type checker should be.

  • Strict mode unlocks TypeScript’s full potential. Turning on strict mode activates the most important safety features in TypeScript, from noImplicitAny to strictNullChecks.

  • The coding playgrounds in this course reflect real-world TS setups. They run with strict mode on, show type info on hover, and surface most errors as we type, with full checks when we click “Run.”