TypeScript: Installing and Configuring TypeScript

Last updated: 2026-08-26

Installing TypeScript takes just one command, but setting up your development environment requires an understanding of a few key concepts—this lesson will guide you through setting up your TypeScript "workspace" from scratch.

1. Install TypeScript

TypeScript is installed via npm (Node.js's package manager). You'll need to have Node.js installed on your computer first.

(1) Check if Node.js is installed

Open the terminal (PowerShell on Windows, Terminal on macOS), and type:

node --version
npm --version

If you see a version number (such as v18.17.0 and 9.6.3), it means it is already installed. If you receive a "Command not found" error, please go to the official Node.js website to download and install the LTS version first.

(2) Install TypeScript system-wide

npm install -g typescript

-g indicates a global installation; once installed, you can use the tsc command from any directory.

(3) Verify that the installation was successful

tsc --version

If you see output similar to Version 5.3.3, it means the installation was successful.

▶ Example: Check the TypeScript installation status

# Execute the following commands in order，Confirm that the environment is ready
node --version
npm --version
tsc --version

Output:

v18.17.0
9.6.3
Version 5.3.3

2. The first tsconfig.json

tsconfig.json is a configuration file for TypeScript projects that tells the compiler how to process your code. Although simple projects may not need it, almost every TS project in real-world development includes this file.

(1) Quick Generation

In the project directory, run the following:

tsc --init

This will automatically generate a tsconfig.json file containing all configurable options (most of which are commented out).

(2) Explanation of Key Configuration Options

The newly generated configuration file contains a lot of information, but beginners only need to focus on these few points:

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

▶ Example: A tsconfig.json file suitable for this tutorial

Output:

JSON structure with compilerOptions: target (ES2020), module (commonjs), strict (true), esModuleInterop (true), outDir (./dist), rootDir (./src), skipLibCheck (true), forceConsistentCasingInFileNames (true). Includes "src/**/*", excludes "node_modules".

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

Output:

JSON configuration defining compiler options (target, module, strict, etc.) and file inclusion/exclusion rules for TypeScript compilation.

3. VS Code Configuration

VS Code and TypeScript are "siblings"—both are Microsoft products, and VS Code supports TypeScript right out of the box, without the need to install any additional extensions.

(1) Built-in Features

VS Code comes with built-in TypeScript language support, which provides:

• Real-time type errors highlighted in red (wavy underline)
• Auto-complete (type . to see suggestions for properties and methods)
• Hover over an item to display its type
• Press F12 to go to definition
• Press F2 to rename a variable (all references are updated automatically)

(2) Recommended Plugins

(3) Configure Automatic Compilation

In VS Code, press Ctrl+Shift+B (Cmd+Shift+B on macOS), select tsc: watch, and VS Code will monitor file changes in the background—every time you save the .ts file, it will automatically compile it into .js, so you don't need to run tsc manually.

4. Project Directory Structure

A standard TypeScript project looks like this:

my-project/
├── src/              ← TypeScript Source Code
│   ├── index.ts      ← Input File
│   └── utils.ts      ← Tools Module
├── dist/             ← Compilation output JavaScript（Automatically Generated，Do not edit manually）
│   ├── index.js
│   └── utils.js
├── tsconfig.json     ← TypeScript Layout
├── package.json      ← Node.js Project Configuration
└── node_modules/     ← Dependency Packages（Automatically Generated，Do not submit to git）

5. Troubleshooting Common Installation Issues

▶ Example: Compiling and Running TypeScript with tsc

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

console.log(greet("TypeScript"));

# Compile and run
tsc src/hello.ts          # Generates dist/hello.js
node dist/hello.js        # Output: Hello, TypeScript!

Output:

tsc src/hello.ts          → Compiles to dist/hello.js
node dist/hello.js        → Hello, TypeScript!

❓ FAQ

📖 Summary

• Installed via npm install -g typescript, verified via tsc --version
• tsconfig.json is the core of the project configuration; strict: true must be enabled
• VS Code supports TypeScript right out of the box; we recommend enabling tsc: watch automatic compilation
• Standard project structure: src/ for source code, dist/ for build artifacts; do not manually modify the dist directory
• If you encounter a problem, check the PATH and character encoding first; 90% of installation issues stem from these two areas.

📝 Exercises

1. Basic Exercise (Difficulty: ⭐): Install TypeScript on your computer, run tsc --version to verify that the installation was successful, and make a note of the version number.
2. Advanced Problem (Difficulty ⭐⭐): Create a project directory, run tsc --init to generate tsconfig.json, then set strict to true, outDir to "./dist", and rootDir to "./src".
3. Challenge (Difficulty: ⭐⭐⭐): Open the project directory you created in the previous step in VS Code, configure the tsc: watch auto-compilation mode, and try modifying the target value in tsconfig.json (changing it from ES2020 to ES5). Observe how the generated JS code changes (Hint: Arrow functions will become regular functions).

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us