TypeScript Installation & Setup — Complete Guide

This guide walks you through installing TypeScript via npm, configuring tsconfig.json, and setting up VS Code for TypeScript development so you can compile, debug, and write type-safe code from day one.

What You'll Learn

• How to install TypeScript locally and globally
• The tsconfig.json file and its key options
• VS Code setup for TypeScript
• Compiling with tsc and running in watch mode
• Project scaffolding best practices

Why It Matters

A correct setup is the foundation of every TypeScript project. Misconfigured tsconfig files lead to puzzling errors, slow compilation, or — worst of all — type checking that doesn't catch real bugs. Getting setup right the first time saves hours of frustration.

Real-World Use

At DodaTech, every project from the Doda Browser extension API to the Durga Antivirus Pro dashboard starts with a standard tsconfig.json template. This ensures consistent compilation targets, strict type checking, and smooth integration with build pipelines across all teams.

Learning Path

flowchart LR
  A[What Is TypeScript] --> B[Installation & Setup]
  B --> C[Basic Types]
  B --> D[You Are Here]
  C --> E[Interfaces]
  E --> F[Type Aliases]
  F --> G[Functions]

Installing TypeScript

Prerequisites

You need Node.js installed (version 18 or later recommended). Verify:

node --version  # v18.20.0 or similar
npm --version   # 10.x or similar

Global Installation (Quick Start)

npm install -g typescript
tsc --version  # Version 5.5.3 or similar

Global installation lets you run tsc from any terminal. However, for project consistency, local installation is preferred:

Local Installation (Best Practice)

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

Why local? Different projects may use different TypeScript versions. A global install can cause conflicts. Using npx always picks up the local version.

Your First Compilation

Create a hello.ts file:

// hello.ts
function greet(name: string): string {
  return `Hello, ${name}! Welcome to TypeScript.`;
}

const message = greet("Developer");
console.log(message);

Compile:

npx tsc hello.ts

This produces hello.js. Run it:

node hello.js
# Output: Hello, Developer! Welcome to TypeScript.

Now introduce a deliberate error:

const message = greet(42); // Type error: number != string

Run npx tsc hello.ts again. You'll see:

hello.ts:7:22 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

The JS file still gets generated (by default), but the error tells you something is wrong. In strict mode, you can configure tsc to not emit JS when there are errors (noEmitOnError: true).

The tsconfig.json File

A tsconfig.json file configures the TypeScript compiler for your project. Generate one:

npx tsc --init

This creates a commented file with many options. Here's a minimal recommended config:

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

Key Options Explained

The strict Flag

Enabling strict: true turns on:

• strictNullChecks — catches null/undefined access
• noImplicitAny — errors on untyped variables
• strictFunctionTypes — proper function variance
• strictBindCallApply — types .bind, .call, .apply
• strictPropertyInitialization — class properties must be initialized
• noImplicitThis — catches this being any
• alwaysStrict — adds "use strict" to output

VS Code Setup

VS Code has built-in TypeScript support. For the best experience:

1. Install the extension: The built-in TypeScript language service is usually sufficient, but install "TypeScript Toolbox" or "Pretty TypeScript Errors" for visual improvements.

2. Enable format-on-save in .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "typescript.format.enable": true,
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.updateImportsOnFileMove.enabled": "always"
}

3. Use the TypeScript version picker: In VS Code, click the version number at the bottom-right of the status bar to switch between the bundled TS version and your project's local version.

4. Keyboard shortcuts worth knowing:

   • Ctrl+Shift+P → "TypeScript: Restart TS server" (fixes stale errors)
   • F12 — Go to Definition
   • Shift+F12 — Find All References
   • Ctrl+. — Quick Fix suggestions

Project Structure Best Practice

my-ts-project/
├── src/
│   ├── index.ts
│   ├── utils/
│   │   ├── logger.ts
│   │   └── helpers.ts
│   └── types/
│       └── index.ts
├── dist/
├── tests/
├── node_modules/
├── tsconfig.json
├── package.json
└── .gitignore

• Source files go in src/
• Compiled JS goes in dist/ (gitignored)
• Types used across the project go in types/
• One tsconfig.json at the root

Common Mistakes

1. Installing TypeScript Globally but Running with npx

If you installed globally but use npx, npx may find a different version. Use npx tsc always (it uses the local version), or tsc if you want the global one. Be consistent.

2. Forgetting tsconfig.json

Without a config file, TypeScript uses defaults (target ES5, no strict mode). Running tsc --init generates a config with sane defaults.

3. Including node_modules in Compilation

Always add "exclude": ["node_modules"] to tsconfig. Without it, TypeScript tries to type-check the entire node_modules folder, which is slow and unnecessary.

4. Using module: "CommonJS" with a Front-End Bundler

If you're using Vite, Webpack, or Esbuild, use module: "ESNext" and moduleResolution: "bundler". CommonJS output conflicts with tree-shaking.

5. Not Restarting the TS Server

After changing tsconfig.json, VS Code may not pick up the changes immediately. Run "TypeScript: Restart TS server" from the command palette.

6. Confusing target and module

target controls language features (arrows, async/await) in the output. module controls the module format (CommonJS, ESM). They are independent settings.

Practice Questions

1. Why should you install TypeScript locally rather than globally? Different projects may need different TS versions. Local install ensures each project uses exactly the version it was configured with.

2. What does strict: true enable? It enables all strict checking flags: strictNullChecks, noImplicitAny, strictFunctionTypes, strictBindCallApply, strictPropertyInitialization, noImplicitThis, and alwaysStrict.

3. What does outDir control? It specifies the output directory where compiled JavaScript files are placed, keeping them separate from source TypeScript files.

4. How do you restart the TypeScript server in VS Code? Open the command palette (Ctrl+Shift+P) and run "TypeScript: Restart TS server".

Challenge: Create a project with src/ and dist/ folders. Write a src/greet.ts that exports a typed function. Configure tsconfig to target ES2022 with strict mode. Compile and verify the output in dist/.

FAQ

Mini Project: Setup and Compile a Starter

Create a minimal project that demonstrates all the concepts:

mkdir ts-starter && cd ts-starter
npm init -y
npm install --save-dev typescript @types/node
npx tsc --init

Modify tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "CommonJS",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Create src/index.ts:

import * as os from "os";

function getSystemInfo(): string {
  const hostname = os.hostname();
  const platform = os.platform();
  const uptime = os.uptime();
  return `Host: ${hostname} | Platform: ${platform} | Uptime: ${uptime}s`;
}

console.log(getSystemInfo());

Compile and run:

npx tsc
node dist/index.js
# Output: Host: my-machine | Platform: linux | Uptime: 3600s

What's Next

Now that your environment is ready, dive into basic types:

Built by the developers of Doda Browser, DodaZIP, and Durga Antivirus Pro.