vscode怎么运行ts代码HTML_vscode运行ts与HTML配合法【教程】-html教程-PHP中文网

vscode怎么运行ts代码HTML_vscode运行ts与HTML配合法【教程】

看不見的法師

发布： 2025-12-02 14:46:02

原创

855人浏览过

首先安装Node.js和TypeScript，初始化项目并配置tsconfig.json，将TypeScript代码放在src目录并编译到dist目录，然后在HTML中引入编译后的JS文件，最后通过Live Server插件启动服务器并配置自动编译任务实现实时预览。

vscode怎么运行ts代码html_vscode运行ts与html配合法【教程】

如果您在使用 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 文件可以定义 TypeScript 的编译选项，确保输出的 JavaScript 文件兼容浏览器环境。

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

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

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

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

Weights.gg

多功能的AI在线创作与交流平台

3352

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

2、在 index.ts 中编写示例代码，例如：

const greet = (name: string) => {<br>
  console.log(`Hello, ${name}`);<br>
};<br>
greet("World");

登录后复制

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

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

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

2、在 HTML 文件的 <body> 标签内添加 script 标签引入编译后的 JavaScript 文件：
<script src="./index.js"></script>

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

通过配置任务和插件，实现在保存 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_vscode运行ts与HTML配合法【教程】的详细内容，更多请关注php中文网其它相关文章！