reactjs - Aký je rozdiel medzi príponami .ts a .tsx. Obe sa používajú ako prípony pre súbory TypeScript v Reacte. Tak kde by sme ich mali používať?

Som nový v Reacte a pracujem na projekte. Narazil som na oba typy prípon .ts a .tsx. Nerozumiem, kde by som mal používať .ts a .tsx. Každá pomoc je veľmi vítaná. Ďakujem!

Odpoveď č. 1

Použite .ts pre čisté TypeScript súbory.

Použite .tsx pre súbory, ktoré obsahujú JSX.

Napríklad, komponent React by bol .tsx, ale súbor obsahujúci pomocné funkcie by bol .ts.

Odpoveď č. 2

Prípona .tsx sa používa, keď chceme vložiť JSX prvky do súborov, zatiaľ čo .ts sa používa pre obyčajné Typescript súbory a nepodporuje pridávanie JSX prvkov.

Odpoveď č. 3

Všetky uvedené odpovede sú správne.

Súbory .ts obsahujú iba čistý TypeScript

.tsx obsahuje aj JSX.

Z iného uhla pohľadu môžete skopírovať všetko zo súboru .ts a vložiť do súboru .tsx a nemusíte nič meniť. Ale ak kopírujete zo súboru .tsx, musíte ho refaktorovať odstránením prvkov JSX.

Odpoveď č. 4

Súbor .ts je čistý TypeScript, zatiaľ čo .tsx je rozšírený syntaktický formát TypeScriptu, ktorý kombinuje TypeScript a HTML v rovnakom súbore. Napríklad:

const element = <h1>Hello, world!</h1>;

To je prospešné, pretože môžeme začať priamo v kóde definovať výstup a uľahčuje to začlenenie dát, čím sa HTML stáva podobné šablónam:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>; // Outputs <h1>Hello, Josh Perez</h1>

https://react.dev/learn#writing-markup-with-jsx https://legacy.reactjs.org/docs/introducing-jsx.html