vscode 运用 ts 代码需要准备什么

倚栏听风雨2026-01-13 10:09

在 VS Code 中流畅地编写和运行 TypeScript (TS)，需要准备 "一个核心、两个工具、一个插件、三项配置"。

以下是整理的保姆级准备清单：

一、一个核心：Node.js

TypeScript 代码最终需要 Node.js 环境来执行。

检查方式 ：终端输入 node -v。
作用：它是所有前端工具的运行基础。

二、两个全局工具：typescript & tsx

虽然 Node.js 能跑 JS，但它不认识 TS。我们需要安装编译器和运行器。

安装官方编译器 (TypeScript) ：
bash 复制代码
```
npm install -g typescript
```
- 作用：获得 tsc 命令，这是官方的 TS 转 JS 工具。
安装现代运行器 (tsx) ：
bash 复制代码
```
npm install -g tsx
```
- 作用：跳过繁琐的编译步骤，让你像跑 JS 一样直接秒跑 TS 代码。

三、一个必装插件：Code Runner

安装位置 ：VS Code 插件市场搜索 Code Runner。
作用：在编辑器右上角添加那个"三角形"播放按钮，实现一键运行。

四、三项关键配置 (Settings.json)

这是解决 "没有输出" 、"忘记保存" 等小白常见问题的关键。

按 Cmd + , 打开设置，搜索 executorMap，点击 Edit in settings.json，确保以下三项已配置：

json 复制代码

{
    // 1. 指定用 tsx 来执行 TS 文件
    "code-runner.executorMap": {
        "typescript": "tsx"
    },
    // 2. 强制在"终端"面板显示结果（防止在"输出"面板看不到东西）
    "code-runner.runInTerminal": true,
    // 3. 运行前自动保存文件（防止运行的是旧代码）
    "code-runner.saveFileBeforeRun": true
}

五、运行流程：你的日常操作

准备好以上内容后，你每天的学习流程就是：

新建文件 ：创建一个以 .ts 结尾的文件（如 test.ts）。

写代码 ：

typescript 复制代码

let user: string = "小白";
console.log(`你好, ${user}`);

点运行 ：点击右上角三角形按钮。
看结果 ：在下方的 "终端 (Terminal)" 窗口直接看到结果。

进阶建议：为什么不直接用 `tsc`？

直接用 tsc ：你需要先运行 tsc test.ts（生成 test.js），再运行 node test.js。步骤多，文件夹里会多出很多垃圾 JS 文件。
用 tsx：一步到位，不产生多余文件，反馈最快。

vscode 运用 ts 代码需要准备什么

一、 一个核心：Node.js

二、 两个全局工具：typescript & tsx

三、 一个必装插件：Code Runner

四、 三项关键配置 (Settings.json)

五、 运行流程：你的日常操作