0Pricing
Frontend Academy · Lesson

Compiling TS and tsconfig.json

Run tsc to compile TypeScript, configure the compiler with tsconfig.json options like strict, target, and outDir.

Compiling TS and tsconfig.json is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Installing the TypeScript Compiler

Install TypeScript as a dev dependency. The tsc CLI compiles TypeScript files. With Vite or Next.js, the bundler handles compilation — but tsc is still used for type checking.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Initialising tsconfig.json

Run npx tsc --init to generate a tsconfig.json with all options commented out and sensible defaults. This file is the single configuration for the TypeScript compiler.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

The tsconfig.json Structure

The main sections: compilerOptions (compiler behaviour), include (which files to compile), exclude (files to skip).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — Output JavaScript Version

target specifies which JavaScript version tsc outputs. ES2022 or ESNext for modern environments. ES5 for maximum compatibility (usually handled by Babel instead).

module — Module System

module controls the module format of the output. CommonJS for Node.js. ESNext or ES2022 for bundlers (Vite, webpack). NodeNext for modern Node.js with package.json type:module.

strict — The Strictness Flag

"strict": true enables a collection of strict checks: strictNullChecks, noImplicitAny, strictFunctionTypes, and more. Always enable it for new projects — it catches the most bugs.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — Eliminating Null Bugs

With strictNullChecks enabled, null and undefined are not assignable to other types unless explicitly included in a union. Forces you to handle null cases.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir and rootDir

outDir specifies where compiled JS files are placed. rootDir sets the root of source TypeScript files. Together they mirror the source structure under dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — Module Aliases

Configure path aliases with the paths option (and baseUrl). Allows importing @/components/Button instead of ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Watch Mode and Type Check Only

tsc --watch recompiles on file changes. tsc --noEmit runs type checking without outputting files — useful in CI to validate types without duplicating the bundler's job.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Extending tsconfig.json

Use extends to inherit from a base config. Shared base configs (like @tsconfig/strictest) provide community best practices.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Quick Check

Which tsconfig option enables the full set of strict type checks?

Recap: tsconfig.json

tsc compiles TypeScript to JavaScript. tsconfig.json controls target (output ES version), module (module system), outDir, strict, and paths. strict: true catches the most bugs. Use --noEmit in CI for pure type checking. Extend community base configs for best practices.

Frequently asked questions

Is the “Compiling TS and tsconfig.json” lesson free?

Yes — the full text of “Compiling TS and tsconfig.json” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.

What will I learn in “Compiling TS and tsconfig.json”?

Run tsc to compile TypeScript, configure the compiler with tsconfig.json options like strict, target, and outDir. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Frontend Academy?

No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Compiling TS and tsconfig.json” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Frontend Academy lesson?

Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Why TypeScript: Types Catch Bugs at Compile Time
  2. Primitive Types Unions and Type Aliases
  3. Interfaces and Object Types
  4. Compiling TS and tsconfig.json
← Back to Frontend Academy