如何在HTML文档中通过script标签引入.ts文件并使其生效？Angular应用中引入.ts文件遇MIME类型错误及TypeScript运行机制疑问

1. 如何通过script标签在HTML文档中添加.ts文件并使其正常运行？ #

浏览器本身不原生支持TypeScript，直接用<script src="xxx.ts"></script>引入是没法运行的。想要让.ts文件在浏览器里跑，有两种可行方案：

方案一：编译为JavaScript后引入（推荐生产环境） #

这是最标准、性能最优的做法：

• 先全局安装TypeScript编译器：npm install -g typescript
• 编写你的TypeScript代码，比如app.ts
• 执行编译命令：tsc app.ts，同目录会生成对应的app.js文件
• 在HTML里引入编译后的JS文件：<script src="app.js"></script>

开发时可以用--watch参数实现实时编译：tsc app.ts --watch，修改.ts文件后编译器会自动重新编译。

方案二：浏览器端实时编译（仅用于开发调试） #

如果只是快速调试代码，不想提前编译，可以借助TypeScript浏览器版编译器实现实时转译，但绝对不要在生产环境使用，会严重拖慢页面加载速度：

<!-- 引入TypeScript浏览器版编译器 -->
<script src="https://unpkg.com/typescript@latest/lib/typescript.js"></script>
<script type="module">
  // 加载本地.ts文件内容
  const tsCode = await fetch('./app.ts').then(res => res.text());
  
  // 把TypeScript转译为JavaScript
  const jsCode = ts.transpile(tsCode, {
    target: ts.ScriptTarget.ES2020, // 指定目标JS版本
    module: ts.ModuleKind.ES2020   // 指定模块类型
  });
  
  // 把转译后的JS作为模块引入并执行
  const module = await import(`data:text/javascript;base64,${btoa(jsCode)}`);
  // 假设.ts文件导出了run方法，这里调用它
  module.run();
</script>

2. Angular应用中遇到的MIME类型错误，以及TypeScript是否必须编译为JS？ #

关于MIME类型错误：“因为其MIME类型('video/mp2t')不可执行” #

这个错误的根源是服务器配置异常：它把.ts文件错误识别成了视频文件（video/mp2t是视频流的MIME类型），返回给浏览器时带上了错误的Content-Type头，浏览器因此拒绝执行该脚本。

即使修复服务器MIME类型配置（给.ts文件设置text/typescript或text/plain），浏览器还是没法直接运行.ts文件——因为它根本不认识TypeScript语法。

TypeScript是否必须编译为JavaScript才能在浏览器中使用？ #

是的，所有浏览器都原生不支持TypeScript。TypeScript是JavaScript的超集，添加了类型系统等扩展特性，但这些特性都是浏览器无法理解的，必须通过TypeScript编译器转译为标准JavaScript代码，才能被浏览器执行。

另外，在Angular项目中，完全不需要手动在HTML里引入.ts文件——Angular本身基于TypeScript构建，它的CLI工具（ng build/ng serve）会自动处理所有.ts文件的编译、打包，最终输出浏览器可识别的JS文件。你应该遵循Angular模块化规范，通过import语句在组件或服务中导入其他.ts文件，而非直接用script标签引入。

内容的提问来源于stack exchange，提问作者mittal_sahil