Chapter 1: Environment Setup

1. Install Node.js

TypeScript runs on top of Node.js. Visit nodejs.org to download the LTS (Long-Term Support) version. Node.js 20+ is recommended.

After installation, verify:

node -v    # 例如 v20.11.0
npm -v     # 例如 10.2.4

Package Manager Options

Node.js comes with npm, but you can also choose faster alternatives:

• npm — Default package manager, works out of the box
• pnpm — Faster, saves disk space, recommended: npm install -g pnpm
• yarn — Made by Facebook, also a great choice

2. Install TypeScript

Install TypeScript Compiler Globally

npm install -g typescript
tsc --version   # 例如 Version 5.4.5

Tools for Running TS Directly

Compiling before running every time is tedious. These tools can execute .ts files directly:

3. Hello World

Create a file hello.ts:

const greeting: string = "Hello, TypeScript!";
const year: number = 2026;

console.log(`${greeting} 现在是 ${year} 年。`);

Method 1: Compile then Run

# 编译 .ts → .js
tsc hello.ts

# 运行编译后的 JS
node hello.js

Method 2: Run Directly (Recommended for Development)

# 使用 tsx（无需全局安装，npx 会自动下载）
npx tsx hello.ts

# 或者使用 ts-node
npx ts-node hello.ts

4. tsconfig.json Configuration

Use the following command to generate a default configuration file:

tsc --init

Recommended tsconfig.json configuration:

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

Key Configuration Options

5. VS Code Setup

VS Code has built-in powerful TypeScript support (syntax highlighting, IntelliSense, refactoring, type checking), and works without any additional configuration.

Recommended Extensions

6. Project Scaffold

Initialize Project

# 创建项目目录
mkdir my-ts-project && cd my-ts-project

# 初始化 package.json
npm init -y

# 安装 TypeScript 为开发依赖（推荐，而非全局安装）
npm install typescript --save-dev

# 生成 tsconfig.json
npx tsc --init

# 创建目录结构
mkdir src dist

Typical Directory Structure

my-ts-project/
├── src/
│   ├── index.ts          # 入口文件
│   └── utils/
│       └── helper.ts
├── dist/                  # 编译输出（git忽略）
├── node_modules/          # 依赖（git忽略）
├── package.json
├── tsconfig.json
└── .gitignore

Configure package.json scripts

{
  "scripts": {
    "build": "tsc",
    "start": "node dist/index.js",
    "dev": "tsx watch src/index.ts",
    "lint": "eslint src/"
  }
}

Now you can develop with the following commands:

npm run dev    # 开发模式，文件修改自动重新运行
npm run build  # 编译为 JS
npm start      # 运行编译后的代码