Better Workflow & tsconfig

Better Workflow & tsconfig

So far we've compiled individual files. Let's set up a proper project workflow with tsconfig.json.

Generating tsconfig.json

tsc --init

This creates a tsconfig.json with many options. The key ones:

Important Config Options

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src"]
}

Option	Description
target	Which JS version to compile to
rootDir	Where your TS source files live
outDir	Where compiled JS files go
strict	Enable all strict type checks
include	Which folders to compile

Project Structure

project/
├── src/           # TypeScript files
│   └── index.ts
├── dist/          # Compiled JavaScript  
│   └── index.js
├── public/        # HTML, CSS, assets
│   └── index.html
└── tsconfig.json

Compiling the Whole Project

tsc      # Compile all files in rootDir
tsc -w   # Watch mode for the whole project

Key Takeaways

• tsc --init creates tsconfig.json
• Use rootDir and outDir to separate source and compiled files
• tsc -w watches and recompiles the entire project
• strict: true enables maximum type safety