Anda ingin menggunakan TypeScript di React tetapi Anda tidak yakin bagaimana memulainya. Anda telah datang ke tempat yang tepat! (Kami tidak akan berbicara tentang sintaks TS kali ini — hanya bangun dan berjalan.)

Aplikasi Baru dari Awal

Jika Anda sedang membangun aplikasi baru dan menggunakan create-react-app, dokumen Create React App sangat bagus:

Anda dapat memulai aplikasi TypeScript baru menggunakan template. Untuk menggunakan template TypeScript yang kami sediakan, tambahkan --template typescriptke perintah pembuatan.

npx create-react-app my-app --template typescript

Jika Anda berada dalam situasi di mana Anda sudah memulai sebuah proyek dan ingin mengonversi ke TypeScript, jangan khawatir! Ada solusi untuk itu juga.

Mengonversi Aplikasi yang Ada ke TypeScript

Di terminal, navigasikan ke direktori aplikasi Anda, tempat Anda ingin menginstal TypeScript:

npm install --save typescript @types/node @types/react @types/react-
dom @types/jest

Di sinilah Anda mungkin mengalami masalah. Jika Anda membuka App.tsxfile Anda, Anda akan melihat bahwa hampir semuanya digarisbawahi dengan warna merah. Tidak hebat.

Pertama, Anda akan ingin import React from 'react'di bagian atas file jika Anda belum melakukannya.

Jika Anda berada di VSCode dan mengarahkan kursor ke elemen yang digarisbawahi, Anda akan mendapatkan pesan "Tidak dapat menggunakan JSX kecuali jika bendera ' — jsx' disediakan." Pada titik ini, Anda dapat mengklik opsi "Perbaikan Cepat", atau Anda dapat memperbaikinya secara manual. Jika Anda mengklik "Perbaikan Cepat", Anda akan mendapatkan opsi yang mengatakan "Aktifkan tanda ' — jsx' di file konfigurasi Anda." Setelah Anda mengkliknya, dibutuhkan satu atau dua detik untuk memuat, dan kemudian kesalahannya akan hilang.

Jika Anda ingin melakukannya secara manual, masuk ke tsconfig.jsonfile Anda, cari kunci dari "jsx", dan ubah nilainya menjadi "react"bukan react-jsx.

Jika Anda masih mendapatkan kesalahan dalam tsconfig.jsfile Anda, Anda mungkin menggunakan versi TypeScript yang berbeda. Ketik cmd + shift + puntuk membuka pengaturan cepat di VSCode, dan cari "TypeScript: Select TypeScript version...". Klik itu, dan pilih "Gunakan Versi Ruang Kerja."

Semoga sekarang Anda bebas dari kesalahan apa pun, kode Anda sedang dikompilasi, dan Anda siap untuk menjalankan aplikasi yang fantastis!

Saya ingin terhubung! Temukan saya di LinkedIn , GitHub , Twitter .

Sumber Daya Bermanfaat