之前使用過的版本是舊版的，當時並沒有 tsconfig.app.json 和 tsconfig.node.json 這兩個配置檔案。後來我在 Stack Overflow 上面看到這篇文章，並結合其他資料進行查詢，得出了以下結論。

讓我們用最簡單的方式來區分這兩個檔案的用途：

1. tsconfig.app.json：這個檔案主要負責前端的開發配置。正如我們之前提到的，瀏覽器無法直接讀懂 TypeScript，因此需要將它編譯成 JavaScript，而這個檔案就是用來配置 TypeScript 如何將前端代碼編譯成 JavaScript 的。
2. tsconfig.node.json：這個檔案主要是針對 Node.js 環境的配置。Vite 是基於 Node.js 的構建工具，開發伺服器和打包功能都在 Node.js 環境中運行，因此這個檔案用來配置在 Node.js 環境中運行的 TypeScript 設置。

為什麼要分為兩個配置檔呢？

根據上面的說明，聰明的你應該已經猜到了。前端應用程式與 Vite 的運行環境不同，前端代碼運行在瀏覽器中，而 Vite 本身則運行在 Node.js 環境中。將配置檔分開不僅能提高靈活性和可維護性，還能讓每個環境的 TypeScript 設置針對其特定需求進行優化，特別是在大型項目中，這樣的劃分可以減少混淆。

配置檔內容

下面我們來解釋一些配置檔中的關鍵設置：

tsconfig.app.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

1. target: ES2020
   將編譯目標設為 ES2020，這意味著編譯後的 JavaScript 可以使用 ES2020 的語法特性。這確保在現代瀏覽器中，代碼可以被正常解讀和執行。
2. lib: ["ES2020", "DOM", "DOM.Iterable"]
   定義了編譯時所依賴的標準庫，包括 ES2020 的標準庫、DOM 和 DOM.Iterable。這些是前端應用程式在瀏覽器中運行所需的核心 API。
3. module: ESNext
   使用最新的 ECMAScript 模組標準，這對於現代瀏覽器和打包工具（如 Vite、Webpack）來說是最佳選擇。
4. jsx: react-jsx
   設置為 react-jsx，這意味著 TypeScript 將使用 React 17+ 的 JSX 轉換機制，不再需要顯式導入 React。它自動處理 JSX 語法並轉換為 React 元素。
5. moduleResolution: bundler,
   使用打包工具模式來解析模組，適用於 Vite、Webpack 等工具。
6. include: ["src"]
   告訴 TypeScript 只編譯 src 資料夾下的文件，這通常是前端應用程式的主要代碼目錄。

tsconfig.node.json

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["ES2023"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
}

1. target: ES2022
   編譯目標設為 ES2022，這意味著支持更現代的 ECMAScript 語法特性，比如 top-level await。
2. lib: ["ES2023"]
   使用 ES2023 標準庫，這允許 Node.js 使用最新的 JavaScript 特性，無需考慮瀏覽器的兼容性。
3. module: ESNext
   使用 ECMAScript 模組標準，適用於 Node.js 環境。
4. include: ["vite.config.ts"]
   告訴 TypeScript 這個配置檔只處理 vite.config.ts，這類文件屬於 Node.js 執行環境。

在剛開始接觸時，這些配置檔案看起來可能會讓人覺得很複雜，牽涉到許多技術層面，但不用太擔心。Vite 為我們提供的預設配置已經非常完善，大部分情況下你可以直接使用這些預設值進行開發，只有在遇到特殊需求時才需要進行自訂修改。

【 補充 】react-jsx

在舊版本的 React 中，每個 JSX 文件都需要顯式地 import React from 'react' 來處理 JSX。React 17 引入了新功能，現在不再需要手動導入 React。react-jsx 設定會自動處理 JSX 語法的轉換過程，無需顯式導入 React 元素，也可以正常工作。