清晰易懂的TypeScript安装与开发环境配置教程

TypeScript 是 JavaScript 的超集，提供了静态类型检查和更强大的开发工具支持。本教程将手把手教你安装 TypeScript 并配置开发环境（以 VS Code 为例），从零开始到运行第一个程序，全程无坑！

---

一、安装 Node.js 和 npm

TypeScript 依赖 Node.js 环境，需先安装 Node.js（自带 npm 包管理工具）。

1. 下载 Node.js

• 访问 Node.js 官网 → 下载 LTS 版本（推荐所有用户安装）。
  • Windows/macOS：直接下载安装包。
  • Linux：使用包管理器安装：

    # Ubuntu/Debian
    curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
    sudo apt install -y nodejs
    

2. 验证安装

node -v  # 输出示例：v18.17.1
npm -v   # 输出示例：9.6.7

---

二、安装 TypeScript

1. 全局安装 TypeScript 编译器

npm install -g typescript

2. 验证安装

tsc -v  # 输出示例：Version 5.2.2

---

三、配置 VS Code 开发环境

1. 安装 VS Code

• 下载地址：https://code.visualstudio.com
• 安装后启动 VS Code。

2. 安装必备扩展

1. TypeScript 支持：
   • 搜索并安装官方扩展 “TypeScript Language Basics”。
2. 代码格式化：
   • 安装 “Prettier - Code formatter”。
3. 调试工具：
   • 安装 “Debugger for Chrome”（浏览器调试）或 “Node.js Debug”。

---

四、创建并运行第一个 TypeScript 项目

1. 初始化项目

1. 创建项目文件夹（如 my-ts-project），进入目录：

   mkdir my-ts-project && cd my-ts-project
   

2. 初始化 npm 项目（生成 package.json）：

   npm init -y
   

3. 创建 TypeScript 配置文件：

   tsc --init  # 生成 tsconfig.json
   

2. 配置 tsconfig.json

打开 tsconfig.json，修改以下关键配置：

{
  "compilerOptions": {
    "target": "ES2022",     // 编译目标版本
    "module": "CommonJS",   // 模块系统
    "outDir": "./dist",     // 输出目录
    "rootDir": "./src",     // 源码目录
    "strict": true          // 启用严格类型检查
  }
}

3. 编写代码

1. 创建 src 文件夹，新建 index.ts：

   function greet(name: string): void {
     console.log(`你好，${name}！`);
   }
   
   greet("世界");
   

4. 编译并运行

1. 编译 TypeScript 代码：

   tsc  # 生成 dist/index.js
   

2. 运行编译后的 JavaScript：

   node dist/index.js  # 输出：你好，世界！
   

5. 自动编译（监听模式）

tsc -w  # 代码保存后自动编译

---

五、新手容易忽略的细节

1. 未配置 tsconfig.json 路径

• 现象：编译时提示找不到文件。
• 解决：确保 rootDir 和 outDir 路径与实际目录一致。

2. 全局安装权限问题（Linux/macOS）

• 现象：npm install -g 报错 EACCES。
• 解决：使用 sudo npm install -g 或修复 npm 全局目录权限：

  mkdir ~/.npm-global
  npm config set prefix '~/.npm-global'
  echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.bashrc
  source ~/.bashrc
  

3. VS Code 未使用正确 TypeScript 版本

• 现象：代码提示与编译版本不一致。
• 解决：
  1. 点击 VS Code 右下角 TypeScript 版本号 → 选择 “Use Workspace Version”。
  2. 或按 Ctrl+Shift+P → 输入 “Select TypeScript Version”。

4. 忽略类型错误

• 现象：代码有类型错误但编译通过。
• 解决：在 tsconfig.json 中确保 "noEmitOnError": true。

---

六、总结

通过本教程，你已成功完成以下操作：

1. 安装 TypeScript：基于 Node.js 环境全局安装编译器。
2. 配置 VS Code：安装扩展、优化开发体验。
3. 运行首个项目：从编写到编译执行全流程。

下一步建议：

• 学习 TypeScript 类型系统（如接口、泛型）。
• 尝试用 TypeScript 开发 React/Vue 前端项目。

遇到问题可查阅 TypeScript 官方文档 或留言讨论，祝你早日成为 TypeScript 高手！ 🚀