index.html引入TS

在HTML中引入TypeScript (TS) 文件通常涉及到使用Webpack、Angular CLI 或其他前端构建工具，因为HTML本身并不直接支持 TypeScript。如果你想要在单页应用或者项目中使用 TypeScript，你需要按照以下步骤操作：

1. 首先，确保你的开发环境已经安装了Node.js 和npm（Node包管理器），这是大多数现代前端构建工具的基础。

2. 安装typescript：在命令行中运行 `npm install typescript --save-dev` 或者 `yarn add typescript -D` 来全局安装 TypeScript。

3. 创建或配置tsconfig.json文件：这是一个TypeScript项目的配置文件，它告诉编译器如何处理你的代码。例如：

   {
     "compilerOptions": {
       "target": "es5",
       "module": "commonjs",
       "outDir": "./dist", // 输出目录
       "strict": true,
       "esModuleInterop": true
     },
     "include": ["src/**/*"] // 指定要编译的源文件夹
   }

4. 将`.ts`扩展名添加到你的HTML `<script>` 标签中引用TS文件，例如：

   <script type="module" src="index.ts"></script>
   <!-- 或者 -->
   <script nomodule src="index.js"></script> <!-- 如果你需要为浏览器旧版本提供兼容版本 -->

5. 如果你在使用像Webpack这样的构建工具，可以在webpack.config.js中设置TS转换规则。例如：

   module.exports = {
     //...
     module: {
       rules: [
         {
           test: /\.tsx?$/,
           use: 'ts-loader',
           exclude: /node_modules/,
         },
       ],
     },
     //...
   };

6. 编译TypeScript：当你修改了TypeScript文件后，需要通过`tsc`命令或Webpack等工具将 `.ts` 文件编译成 `.js` 文件。