VSCode怎么执行TS脚本_VSCode运行TypeScript代码和编译教程-VSCode-PHP中文网

答案：在VSCode中运行TypeScript需先将TS转译为JS，因Node.js无法直接执行TS。常用方案包括：使用ts-node直接运行，适合开发测试；通过tsc编译后再用node运行，适合生产环境；结合launch.json配置调试，提升开发效率。

vscode怎么执行ts脚本_vscode运行typescript代码和编译教程

在VSCode里运行TypeScript脚本，核心思路其实就一个：TypeScript代码本身是不能直接被Node.js环境执行的，它需要先被“翻译”成JavaScript，然后Node.js才能理解并运行。这个“翻译”过程就是我们常说的编译（或者更准确地说是转译，transpilation）。VSCode之所以能让我们感觉“直接”运行TS，是因为它集成了各种工具和配置，把这个编译-运行的流程给自动化了。

解决方案

要在VSCode中运行TypeScript代码，通常有几种主流的做法，各有侧重，我个人在不同场景下会选择不同的方式。

方案一：使用

ts-node

登录后复制

进行快速开发和测试

这是我个人在日常开发中，尤其是在跑一些小脚本、测试某个函数或者进行快速迭代时最喜欢的方式。它省去了显式编译生成

.js

登录后复制

文件的步骤，直接在内存中完成转译并执行。

安装必要的包： 首先，确保你的项目（或全局）安装了

typescript

登录后复制

和

ts-node

登录后复制

。

npm install -g typescript ts-node   # 全局安装
# 或者在项目根目录安装
# npm install --save-dev typescript ts-node

登录后复制

创建
tsconfig.json
登录后复制
（如果尚未创建）：虽然

ts-node

登录后复制

在很多情况下能自动推断配置，但为了保证一致性和避免潜在问题，一个基本的

tsconfig.json

登录后复制

文件总是好的。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018", // 根据你的Node.js版本和需求调整
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

登录后复制

运行TypeScript文件： 在VSCode的集成终端中，导航到你的项目目录，然后执行：
```
ts-node your-script.ts
```
登录后复制
比如，如果你有一个
```
src/index.ts
```
登录后复制
文件，里面写了
```
console.log("Hello, TypeScript!");
```
登录后复制
，那么就运行
```
ts-node src/index.ts
```
登录后复制
。你会看到“Hello, TypeScript!”直接输出。

方案二：传统编译后运行（

tsc

登录后复制

+
node
登录后复制
）

这种方式更符合TypeScript的“本意”，也是生产环境部署时的标准做法。它让你对编译过程有更清晰的认知和控制。

安装
typescript
登录后复制
：

npm install -g typescript
# 或者 npm install --save-dev typescript

登录后复制

创建
tsconfig.json
登录后复制
并配置输出目录：在

tsconfig.json

登录后复制

中，你通常会指定一个输出目录（

outDir

登录后复制

），这样编译生成的JavaScript文件就不会和你的TypeScript源文件混在一起。

// tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist", // 将编译后的JS文件输出到dist目录
    "rootDir": "./src"  // 你的TypeScript源文件都在src目录下
  },
  "include": ["src/**/*"] // 告诉tsc需要编译哪些文件
}

登录后复制

编译TypeScript文件： 在VSCode集成终端中运行TypeScript编译器：
```
tsc
# 或者如果你只想编译某个文件：
# tsc src/your-script.ts
```
登录后复制
执行
```
tsc
```
登录后复制
后，你会发现在项目根目录下多了一个
```
dist
```
登录后复制
文件夹（如果配置了
```
outDir
```
登录后复制
），里面包含了编译后的JavaScript文件。
运行编译后的JavaScript文件： 现在，使用Node.js来运行这些JavaScript文件。
```
node dist/your-script.js
```
登录后复制
比如，
```
node dist/index.js
```
登录后复制
。

方案三：利用VSCode的调试器进行调试

这是开发大型项目时不可或缺的利器。VSCode的调试功能非常强大，可以让你在TypeScript源码级别设置断点、单步执行、检查变量等。

配置
```
launch.json
```
登录后复制
：在VSCode中，点击左侧的“运行和调试”图标（虫子形状），然后点击“创建
```
launch.json
```
登录后复制
文件”。VSCode会提示你选择一个环境，选择“Node.js”即可。它会为你生成一个默认的配置。你需要根据你选择的运行方式（
```
ts-node
```
登录后复制
或
```
tsc
```
登录后复制
+
```
node
```
登录后复制
）来调整这个文件。
- 使用
```
ts-node
```
  登录后复制
  进行调试的
  launch.json
  登录后复制
  示例：
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "使用ts-node调试当前文件",
      "runtimeArgs": ["-r", "ts-node/register"], // 关键：注册ts-node
      "args": ["${file}"], // 运行当前打开的TS文件
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}
```
  登录后复制
  这个配置会使用
```
ts-node
```
  登录后复制
  来直接运行你当前在VSCode中打开的TypeScript文件，并且支持在TS源文件上打断点。
- 编译后调试（
```
tsc
```
  登录后复制
  +
  node
  登录后复制
  ）的
  launch.json
  登录后复制
  示例：
  
  知海图Chat
  知乎与面壁智能合作推出的智能对话助手
  
  157
  
  查看详情
```
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "编译后调试",
      "preLaunchTask": "tsc: build - tsconfig.json", // 关键：先执行编译任务
      "program": "${workspaceFolder}/dist/index.js", // 运行编译后的JS文件
      "outFiles": ["${workspaceFolder}/dist/**/*.js"], // 告诉调试器源文件映射在哪里
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "sourceMaps": true // 启用源映射
    }
  ]
}
```
  登录后复制
  这个配置假设你有一个名为
```
index.ts
```
  登录后复制
  的文件，编译后会生成
```
dist/index.js
```
  登录后复制
  。
```
preLaunchTask
```
  登录后复制
  会确保在调试前先执行一次编译。
```
outFiles
```
  登录后复制
  和
```
sourceMaps
```
  登录后复制
  的配置非常重要，它们让调试器能够把运行中的JavaScript代码映射回原始的TypeScript代码，这样你才能在TS文件上设置断点。

为什么TypeScript代码不能直接在Node.js环境中运行？

这个问题是很多初学者都会遇到的一个核心疑惑，也是理解TypeScript工作原理的关键。简单来说，Node.js是一个JavaScript运行时环境，它只“认识”JavaScript代码。当你编写TypeScript代码时，你是在使用JavaScript的一个超集，这意味着你引入了Node.js或浏览器原生JavaScript引擎不理解的语法特性，比如类型注解（

string

登录后复制

、

number

登录后复制

）、接口（

interface

登录后复制

）、枚举（

enum

登录后复制

）、装饰器（

@decorator

登录后复制

）等。

想象一下，Node.js就像一个只懂普通话的听众，而TypeScript就像一种方言，虽然大部分内容和普通话相似，但其中夹杂了一些只有方言使用者才懂的词汇和表达方式。为了让普通话听众理解，你需要一个翻译（也就是TypeScript编译器

tsc

登录后复制

）把方言“翻译”成普通话。这个翻译过程会剥离所有TypeScript特有的语法，只留下纯粹的JavaScript代码。

所以，无论是

ts-node

登录后复制

还是

tsc

登录后复制

，它们本质上都在做同一件事：将TypeScript代码转译成JavaScript，只是

ts-node

登录后复制

把这个过程自动化并隐藏起来了，而

tsc

登录后复制

则显式地生成了JavaScript文件。没有这个转译步骤，Node.js就无法执行你的TypeScript代码，会抛出语法错误。

如何配置VSCode以便更高效地开发和调试TypeScript项目？

高效的TypeScript开发体验，很大程度上取决于VSCode的合理配置和一些常用工具的配合。这不仅仅是能跑起来代码那么简单，更是让整个开发流程顺畅、愉快。

首先，

tsconfig.json

登录后复制

是你的TypeScript项目的“大脑”。它的配置直接影响到编译行为、类型检查的严格程度以及最终生成的JavaScript代码。一些关键配置项：

```
"target"
```
登录后复制
: 决定编译后的JavaScript目标版本（例如
```
"es2018"
```
登录后复制
、
```
"esnext"
```
登录后复制
），这很重要，因为它影响了哪些新的JS特性会被保留或被降级。
```
"module"
```
登录后复制
: 指定模块系统（例如
```
"commonjs"
```
登录后复制
、
```
"esnext"
```
登录后复制
），这取决于你的项目是Node.js后端还是前端，以及你如何处理模块导入导出。
```
"strict": true
```
登录后复制
: 我个人强烈建议开启这个选项。它会启用所有严格的类型检查选项，虽然一开始可能会觉得有点“烦”，但长远来看，它能帮助你捕获大量的潜在错误，提升代码质量和可维护性。
```
"outDir"
```
登录后复制
和
```
"rootDir"
```
登录后复制
: 用于管理编译输出和源文件结构，保持项目整洁。
```
"esModuleInterop": true
```
登录后复制
: 解决CommonJS和ES模块之间的互操作性问题，避免一些奇怪的导入错误。

其次，VSCode的调试配置（

launch.json

登录后复制

）是提升开发效率的关键。如前面方案三所示，你可以配置不同的启动项来适应不同的调试场景。例如，可以有一个配置用于快速调试当前文件，另一个配置用于启动整个应用服务。利用

preLaunchTask

登录后复制

可以自动化一些前置操作，比如在调试前自动编译代码，或者启动一个本地开发服务器。

除了这些核心配置，VSCode的一些扩展也极大地提升了TypeScript的开发体验：

内置TypeScript支持： VSCode对TypeScript的支持是开箱即用的，提供了智能感知、代码跳转、重构等功能，这是最基础也是最重要的。
Prettier - Code formatter： 保持代码风格一致性，减少团队内部因格式问题产生的争执。
ESLint： 结合
```
@typescript-eslint/parser
```
登录后复制
和相关插件，可以进行更深层次的代码质量检查和规范。它能帮你发现潜在的逻辑错误、不规范的写法，甚至一些性能陷阱。
Path Intellisense： 在导入模块时提供路径自动补全，减少手动输入和路径错误的发生。

最后，利用VSCode的“任务”（

tasks.json

登录后复制

）功能可以自动化一些重复性的操作。例如，你可以配置一个任务来运行

tsc --watch

登录后复制

，这样每次保存TypeScript文件时，它都会自动重新编译。或者配置一个任务来运行测试脚本，将编译、运行测试等步骤串联起来。这能让你的开发流程更加流畅，减少手动操作的麻烦。

使用

ts-node

登录后复制

和

tsc

登录后复制

node

登录后复制

这两种方式各有什么优缺点？

在选择运行TypeScript代码的方式时，

ts-node

登录后复制

和

tsc

登录后复制

node

登录后复制

各有其适用场景和优劣。这就像选择交通工具，短途可能打车快，长途可能高铁更稳妥。

ts-node

登录后复制

的优缺点：

优点：
- 开发体验流畅： 这是它最大的优势。省去了显式编译的步骤，直接运行TypeScript文件，开发周期更快，特别适合脚本、测试或快速原型开发。你修改了TS文件，直接
```
ts-node your-script.ts
```
  登录后复制
  就能看到结果，不需要等待
```
tsc
```
  登录后复制
  编译。
- 简洁性： 项目目录中不会产生大量的
```
.js
```
  登录后复制
  文件，保持代码库的整洁。对于一些一次性脚本或者学习项目来说，这非常方便。
- 调试友好： 配合VSCode的
```
launch.json
```
  登录后复制
  配置，可以在TypeScript源文件上直接打断点进行调试，体验与调试JavaScript无异。
缺点：
- 性能开销： 每次运行都会在内存中进行即时编译，对于大型项目或需要频繁启动的应用来说，启动速度会比直接运行JavaScript慢。在一些性能敏感的场景下，这可能是个问题。
- 不适合生产环境：
```
ts-node
```
  登录后复制
  主要用于开发和测试。在生产环境中部署时，通常不推荐使用它，因为它增加了运行时依赖，并且即时编译的性能开销在生产环境中是不可接受的。生产环境需要的是预编译、优化过的JavaScript代码。
- 潜在的环境不一致性： 虽然通常不是大问题，但在某些复杂配置下，
```
ts-node
```
  登录后复制
  的即时编译行为可能与
```
tsc
```
  登录后复制
  的离线编译略有差异，导致一些意想不到的问题。

tsc

登录后复制

+
node
登录后复制
的优缺点：

优点：
- 性能优越： 一旦编译完成，运行的就是纯粹的JavaScript代码，Node.js可以以最高效率执行，没有额外的编译开销。这是生产环境部署的黄金标准。
- 生产环境就绪： 编译后的JavaScript代码是自包含的，部署时只需要发布
```
dist
```
  登录后复制
  目录下的JS文件即可，依赖更少，更稳定。
- 明确的编译步骤： 编译过程是显式的，你可以清楚地看到生成的JavaScript代码，这有助于理解TypeScript的转换机制。同时，编译阶段就能发现很多类型错误，而不是等到运行时。
- 源映射（Source Maps）支持：
```
tsc
```
  登录后复制
  会生成
```
.map
```
  登录后复制
  文件，使得在调试编译后的JavaScript代码时，调试器能够将其映射回原始的TypeScript代码，提供良好的调试体验。
缺点：
- 开发流程稍显繁琐： 每次修改TypeScript代码后，都需要先执行
```
tsc
```
  登录后复制
  命令进行编译，然后再用
```
node
```
  登录后复制
  命令运行编译后的JavaScript文件。虽然可以通过
```
tsc --watch
```
  登录后复制
  或VSCode任务来自动化，但仍然多了一个步骤。
- 生成中间文件： 会在项目目录中生成编译后的
```
.js
```
  登录后复制
  文件（通常在
```
dist
```
  登录后复制
  目录下），这需要你合理配置
```
.gitignore
```
  登录后复制
  来避免将这些文件提交到版本控制。
- 初学者门槛： 对于刚接触TypeScript的开发者来说，理解编译、输出目录、源映射等概念可能需要一些时间。