Visual Studio Code如何运行TypeScript

Visual Studio Code 运行 TypeScript，首要前提是本地已安装 Node.js 和 VS Code。

一、启用 TypeScript 语言支持

VS Code 自带 TypeScript 语言服务（无需额外安装扩展），但需确保使用的是项目级 TypeScript 版本：

• 查看右下角状态栏中的 TypeScript 版本号（如 TS 5.4.5）；
• 点击该版本号 → 选择 “Use Workspace Version”（若项目已安装 typescript 到 devDependencies）；
• 若未安装，先在终端执行：

  npm install --save-dev typescript

二、新建 TypeScript 源文件

在项目目录中创建标准结构（推荐）：

• 新建 src/ 文件夹；
• 在其中新建 hello.ts（扩展名必须为 .ts）；
• 此举便于后续配置 tsconfig.json 中的 rootDir 和 outDir。

三、编写 TypeScript 代码

在 src/hello.ts 中输入如下示例：

'>

Visual Studio Professional 18.8.1

Visual Studio 18.8.1 官方固定版本安装引导程序，当前条目使用微软发布历史中的 Professional Web Installer，适合旧项目兼容、环境回退、复现特定构建链和排查版本差异等场景。

下载

function greet(name: string): string {
  return `hello, ${name}!`;
}

const message = greet('Visual Studio Code');
console.log(message);

✅ 注意：类型标注（如 : string）和返回类型声明增强可维护性，VS Code 将实时提供类型检查与错误提示。

四、执行 TypeScript 代码

方式一：手动编译 + 运行（适合生产或构建流程）

1. 打开集成终端（Ctrl +）；
2. 在项目根目录下执行初始化配置（若尚无 tsconfig.json）：

   npx tsc --init

3. 编辑生成的 tsconfig.json，确保关键项如下：

   {
     "compilerOptions": {
       "target": "es2016",
       "module": "commonjs",
       "outDir": "./dist",
       "rootDir": "./src",
       "sourceMap": true,
       "strict": true,
       "noEmit": false
     },
     "include": ["src/**/*"]
   }

4. 编译：

   npx tsc

   成功后将在 dist/ 下生成 hello.js 和 hello.js.map；

5. 运行：

   node dist/hello.js

   输出：hello, Visual Studio Code!

方式二：直接运行 .ts 文件（开发调试首选）

1. 安装 ts-node（含类型检查支持）：

   npm install --save-dev ts-node @types/node

2. 直接执行：

   npx ts-node src/hello.ts

   ✅ 支持实时类型校验（加 --files 参数可强制全量检查）；
   ❌ 注意：ts-node 默认不启用 strict 模式下的全部检查，建议仍以 npx tsc --noEmit 做最终验证。

方式三：F5 调试 .ts 源码（断点即停，无需切换 .js）

1. 按 Ctrl+Shift+P → 输入并选择 “Debug: Open launch.json”；
2. 选择环境为 “Node.js”，自动生成 .vscode/launch.json；
3. 替换其内容为以下标准配置（适配 ts-node）：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "调试 TypeScript",
         "type": "pwa-node",
         "request": "launch",
         "program": "${workspaceFolder}/src/hello.ts",
         "runtimeArgs": ["-r", "ts-node/register"],
         "skipFiles": ["<node_internals>/**"],
         "env": { "TS_NODE_FILES": "true" }
       }
     ]
   }

4. 在 .ts 文件中任意行左侧点击设断点 → 按 F5 启动调试，即可逐行执行源码并查看变量值。

⚠️ 提示：避免混用 preLaunchTask: "tsc: build" 与 ts-node 配置，否则易引发路径冲突或重复编译。