如何在VSCode中配置并运行TypeScript项目【教程】_网络技术

VSCode仅编辑并调用TypeScript编译器，实际编译依赖本地tsc或Node.js；需安装tsc、配置tsconfig.json（含outDir、sourceMap等）、用ts-node运行及配置launch.json实现断点调试。

vscode 本身不运行 typescript，它只负责编辑和调用 tsc 或构建工具；真正编译和执行靠的是本地安装的 typescript 编译器或 node.js 运行时。

确认已全局或本地安装 `tsc`

运行 tsc --version 是验证配置是否可行的第一步。如果报错 command not found 或 无法识别的命令，说明 TypeScript 编译器没装好。

推荐使用项目级安装：npm init -y && npm install --save-dev typescript，然后通过 npx tsc 调用
全局安装（不推荐）：npm install -g typescript，容易因版本混用导致 tsconfig.json 行为不一致
VSCode 的 TS 插件（如内置的 “TypeScript and JavaScript Language Features”）依赖本地 node_modules/.bin/tsc，找不到时会回退到全局，但不可靠

初始化 `tsconfig.json` 并理解关键字段

直接运行 npx tsc --init 生成基础配置。很多问题源于默认配置未适配运行目标 —— 比如你写的是 Node.js 脚本，但 "target" 是 "ES2017"、"module" 是 "commonjs"，这没问题；但若设成 "ESNext" + "NodeNext"，就要求 Node.js ≥18.12 且启用 "type": "module"，否则运行时报错 ERR_REQUIRE_ESM。

"outDir" 必须设置，否则编译文件和源码混在一起，热重载/调试易出错
"rootDir" 建议显式指定，避免 tsc 自动向上查找导致意外包含 node_modules 或配置文件
"sourceMap" 开启后才能在 VSCode 里断点调试 .ts 文件（配合 launch.json）

用 `ts-node` 直接运行 `.ts` 文件（跳过手动编译）

开发阶段不想每次改完都 npx tsc && node ./dist/index.js？ts-node 是更顺手的选择，但它不是编译器替代品，而是运行时转译，性能和类型检查能力弱于 tsc。

安装：npm install --save-dev ts-node @types/node
运行单文件：npx ts-node src/index.ts
支持 tsconfig.json，但部分选项（如 "composite"、"incremental"）会被忽略
注意：ts-node 默认不校验类型错误（只做转译），加 --transpile-only 会彻底关掉类型检查；如需边跑边报错，用 npx ts-node --no-cache --files src/index.ts

配置 `launch.json` 实现断点调试

VSCode 调试 TypeScript 的核心是让 Debugger 知道如何把 .ts 映射回生成的 .js 和 .js.map。光有 sourceMap: true 不够，launch.json 的路径解析也必须匹配。

确保 tsconfig.json 中 "outDir" 和 "sourceMap" 已启用
在项目根目录创建 .vscode/launch.json，内容如下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch via NPM",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run", "dev"],
      "console": "integratedTerminal",
      "skipFiles": ["/**"]
    }
  ]
}

再在 package.json 加脚本："dev": "ts-node --project ./tsconfig.json src/index.ts"。这样断点才能落在 .ts 行上，而不是编译后的 .js。

最常被忽略的是 "outDir" 路径与 launch.json 中 program 字段的不一致，或者忘了生成 .map 文件 —— 这会导致 VSCode 显示“断点未绑定”，但不会报错提醒。

# javascript # java # vscode # js # node.js # json # node # typescript # npm

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】