TypeScript Getting Started

TypeScript Getting Started: Tooling, Compiler CLI, & Project Setup

Setting up a modern TypeScript project involves installing the TypeScript compiler, initializing a compiler config file (tsconfig.json), and transpiling source files into clean JavaScript.

Development Tooling Ecosystem

flowchart TD
    A["TypeScript Dev Tooling"] --> B["tsc CLI (Compiler)"]
    A --> C["tsconfig.json (Compiler Options)"]
    A --> D["Execution Engine (tsx / ts-node / Vite)"]

Installing TypeScript & Initializing Projects

You can install TypeScript globally or as a project dev dependency using npm:

# Global installation
npm install -g typescript

# Local project installation (Recommended)
npm install --save-dev typescript

To create a standard TypeScript configuration file:

npx tsc --init

Practical Code Example & Workspace Workflow

Create a source file named src/index.ts:

import { formatDistanceToNow } from "util";

interface ServerStatus {
  uptimeSeconds: number;
  environment: "development" | "production" | "staging";
  memoryUsageMb: number;
}

function printServerMetrics(status: ServerStatus): void {
  console.log(`=== System Monitor [${status.environment.toUpperCase()}] ===`);
  console.log(`Uptime: ${status.uptimeSeconds} seconds`);
  console.log(`Memory Usage: ${status.memoryUsageMb.toFixed(2)} MB`);
}

const currentStatus: ServerStatus = {
  uptimeSeconds: 86400,
  environment: "production",
  memoryUsageMb: 256.45
};

printServerMetrics(currentStatus);

To compile src/index.ts to dist/index.js:

npx tsc

Best Practices & Gotchas

• Use Local Project Dependencies: Keep typescript inside devDependencies in package.json to ensure deterministic builds across all developer environments and CI/CD pipelines.
• Use Fast Execution Drivers during Development: Use fast development runners like tsx or vite for rapid feedback without waiting for full tsc emitting.
• Separate Source and Output Folders: Set "rootDir": "./src" and "outDir": "./dist" in tsconfig.json.

Self-Check Challenge

Run npx tsc --init in a test folder and locate the target and module fields in tsconfig.json. What default JavaScript target does tsc use?