Menghadapi masalah apabila menggunakan templat Create-React-App TypeScript, output ialah fail JS dan bukannya fail TSX

Question

Saya menghadapi masalah semasa cuba mencipta aplikasi React baharu menggunakan templat Create-React-App dan TypeScript. Saya mengikuti arahan pada dokumentasi rasmi (https://create-react-app.dev/docs/adding-typescript/) dan menggunakan arahan berikut:

<kod>npx create-react-app my-app --template typescript
</code>

Berikut ialah hasil arahan:

Memasang pakej perisian. Ini mungkin mengambil masa beberapa minit.

Versi skrip reaksi yang anda gunakan tidak serasi dengan pilihan --template.

Memasang skrip react, react-dom dan react-script...


995 pakej ditambah dalam 32 saat

Terdapat 34 pakej mencari pembiayaan
  Jalankan `npm fund` untuk mengetahui lebih lanjut

kejayaan! mencipta my-app-test di bawah /home/ristirianto/belajar-react/my-app-test
Dalam direktori ini anda boleh menjalankan beberapa arahan:

  npm bermula
    Mulakan pelayan pembangunan.

  npm run build
    Pakej aplikasi sebagai fail statik untuk pengeluaran.

  ujian npm
    Mulakan pelari ujian.

  npm run eject
    Alih keluar alat dan salin kebergantungan binaan, fail konfigurasi dan skrip ke dalam direktori aplikasi. Jika anda melakukan ini, anda tidak akan dapat kembali!

Kami mengesyorkan anda mulakan dengan menaip:

  cd my-app-test
  npm mula

Selamat berprogram!

NOTA: Projek ini di-bootstrap menggunakan versi lama alat yang tidak disokong.
Sila kemas kini kepada Node >=14 dan npm >=6 untuk mendapatkan alatan yang disokong dalam projek baharu. 
Versi Nod Saya: v18.17.1
Versi NPM saya: 9.6.7
Namun, selepas proses pemasangan, apabila saya menyemak fail dalam folder my-app, saya perhatikan bahawa fail tersebut mempunyai sambungan .js bukannya .tsx Ini nampaknya menunjukkan bahawa TypeScript tidak dikonfigurasikan dengan betul. 
Saya tidak pasti sama ada saya terlepas sebarang langkah atau terdapat sesuatu yang tidak kena dengan persediaan. Adakah terdapat sebarang langkah yang perlu saya ambil untuk memastikan TypeScript dikonfigurasikan dengan betul apabila menggunakan pilihan --template typescript 
Sebarang panduan atau nasihat tentang cara menyelesaikan masalah dan menyelesaikan isu ini amat dihargai. Terima kasih terlebih dahulu atas bantuan anda! 
            

Answer 1

Soalan

Fail create-react-app 版本不支持 --template 选项。因此，--template typescript 没有任何效果，您的项目中没有生成 .tsx yang anda gunakan.

Mengapa pula npx create-react-app 不使用支持 --template 的版本，我怀疑您在本地全局安装了旧版本的 create-react-app. Saya syak ini kerana:

1. npx Boleh menjalankan pakej yang dipasang secara tempatan (tidak terhad kepada pakej jauh):

   – npx Dokumentasi

2. npx akan menggesa sama ada hendak memasang pakej jauh, tetapi output anda tidak menunjukkan gesaan ini. Petuanya adalah seperti berikut:

   Need to install the following packages:
     create-react-app@x.y.z
   Ok to proceed? (y)

Anda boleh mengesahkan perkara di atas dengan menyemak pakej yang dipasang secara global:

• npm: npm list -g
• Benang: yarn global list

Penyelesaian

Selepas mengesahkan bahawa anda memasangnya secara global create-react-app anda boleh menyahpasangnya:

• npm: npm uninstall -g create-react-app
• Benang: yarn global remove create-react-app

create-react-app Anda juga disyorkan supaya tidak memasang versi secara global:

– Panduan Bermula: Bermula dengan pantas dan buat apl React