当前位置：首页 > news >正文

浏览器无法直接运行 TypeScript 代码

news 2026/6/29 19:57:51

浏览器无法直接运行 TypeScript 代码，必须先将 TypeScript 编译为 JavaScript 才能执行。
正确做法是：
1）编写 .ts 文件；
2）使用 tsc 或构建工具编译为.js文件；
3）在HTML中通过 script 标签引入编译后的JS文件。
直接在HTML中嵌入TypeScript代码（即使设置type="text/typescript"）是无效的，除非使用特殊运行时库。
现代开发推荐使用 Vite 等构建工具实现自动编译和热更新。

浏览器无法直接运行 TypeScript 代码

原因：

TypeScript 是 JavaScript 的超集，它添加了静态类型等特性，但浏览器无法直接运行 TypeScript 代码。所有 TypeScript 代码必须先编译（转译）成 JavaScript，然后才能在浏览器中运行。

正确的使用方式：

开发流程

编写.ts文件（TypeScript 代码）
使用 TypeScript 编译器（tsc）或构建工具（如 Vite、Webpack、esbuild 等）将.ts编译为.js
在 HTML 中通过<script>标签引入编译后的.js文件

示例：

1.app.ts

function greet(name: string): string { return `Hello, ${name}!`; } console.log(greet("Alice"));

2. 编译为 JavaScript

Bash

tsc app.ts # 生成 app.js

3.index.html

Html

<!DOCTYPE html> <html> <head> <title>TypeScript Demo</title> </head> <body> <!-- 引入编译后的 JS 文件 --> <script src="app.js"></script> </body> </html>

补充说明：

不能这样写（无效）：
Html
```
 <script type="text/typescript"> let x: number = 10; console.log(x); </script>
```
虽然你可以设置type="text/typescript"，但除非你引入了能在浏览器中实时编译 TS 的库（如TypeScript Playground 的运行时或某些实验性工具），否则这段代码不会执行。
现代开发推荐：使用构建工具（如 Vite）可以实现.ts文件的自动编译和热更新，提升开发体验。