3. 环境准备：Node.js 与 TypeScript 开发环境搭建，项目初始化

说实话，很多同学学新技术时，往往卡在第一步——环境装不上。我见过太多人花了两天装环境，结果还没写一行代码就放弃了。这一章咱们就把这事彻底搞定。

咱们要做的是轮换窗口机制，说白了就是一套能在多个视图间平滑切换的架构。它依赖 Node.js 运行时和 TypeScript 的类型系统。嗯，这两样东西缺一不可。

3.1 安装 Node.js 与 npm

Node.js 是咱们的运行环境，npm 是包管理器。我个人习惯用 nvm 来管理 Node.js 版本，这样切换项目时特别方便。

先检查你电脑上有没有装过 Node.js：

node -v
npm -v

如果没装，去官网下载 LTS 版本就行。装完之后，咱们验证一下：

node -v
# 输出类似 v18.17.0
npm -v
# 输出类似 9.6.7

我曾经遇到过一个坑：公司内网环境装不了 nvm，只能手动装。结果装了个最新版，项目跑不起来。后来发现是 Node.js 版本太高，有些旧包不兼容。所以，一定要用 LTS 版本。

3.2 安装 TypeScript

TypeScript 是 JavaScript 的超集，加了类型系统。咱们做轮换窗口机制，类型系统能帮我们提前发现很多问题。

全局安装 TypeScript：

npm install -g typescript

验证安装：

tsc -v
# 输出类似 Version 5.3.3

3.3 初始化项目

现在开始创建咱们的项目。我习惯先建一个干净的目录：

mkdir rotation-window
cd rotation-window
npm init -y

npm init -y 会生成一个 package.json 文件。咱们打开看看：

{
  "name": "rotation-window",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC"
}

嗯，这里要改一下。加上 type: "module"，这样咱们就能用 ES Module 语法了：

{
  "name": "rotation-window",
  "version": "1.0.0",
  "description": "手把手搭建轮换窗口机制",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch"
  },
  "keywords": ["rotation", "window"],
  "author": "",
  "license": "ISC"
}

3.4 配置 TypeScript

接下来生成 tsconfig.json。这是 TypeScript 的配置文件，告诉编译器怎么干活。

tsc --init

执行后，目录下会多一个 tsconfig.json。咱们需要调整几个关键选项：

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

这里我解释几个关键配置：

配置项	作用	为什么这么设
target: "ES2020"	编译目标版本	现代浏览器都支持 ES2020，够用
module: "ESNext"	模块系统	配合 type: "module" 使用
strict: true	严格模式	能帮你发现很多潜在问题
declaration: true	生成 .d.ts 文件	方便别人使用咱们的库
sourceMap: true	生成源码映射	调试时能看到 TypeScript 源码

3.5 创建项目结构

现在创建源码目录和入口文件：

mkdir src
touch src/index.ts

在 src/index.ts 里写一行测试代码：

console.log("轮换窗口机制启动！");

然后编译试试：

npm run build

如果一切正常，dist 目录下会生成 index.js 和 index.d.ts。运行一下：

node dist/index.js
# 输出：轮换窗口机制启动！

看到这行输出，说明环境搭建成功了。

3.6 安装项目依赖

咱们的轮换窗口机制需要一些工具库。先装核心依赖：

npm install uuid
npm install -D @types/uuid

uuid 用来生成唯一标识，每个窗口实例都需要一个 ID。为什么用这个？因为轮换窗口机制里，窗口的增删改查都需要唯一标识来定位。

再装一个开发工具：

npm install -D ts-node nodemon

ts-node 可以直接运行 TypeScript 文件，不用每次编译。nodemon 可以监听文件变化自动重启。这两个搭配起来，开发体验会好很多。

在 package.json 里加个脚本：

"scripts": {
  "build": "tsc",
  "dev": "tsc --watch",
  "start": "nodemon --exec ts-node src/index.ts"
}

现在运行 npm start，就能看到实时效果了。

3.7 验证环境

咱们写一个简单的验证脚本，确保所有工具都能正常工作：

// src/index.ts
import { v4 as uuidv4 } from 'uuid';

interface WindowConfig {
  id: string;
  title: string;
  width: number;
  height: number;
}

const createWindow = (title: string): WindowConfig => {
  return {
    id: uuidv4(),
    title,
    width: 800,
    height: 600,
  };
};

const mainWindow = createWindow("主窗口");
console.log("窗口创建成功：", mainWindow);

运行 npm start，你应该能看到类似这样的输出：

窗口创建成功： {
  id: 'a1b2c3d4-e5f6-7890-abcd-ef1234567890',
  title: '主窗口',
  width: 800,
  height: 600
}

嗯，到这里，环境就全部准备好了。

3.8 知识体系总览

下面这张图展示了咱们这一章搭建的整个技术栈：

3.9 常见问题排查

搭建环境时，你可能会遇到一些问题。我把自己踩过的坑列出来：

• tsc 命令找不到：检查 TypeScript 是否安装成功，或者试试 npx tsc。
• 编译报错说模块找不到：检查 tsconfig.json 里的 moduleResolution 是不是设成了 node。
• 运行时报错说不能使用 import：检查 package.json 里有没有加 "type": "module"。
• nodemon 不自动重启：检查 nodemon.json 配置，或者直接用 --watch 参数。

好了，环境准备就到这里。现在你的电脑上已经有了一个完整的 TypeScript 开发环境，可以开始写轮换窗口机制的代码了。