Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Fragments.

オープン
  • 何か問題がありますか？
#5 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
10/100
issue の種類
ドキュメント
明瞭さ
説明が足りない
活発さ
停滞
技術スタック
typescript
領域
documentation

調査の方向性

この issue には貼り付けられた HTML フラグメントと TypeScript 向けの表が含まれていますが、リポジトリ内のファイル、テスト、または要求された変更が指定されていません。まず、この内容がドキュメント用であるかどうか、またどこに配置すべきかを明確にしてください。想定される形式と範囲が定義されるまで、完了を検証することはできません。

索引モデルが issue の本文から書いたものです。

説明

ChatGPT:

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

📘 補充說明：

  • React / Solid / Qwik / Stencil → 常見於 .tsx (TypeScript + JSX 語法)。

  • Svelte / Vue → 採 單檔組件 (SFC) 概念。

  • Ember → 使用 Handlebars (.hbs) 作為模板語言。

  • Angular → 採用 TypeScript，模板與樣式分離設計。

若你是要統一處理這些框架的 UI 組件（例如用 TypeScript 的「聯合型別」統一描述），我可以幫你設計一個 UIFrameworkComponent type union，例如：

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` };

要我幫你延伸這個 union type，支援自動掃描或解析不同框架的 component metadata 嗎？

F
前端框架 常見副檔名 用途說明
React .tsx / .jsx TypeScript / JavaScript 的 JSX 組件文件。.tsx 支援型別檢查。
Vue.js .vue 單檔組件 (Single File Component)，整合 、<script>、<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 等屬性，無特殊副檔名。
主要言語
TypeScript
スター
0
フォーク
0
30日以内にマージされた PR はありません

環境構築

このプロジェクトには開発コンテナ、Dockerfile、コントリビューションガイドがありません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ewdlop/Components のほかの issue

ewdlop/Components の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。