🚀 Vite + TypeScript：main.ts を HTML に組み込む方法

✅ ファイル構成例

my-app/
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── src/
│   ├── main.ts ← エントリーポイント
│   └── style.css（任意）

✅ HTML 側での読み込み方法

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>Vite + TypeScript</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

✅ main.ts の例

// src/main.ts

const msg: string = 'こんにちは、Vite + TypeScript！';
document.getElementById('app')!.innerHTML = `<h1>${msg}</h1>`;

✅ Vite の特徴

✅ Vite プロジェクト初期化コマンド

yarn create vite my-app --template vanilla-ts
cd my-app
yarn
yarn dev

✅ まとめ表

項目内容
ビルド必要？ ❌ 必要なし。yarn dev で即反映
HTMLから TypeScript を使うには <script type="module" src="/src/main.ts"> を使用
エントリーポイント src/main.ts
本番ビルド yarn build → dist/ に出力される

開発モード中は TypeScript ファイルをそのまま HTML に読み込めて、トランスパイルやリロードも自動。効率的な開発ができます！