TypeScript入门（二）磨刀不误砍柴工：搭建你的TypeScript游乐场搭建你的TypeScript游乐场准备

第2章磨刀不误砍柴工：搭建你的TypeScript游乐场

准备好了吗？这一章我们要动手打造属于你的TypeScript开发环境了！别担心，这就像搭积木一样简单有趣。配置好这些工具，你就能畅快地享受TypeScript带来的编码乐趣。记住，好的开始是成功的一半，咱们一步步来。

2.1 安装Node.js和npm——给你的机器注入JavaScript超能力

想象一下，Node.js就像一台神奇的"JavaScript引擎"，能让你的电脑理解并运行JavaScript代码（包括我们即将转换的TypeScript代码）。而npm（Node Package Manager）则是随Node.js附赠的一个"百宝袋"，里面装满了全世界开发者分享的代码工具包（包括TypeScript编译器！）。

为什么需要它们？

TypeScript编译器本身就是一个Node.js程序，它需要Node.js环境才能运行。npm则是我们安装和管理这些程序（包括TypeScript编译器）的得力助手。

安装步骤（超简单）

访问官网：打开 Node.js 官方网站
下载LTS版本：你会看到两个版本：LTS (长期支持版) 和 Current (最新特性版)。强烈推荐选择 LTS 版本，它更稳定可靠，像一位值得信赖的老朋友
一键安装：运行下载的安装程序（Windows和macOS用户基本只需一路点击"Next"）
验证安装：打开终端，输入：
```
node -v  # 查看Node.js版本
npm -v   # 查看npm版本
```
如果看到版本号（如 v22.13.0 和 10.9.2），恭喜！你的机器已成功装备JavaScript超能力！🎉

2.2 安装TypeScript编译器——请来你的专属"翻译官+检查员"

现在，是时候请出我们的主角——TypeScript编译器 (tsc) 了。它就像一位精通双语的专家，能把你的TypeScript代码（.ts文件）精准地翻译成JavaScript代码（.js文件）。更重要的是，它还是个一丝不苟的"代码检查员"，会在翻译过程中揪出你代码里的类型错误。

安装命令

npm install -g typescript  # -g 表示全局安装

安装完成后，在终端输入：

tsc -v

如果看到类似 Version 5.8.3 的输出，说明你的专属"翻译官+检查员"已经准备就绪！

小贴士：实际项目中更推荐本地安装（npm install typescript --save-dev），但初学者用全局安装更方便探索

2.3 配置 tsconfig.json——定制你的TypeScript"规则手册"

TypeScript编译器很聪明，但它也需要知道"你想怎么编译"。这就是 tsconfig.json 文件的用武之地——它就像一份你写给编译器的"定制规则手册"。

创建规则手册

在项目文件夹打开终端
运行：
```
tsc --init  # 生成配置文件
```
用编辑器打开生成的 tsconfig.json 文件

核心配置项解析

{
  "compilerOptions": {
    "target": "es5",         // 编译成哪个JS版本（es5兼容性最好）
    "module": "commonjs",    // 模块系统标准
    "outDir": "./dist",      // 编译后的JS存放位置
    "rootDir": "./src",      // TS源代码位置
    "strict": true,          // 开启严格模式（强烈推荐！）
    "esModuleInterop": true  // 解决模块导入兼容问题
  }
}

新手锦囊：刚开始只需关注这几个核心配置，就像学车先掌握油门和方向盘。把strict设为true，虽然初期会多些错误提示，但这正是快速成长的捷径！

2.4 常用开发工具推荐——让你的编辑器成为TypeScript"最佳拍档"

好的工具能让效率翻倍！对于TypeScript，一个强大的编辑器几乎是必备品：

🚀 头号推荐：Visual Studio Code (VS Code)

为什么选它：微软亲儿子，对TypeScript的支持堪称完美，免费且轻量
必备插件：
- ESLint：代码质量守护者
- Prettier：代码自动美化师
- Error Lens：让错误提示一目了然
- Code Spell Checker：专治变量名拼写错误

💡 VS Code + TypeScript 梦幻联动体验

输入对象名加.：自动提示所有可用属性和方法
鼠标悬停变量：显示详细类型信息
Ctrl+点击函数名：跳转到定义处
实时错误检查：写错类型立即标红提醒
重构支持：安全重命名变量/函数

// 试试这段代码，感受智能提示的魅力
const user = {
  name: "Zhao Shijun",
  age: 98,
  hobbies: ["coding", "hiking"]
};

console.log(user.  // 输入"."后观察神奇提示

🎯 其他优秀选择

WebStorm：功能全面的商业IDE（适合专业团队）
Sublime Text：轻量快速（需安装TypeScript插件）

真诚建议：新手直接拥抱VS Code！它就像贴心的编程助手，让你专注于创作而非配置。

2.5 动手时刻：编写你的第一个TypeScript程序——Hello, TypeScript!

理论讲得再多，不如一行代码来得实在！让我们用最经典的"Hello World"仪式，开启你的TypeScript之旅。

步骤详解

创建项目结构：

my-first-ts/
├── src/
│   └── hello.ts   ← TS源代码
├── dist/          ← 编译生成的JS
└── tsconfig.json  ← 配置文件

在 hello.ts 中输入：

// 定义打招呼函数
function greet(name: string): string {
  return `Hello, ${name}! TypeScript欢迎你！`;
}

// 定义用户
const newCoder: string = "探索者";

// 调用函数
console.log(greet(newCoder));

编译代码：
```
tsc  # 自动使用tsconfig.json配置
```
运行程序：
```
node dist/hello.js
```

见证奇迹时刻：终端将输出：

Hello, 探索者! TypeScript欢迎你！

🎯 新手挑战

尝试把 newCoder 改成数字 123，观察VS Code如何立即报警
删掉 : string 类型标注，看编辑器能否正确推断类型
在 greet 调用后添加 .toUpperCase()，感受智能提示

成就感时刻：你刚刚完成了TS代码的编写、编译和运行全流程！这就像亲手组装并启动了第一台引擎，接下来我们将驶入TypeScript的核心地带——类型系统。系好安全带，更精彩的旅程即将开始！

TypeScript入门（二）磨刀不误砍柴工：搭建你的TypeScript游乐场

第2章 磨刀不误砍柴工：搭建你的TypeScript游乐场