Fragments.

ChatGPT:

以下是前端框架常見的檔案副檔名與對應用途整理表，包含你提到的 React (.tsx)、Vue (.vue)、Angular (.ts)，以及 Svelte、Ember 等等：

前端框架 | 常見副檔名 | 用途說明
-- | -- | --
React | .tsx / .jsx | TypeScript / JavaScript 的 JSX 組件文件。.tsx 支援型別檢查。
Vue.js | .vue | 單檔組件 (Single File Component)，整合 、、<style>。
Angular | .ts, .html, .scss | TypeScript 組件、HTML 模板與樣式分離。主要邏輯為 .ts。
Svelte | .svelte | 單檔組件格式，整合模板、邏輯與樣式，會被編譯成高效 JavaScript。
Ember.js | .hbs / .ts / .js | .hbs 是 Handlebars 模板（View），.ts 或 .js 是組件與路由邏輯。
SolidJS | .tsx / .jsx | 與 React 類似的語法，但使用 fine-grained reactivity。
Qwik | .tsx | 使用部分 hydration 的前端框架，語法與 React 類似。
Lit / Web Components | .ts / .js | 使用原生 Web Component API，模板多以 html 標籤模板字串形式存在。
Stencil.js | .tsx | 建立 Web Components 的編譯式框架，使用 TSX 語法。
Alpine.js | .html | 直接在 HTML 上使用 x-data、x-bind 等屬性，無特殊副檔名。

<hr>
<p>📘 <strong>補充說明：</strong></p>
<ul>
<li>
<p><strong>React / Solid / Qwik / Stencil</strong> → 常見於 <code inline="">.tsx</code> (TypeScript + JSX 語法)。</p>
</li>
<li>
<p><strong>Svelte / Vue</strong> → 採 <strong>單檔組件 (SFC)</strong> 概念。</p>
</li>
<li>
<p><strong>Ember</strong> → 使用 <strong>Handlebars (.hbs)</strong> 作為模板語言。</p>
</li>
<li>
<p><strong>Angular</strong> → 採用 TypeScript，模板與樣式分離設計。</p>
</li>
</ul>
<hr>
<p>若你是要統一處理這些框架的 UI 組件（例如用 TypeScript 的「聯合型別」統一描述），我可以幫你設計一個 <code inline="">UIFrameworkComponent</code> type union，例如：</p>
<pre><code class="language-ts">type UIFrameworkComponent =
| { framework: 'react'; file: `${string}.tsx` }
| { framework: 'vue'; file: `${string}.vue` }
| { framework: 'angular'; file: `${string}.ts` }
| { framework: 'svelte'; file: `${string}.svelte` }
| { framework: 'ember'; file: `${string}.hbs` | `${string}.ts` };
</code></pre>
<p>要我幫你延伸這個 union type，支援自動掃描或解析不同框架的 component metadata 嗎？</p></body></html><!--EndFragment-->
</body>
</html>F