reactjs - Mikä on ero .ts- ja .tsx-päätteiden välillä. Molempia käytetään TypeScript-tiedostojen päätteinä Reactissa. Joten missä pitäisi käyttää niitä?

Olen uusi Reactin käyttäjä ja työstän projektia. Olen törmännyt sekä .ts- että .tsx-tiedostopäätteisiin. En ymmärrä, missä pitäisi käyttää .ts- ja .tsx-päätteitä. Kaikki apu olisi erittäin arvostettua. Kiitos!

Vastaus #1

Käytä .ts-tiedostoja puhtaalle TypeScriptille.

Käytä .tsx-tiedostoja tiedostoille, jotka sisältävät JSX:ää.

Esimerkiksi React-komponentti olisi .tsx, mutta tiedosto, joka sisältää apufunktioita, olisi .ts.

Vastaus #2

.tsx-laajennusta käytetään, kun haluamme upottaa JSX-elementtejä tiedostoihin, kun taas .ts-laajennusta käytetään tavallisille Typescript-tiedostoille, eikä se tue JSX-elementtien lisäämistä.

Vastaus #3

Kaikki yllä olevat vastaukset ovat oikein.

.ts-tiedostot sisältävät vain puhdasta TypeScriptiä

.tsx-tiedostot sisältävät myös JSX:iä.

Toisaalta voit kopioida kaiken .ts-tiedostosta ja liittää sen .tsx-tiedostoon, eikä sinun tarvitse muuttaa mitään. Mutta jos kopioit .tsx-tiedostosta, sinun täytyy refaktoroida se poistamalla JSX-elementit.

Vastaus #4

.ts-tiedosto on puhdasta TypeScriptiä, kun taas .tsx on TypeScriptin laajennettu syntaksimuoto, joka yhdistää sekä TypeScriptin että HTML:n samaan tiedostoon. Esimerkiksi:

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

Tämä on hyödyllistä, koska voimme alkaa määritellä tulosteen suoraan koodin sisällä ja se tekee datan yhdistämisestä helpompaa, jolloin HTML muistuttaa malleja:

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