VSCode运行TS与HTML配置教程

本文详细讲解了如何在 Visual Studio Code 中高效配置并运行 TypeScript 与 HTML 的组合开发环境：从安装 Node.js 和 TypeScript、初始化项目及定制 tsconfig.json，到组织 src/dist 目录结构、编写并编译 TS 代码，再到正确引入 JS 文件至 HTML 并借助 Live Server 插件和 VSCode 任务实现保存即编译、实时预览的一体化开发流程——彻底解决 TS 无法直接在浏览器运行的痛点，让前端开发者轻松享受类型安全与即时反馈的双重优势。

如果您在使用 Visual Studio Code 编辑 TypeScript 代码并希望将其与 HTML 页面结合运行，可能遇到无法直接执行或页面无响应的问题。以下是实现 TypeScript 代码在 HTML 中正确运行的完整配置流程：

一、安装 Node.js 与 TypeScript 环境

要在 VSCode 中运行 TypeScript，必须先确保系统中已安装 Node.js 和 TypeScript 编译器。TypeScript 需要被编译为 JavaScript 才能在浏览器中执行。

1、访问 Node.js 官网下载并安装最新版本的 Node.js，安装完成后在终端执行 node -v 和 npm -v 验证是否安装成功。

2、通过 npm 全局安装 TypeScript，执行命令 npm install -g typescript。

3、验证 TypeScript 是否安装成功，运行 tsc -v 查看版本号。

二、初始化项目并配置 tsconfig.json

配置 tsconfig.json 文件可以定义 TypeScript 的编译选项，确保输出的 JavaScript 文件兼容浏览器环境。

1、在项目根目录打开终端，运行 tsc --init 生成默认的 tsconfig.json 文件。

2、打开 tsconfig.json 文件，修改以下关键配置项：
"target": "es2016"（可改为 es5 以兼容旧浏览器），
"outDir": "./dist"（指定编译后 js 文件输出目录），
"rootDir": "./src"（指定源码存放目录）。

3、保存文件，后续 tsc 命令将依据此配置进行编译。

三、编写 TypeScript 代码并输出到 dist 目录

将 TypeScript 文件放置于 src 目录下，编译后自动生成对应的 JavaScript 文件至 dist 目录，供 HTML 引用。

1、在项目中创建 src 文件夹，并新建一个 index.ts 文件。

2、在 index.ts 中编写示例代码，例如：
const greet = (name: string) => {
  console.log(`Hello, ${name}`);
};
greet("World");

3、在终端运行 tsc 命令，自动将 index.ts 编译为 dist/index.js。

四、创建 HTML 文件并引入编译后的 JS 文件

HTML 文件不能直接引用 .ts 文件，必须引用由 tsc 编译生成的 .js 文件。

1、在项目根目录或 dist 目录中创建 index.html 文件。

2、在 HTML 文件的 标签内添加 script 标签引入编译后的 JavaScript 文件：

3、保存后双击 HTML 文件在浏览器中打开，或使用 Live Server 插件启动本地服务器查看效果。

五、使用 VSCode 插件自动化编译与运行

通过配置任务和插件，实现在保存 TypeScript 文件时自动编译，并配合本地服务器实时预览。

1、在 VSCode 扩展市场中搜索并安装 Live Server 插件。

2、右键点击 index.html 文件，选择 “Open with Live Server”，自动启动本地开发服务器。

3、在项目根目录下创建 .vscode 文件夹，添加 tasks.json 文件，配置监听模式：
设置 type 为 shell，command 为 tsc，args 包含 -w（开启监视模式）。

4、通过 Ctrl+Shift+P 打开命令面板，运行 “Tasks: Run Build Task” 启动自动编译。

好了，本文到此结束，带大家了解了《VSCode运行TS与HTML配置教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！