步骤 1：安装 Node.js

作用

• Node.js 提供 npm（包管理器），用于安装 TypeScript 编译器和 VSCode 插件依赖。
• 包含 node 命令，用于直接运行编译后的 JS 文件。

操作要点

1. 访问 Node.js 官网 下载 LTS 版本（稳定版）。
2. 安装时勾选 “Add to PATH”（Windows），自动配置环境变量。验证：命令行输入 node -v 和 npm -v，输出版本号即成功
3. 验证安装是否成功
   • 打开命令行工具：按下 “Win+R” 键，输入 “cmd” 并回车，打开命令提示符窗口；或者在开始菜单中找到 “命令提示符” 并打开。
   • 检查版本号：在命令提示符窗口中分别输入 “node -v” 和 “npm -v” 命令。如果正确输出版本号，说明 Node.js 和 npm 安装成功。“node -v” 显示 Node.js 的版本，“npm -v” 显示 npm（Node.js 包管理器）的版本 。

2. 安装 TypeScript

• 作用：TypeScript 是 JavaScript 的超集，增加了类型系统，能提前发现代码错误，提升开发效率。
• 操作步骤：
  1. 打开命令提示符 / 终端，输入以下命令（通过 Node.js 自带的 npm 工具安装）：
     • -g 表示全局安装，安装后可在任意目录使用。
  2. 验证是否安装成功：输入 tsc -v，若显示版本号（如 5.2.2），则安装成功

• 步骤 3：安装 VSCode

• 作用

• 代码编辑器，需配合插件实现 TS 开发的语法提示、编译等功能。
• 操作要点
• 下载：
  • 官网 VSCode 下载页，根据系统选择安装包（.exe/.dmg/.deb 等）。
• 安装：
  • Windows：双击安装包，按向导完成安装，勾选 “添加到 PATH”。
  • macOS：将应用拖入 “应用程序” 文件夹。
  • Linux：使用包管理器或解压压缩包后运行。
• 验证：命令行输入 code --version，输出版本号（如 1.83.0）即成功。

  步骤 4：新建 TS 文件

  创建 TypeScript 源代码文件，扩展名为 .ts。

• 在 VSCode 中：
  • 通过 “文件> 新建文件” 创建 xxx.ts，或在项目目录中右键新建。
• 示例代码：

  

  步骤 5：编译 TS 文件为 JS

  作用

• 使用 TypeScript 编译器 tsc 将 TS 代码转为 JS 代码，以便浏览器或 Node.js 运行。
• xxx.js 内容为 JS 代码，例如上述示例编译后：

  • 步骤 6：运行 JS 文件

    作用

  • 验证代码执行效果，支持浏览器或 Node.js 环境。

  • 6.1 浏览器运行：

    1. 创建 HTML 文件（如 index.html），引入 JS 文件：
    2. 用浏览器打开 index.html，查看控制台输出（按 F12 打开开发者工具）。

  • 6.2 Node.js 运行

  • 1.确保已安装 Node.js。
  • 2.在终端中输入命令：

    tsc index.js

    直接在终端中显示输出结果

  • 总结：7 步核心流程图示

  • Node.js 安装 → TypeScript 安装 → VSCode 安装 → 新建 TS 文件 → 编译 TS → 运行 JS → 效果验证