如何在JavaScript中导入TypeScript函数？遇MIME类型报错如何解决

触发这个报错的核心原因是直接在浏览器端代码里导入了.ts后缀的TypeScript源文件：

• 服务器默认会把.ts后缀识别为video/mp2t类型的MPEG传输流视频文件，不会把它当成JavaScript脚本返回
• 浏览器对模块脚本有严格的MIME类型校验，收到非JS类型的响应会直接拦截加载，就会抛出你看到的错误
• 浏览器原生不支持直接运行TypeScript代码，所有TS代码都必须先编译为普通JavaScript才能在浏览器里执行。

1. 配置TypeScript编译环境
   在项目根目录执行以下命令安装TS依赖并生成配置文件：

   npm install -D typescript
   npx tsc --init
   

   打开生成的tsconfig.json，配置编译输出目录，比如把编译后的JS文件统一放到dist目录：

   {
     "compilerOptions": {
       "outDir": "./dist",
       "target": "ES2020",
       "module": "ESNext"
     }
   }
   

   执行npx tsc命令就会把ts目录下的所有TS文件编译成普通JS文件输出到dist目录。

2. 修改JS文件的导入路径
   不要直接引入.ts源文件，改成引入编译后生成的JS文件，把原来的导入行：

   import { getStatus } from "../ts/Status.ts";
   

   修改为对应编译产物的路径：

   import { getStatus } from "../dist/Status.js";
   

3. 修复现有代码的逻辑错误
   现有代码还有两个会导致功能异常的问题：

   • getStatus里的fetch是异步操作，当前写法会在请求还没返回时就直接return null，拿不到接口结果，改成async写法更合理：

     export async function getStatus(): Promise<number | null> {
       try {
         const response = await fetch('https://authserver.mojang.com/', {
           method: 'GET'
         });
         console.log(response.status);
         return response.status;
       } catch (err) {
         console.error('请求接口失败:', err);
         return null;
       }
     }
     

   • 不存在document.onload这个API，DOM加载监听要么绑在window对象上，要么用DOMContentLoaded事件，同时因为getStatus是异步函数，调用时要加await：

     window.addEventListener('load', async () => {
       const statusCode = await getStatus();
       console.log(statusCode);
       // 后续可以根据状态码判断调用setOnline/setWarning/setOffline
     });
     

如果是本地开发阶段不想手动跑编译，可以用Vite、Webpack这类前端构建工具，开发服务器会自动处理TS文件的编译，不用手动改导入路径，但生产环境部署时依然要先把TS编译为JS再上线，不要直接把TS源文件作为静态资源对外提供。

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