Setup and Configuration

This chapter walks through installing the TypeScript compiler, creating a project, and configuring your editor.

Install TypeScript link

You need Node.js installed. Then install TypeScript globally or per project:

  # Global (convenient for learning)
npm install -g typescript

# Verify
tsc --version   # e.g. Version 5.x.x
  

For real projects, prefer a local dev dependency so everyone uses the same version:

  mkdir my-ts-app && cd my-ts-app
npm init -y
npm install --save-dev typescript
npx tsc --version
  

Your First TypeScript File link

Create src/index.ts:

  const username: string = 'Alice';
const score: number = 95;

function celebrate(name: string, points: number): string {
    return `${name} scored ${points} points!`;
}

console.log(celebrate(username, score));
  

Compile and run:

  npx tsc
node dist/index.js
  

By default, tsc emits JavaScript next to the source file. We will redirect output with tsconfig.json.

tsconfig.json link

Initialize a config file:

  npx tsc --init
  

A practical starter configuration:

  {
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
  

Compile with:

  npx tsc
  

Add npm scripts in package.json:

  {
  "scripts": {
    "build": "tsc",
    "watch": "tsc --watch"
  }
}
  

tsc --watch recompiles automatically when you save files.

VS Code Setup link

1. Install Visual Studio Code
2. Install the official TypeScript and JavaScript Language Features extension (built-in)
3. Open your project folder — VS Code uses the workspace typescript version from node_modules when present

Useful shortcuts:

• Hover over a variable to see its inferred type
• Cmd/Ctrl + Click to jump to definitions
• Problems panel lists type errors without running tsc

VS Code can compile on save. Add to .vscode/settings.json:

  {
  "typescript.tsdk": "node_modules/typescript/lib",
  "editor.formatOnSave": true
}
  

Project Layout link

  my-ts-app/
├── src/
│   └── index.ts
├── dist/              (generated)
├── tsconfig.json
├── package.json
└── node_modules/
  

Running TypeScript Directly (Optional) link

For quick scripts without a build step, use tsx or ts-node:

  npm install --save-dev tsx
npx tsx src/index.ts
  

These compile and execute in one step — handy during development. Production builds use tsc or a bundler like Vite.