TypeScript Tooling

Essential tools and configurations for TypeScript development

🔧 What is TypeScript Tooling?

TypeScript tooling includes compilers, build tools, editors, and configurations that enhance your development experience. These tools provide features like auto-completion, type checking, debugging, and seamless integration with modern development workflows. 


# Install TypeScript compiler
npm install -g typescript

# Compile TypeScript file
tsc myfile.ts

# Watch mode for automatic compilation
tsc --watch

Result: 

Creates myfile.js from myfile.ts

Essential TypeScript Tools

⚙️

TypeScript Compiler

Converts TS to JavaScript 

tsc --init
tsc myfile.ts
📝

tsconfig.json

Project configuration file 

{
  "compilerOptions": {
    "target": "ES2020"
  }
}
💻

VS Code

Best editor for TypeScript 

Built-in TS support
IntelliSense
Debugging
📦

Build Tools

Webpack, Vite, esbuild 

npm run build
npm run dev

🔹 TypeScript Compiler (tsc)

The TypeScript compiler is the core tool for converting TypeScript to JavaScript: 

# Install TypeScript globally
npm install -g typescript

# Check TypeScript version
tsc --version

# Compile a single file
tsc app.ts

# Compile with specific target
tsc app.ts --target ES2020

# Watch mode (auto-compile on changes)
tsc --watch

# Compile entire project
tsc

Common Commands: 

tsc --init       → Create tsconfig.json
tsc --noEmit     → Check types without compiling
tsc --build      → Build project references

🔹 tsconfig.json Configuration

Configure TypeScript compiler options for your project: 

{
  "compilerOptions": {
    // Target JavaScript version
    "target": "ES2020",
    
    // Module system
    "module": "commonjs",
    
    // Output directory
    "outDir": "./dist",
    
    // Source directory
    "rootDir": "./src",
    
    // Enable strict type checking
    "strict": true,
    
    // Allow importing JSON files
    "resolveJsonModule": true,
    
    // Generate source maps for debugging
    "sourceMap": true,
    
    // Skip type checking of declaration files
    "skipLibCheck": true
  },
  
  // Files to include
  "include": ["src/**/*"],
  
  // Files to exclude
  "exclude": ["node_modules", "dist"]
}

Result: 

Configures how TypeScript compiles your project

🔹 Important Compiler Options

Key tsconfig.json options explained:

Type Checking Options: 

{
  "compilerOptions": {
    "strict": true,              // Enable all strict checks
    "noImplicitAny": true,       // Error on implied 'any' type
    "strictNullChecks": true,    // Strict null checking
    "noUnusedLocals": true,      // Error on unused variables
    "noUnusedParameters": true   // Error on unused parameters
  }
}

Module Options: 

{
  "compilerOptions": {
    "module": "ESNext",          // Use ES modules
    "moduleResolution": "node",  // Node.js module resolution
    "esModuleInterop": true,     // Better CommonJS interop
    "allowSyntheticDefaultImports": true
  }
}

Output Options: 

{
  "compilerOptions": {
    "outDir": "./dist",          // Output directory
    "declaration": true,         // Generate .d.ts files
    "declarationMap": true,      // Source maps for .d.ts
    "removeComments": true       // Remove comments from output
  }
}

🔹 VS Code Integration

Visual Studio Code provides excellent TypeScript support:

🔸 Built-in Features:

  • IntelliSense: Auto-completion and suggestions
  • Type Checking: Real-time error detection
  • Refactoring: Rename symbols, extract functions
  • Go to Definition: Navigate to type definitions
  • Debugging: Built-in debugger support

🔸 Useful VS Code Settings: 

// .vscode/settings.json
{
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.suggest.autoImports": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

🔹 Build Tools Integration

Popular build tools that work with TypeScript:

🔸 Vite (Recommended for modern projects): 

# Create Vite project with TypeScript
npm create vite@latest my-app -- --template vanilla-ts

# Install dependencies
cd my-app
npm install

# Start dev server
npm run dev

🔸 Webpack: 

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  }
};

🔸 esbuild (Fast bundler): 

# Install esbuild
npm install --save-dev esbuild

# Build with esbuild
npx esbuild src/index.ts --bundle --outfile=dist/bundle.js

🔹 Package.json Scripts

Common npm scripts for TypeScript projects: 

{
  "name": "my-typescript-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch",
    "dev": "ts-node src/index.ts",
    "start": "node dist/index.js",
    "clean": "rm -rf dist",
    "type-check": "tsc --noEmit",
    "lint": "eslint src/**/*.ts"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "ts-node": "^10.9.0",
    "@types/node": "^20.0.0"
  }
}

Usage: 

npm run build      → Compile TypeScript
npm run watch      → Watch for changes
npm run dev        → Run with ts-node
npm run type-check → Check types only

🔹 Debugging TypeScript

Set up debugging in VS Code: 

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TypeScript",
      "program": "${workspaceFolder}/src/index.ts",
      "preLaunchTask": "tsc: build - tsconfig.json",
      "outFiles": ["${workspaceFolder}/dist/**/*.js"],
      "sourceMaps": true
    }
  ]
}

Features: 

• Set breakpoints in .ts files
• Step through code
• Inspect variables
• View call stack

🧠 Test Your Knowledge

Which command creates a tsconfig.json file?