JavaScript adalah bahasa pemrograman yang diketik dengan lemah. Karena itu, ini sangat lunak, dan kesalahan pemrograman cenderung tidak diperhatikan selama pengembangan. TypeScript, pustaka pengecekan tipe JavaScript, memecahkan masalah ini dengan menerapkan tipe pada nilai. Artikel ini akan mengajarkan Anda cara membuat proyek React dengan TypeScript.
Membuat Proyek Bereaksi Dengan TypeScript
Perintah create-react-app memungkinkan Anda untuk membuat proyek TypeScript menggunakan --templat pilihan.
Ke buat proyek Bereaksi baru dengan TypeScript, jalankan perintah berikut:
npx membuat-reaksi-aplikasi-aplikasi-nama--template TypeScript
Perintah ini membuat proyek React dan TypeScript baru dari awal. Anda juga dapat menambahkan TypeScript ke aplikasi React yang sudah ada.
Untuk melakukannya, navigasikan ke proyek yang ingin Anda tambahkan TypeScript dan jalankan kode berikut:
npm install --save TypeScript @tipe/node @tipe/react @tipe/react-dom @tipe/jest
Kemudian tukar ekstensi file .js dengan .tsx untuk file yang ingin Anda konversi ke TypeScript. Setelah Anda melakukan ini, Anda akan mendapatkan "
React mengacu pada UMD global, tetapi file saat ini adalah modul.” kesalahan. Anda dapat menyelesaikannya dengan mengimpor React di setiap file TypeScript seperti ini:impor Reaksi dari "reaksi"
Sebagai solusi yang lebih mudah, buat tsconfig.json dan atur jsx ke react-jsx.
{
"compilerOptions": {
"jsx": "reaksi-jsx",
"target": "es6",
"modul": "selanjutnya",
},
}
Anda dapat menemukan semua pengaturan konfigurasi dari Dokumen TypeScript.
Membuat Komponen Fungsi React di TypeScript
Anda mendefinisikan komponen fungsi React dengan cara yang sama seperti fungsi JavaScript.
Di bawah ini adalah contoh komponen fungsi yang disebut Greetings.
eksporbawaanfungsiSalam pembuka() {
kembali (
<div>Halo Dunia</div>
)
}
Komponen ini mengembalikan string "Hello world", dan TypeScript menyimpulkan tipe pengembaliannya. Namun, Anda dapat membubuhi keterangan jenis pengembaliannya:
eksporbawaanfungsiSalam pembuka(): BEJ.Elemen{
kembali (
<div>Halo Dunia</div>
)
}
TypeScript akan memunculkan kesalahan jika komponen Greetings mengembalikan nilai yang bukan JSX.element.
Menggunakan React Props Dengan TypeScript
React memungkinkan Anda untuk membuat komponen yang dapat digunakan kembali melalui props. Misalnya, komponen Greetings dapat menerima prop nama sedemikian rupa sehingga nilai pengembalian disesuaikan berdasarkan itu.
Di bawah ini adalah komponen yang diedit dengan nama sebagai prop. Perhatikan deklarasi tipe sebaris.
fungsiSalam pembuka({nama}: {nama: string}) {
kembali (
<div>Halo nama}</div>
)
}
Jika Anda memberikan nama "Jane", komponen akan mengembalikan pesan "Halo Jane".
Alih-alih menulis deklarasi tipe dalam fungsi, Anda dapat mendefinisikannya secara eksternal seperti ini:
Tipe Salam Alat Peraga = {
nama: tali;
};
Kemudian berikan tipe yang ditentukan ke komponen sebagai berikut:
fungsiSalam pembuka({name}: Alat Peraga Salam) {
kembali (
<div>Halo nama}</div>
)
}
Gunakan kata kunci antarmuka jika Anda mengekspor jenis ini dan ingin memperluasnya:
ekspor antarmukaSalam Alat Peraga{
nama: tali;
};
Perhatikan perbedaan sintaks antara tipe dan antarmuka — antarmuka tidak memiliki tanda sama dengan.
Anda dapat memperluas antarmuka menggunakan kode berikut:
impor { Alat Peraga Salam } dari './Salam pembuka'
antarmukaSelamat DatangmeluasSalam Alat Peraga{
waktu: "rangkaian"
}
Anda kemudian dapat menggunakan antarmuka yang diperluas di komponen lain.
fungsiSelamat datang({nama, waktu}: WelcomeProps) {
kembali (
<div>
Bagus {waktu}, {nama}!
</div>
)
}
Menggunakan "?" simbol dengan antarmuka alat peraga Anda untuk menentukan alat peraga opsional. Berikut adalah contoh antarmuka dengan prop nama opsional.
antarmukaSalam Alat Peraga{
nama?: tali;
};
Jika Anda tidak melewatkan prop nama, TypeScript tidak akan membuat kesalahan apa pun.
Menggunakan React State Dengan TypeScript
Dalam JavaScript biasa, Anda mendefinisikan kait useState() sebagai berikut:
const [namapelanggan, setNamaPelanggan] = useState("");
Dalam contoh ini, TypeScript dapat dengan mudah menyimpulkan tipe FirstName sebagai string karena nilai defaultnya adalah string.
Namun, terkadang Anda tidak dapat menginisialisasi status ke nilai yang ditentukan. Dalam kasus ini, Anda harus memberikan tipe nilai status.
Berikut adalah beberapa contoh cara mendefinisikan tipe di hook useState().
const [namapelanggan, setNamaPelanggan] = useState<rangkaian>("");
const [usia, setAge] = useState<nomor>(0);
konstan [isSubscribed, setIsSubscribed] = useState<boolean>(Salah);
Anda juga dapat menggunakan antarmuka di kait useState(). Misalnya, Anda dapat menulis ulang contoh di atas untuk menggunakan antarmuka yang ditunjukkan di bawah ini.
antarmukaPelanggan{
nama pelanggan: string ;
usia: jumlah;
Berlangganan: boolean ;
}
Gunakan antarmuka khusus di hook seperti ini:
const [pelanggan, setPelanggan] = useState<Pelanggan>({
Nama Pelanggan: "Jane",
usia: 10,
Berlangganan: Salah
});
Menggunakan Acara Dengan TypeScript
Acara sangat penting karena memungkinkan pengguna berinteraksi dengan halaman web. Di TypeScript, Anda bisa mengetikkan event atau event handler.
Untuk mendemonstrasikan, pertimbangkan komponen Login berikut menggunakan event onClick() dan onChange().
impor { status penggunaan } dari 'reaksi';
eksporbawaanfungsiGabung() {
const [email, setEmail] = useState('');konstan handleChange = (acara) => {
atur email(peristiwa.target.nilai);
};konstan handleClick = (acara) => {
konsol.log('Dikirim!');
};
kembali (
<div>
<jenis masukan ="surel" nilai={email} onChange={handleChange} />
<tombol onClick={() => handleKlik}>Kirim</button>
</div>
);
}
Ini adalah bagaimana Anda akan menangani acara dalam JavaScript biasa. TypeScript, bagaimanapun, mengharapkan Anda untuk menentukan tipe parameter event dalam fungsi event handler. Untungnya, React menyediakan beberapa tipe event.
Misalnya, gunakan tipe changeEvent untuk handleChange() event handler.
impor { ChangeEvent, useState } dari 'reaksi';
const handleChange = (acara: ChangeEvent<HTMLInputElement>) => {
atur email(peristiwa.target.nilai);
};
Tipe changeEvent digunakan untuk mengubah nilai elemen input, pilih, dan area teks. Ini adalah tipe generik yang berarti Anda harus memasukkan elemen DOM yang nilainya berubah. Dalam contoh ini, Anda melewati elemen input.
Contoh di atas menunjukkan cara mengetik acara. Kode di bawah ini menunjukkan bagaimana Anda bisa mengetik event handler sebagai gantinya.
impor { ChangeEventHandler, useState } dari 'reaksi';
const handleChange: ChangeEventHandler<HTMLInputElement> = (peristiwa) => {
atur email(peristiwa.target.nilai);
};
Untuk event handleClick(), gunakan MouseEvent().
impor { useState, MouseEvent } dari 'reaksi';
konstan handleClick = (acara: MouseEvent) => {
konsol.log('Dikirim!');
};
Sekali lagi, Anda dapat melampirkan tipe ke event handler itu sendiri.
impor { useState, MouseEventHandler } dari 'reaksi';
konstan handleClick: MouseEventHandler = (acara) => {
konsol.log('Dikirim!');
};
Untuk jenis acara lainnya, lihat Lembar contekan React TypeScript.
Jika Anda membuat formulir besar, lebih baik untuk gunakan perpustakaan formulir seperti Formik, karena dibuat dengan TypeScript.
Mengapa Anda Harus Menggunakan TypeScript?
Anda dapat menginstruksikan proyek React baru untuk menggunakan TypeScript atau mengonversi yang sudah ada. Anda juga dapat menggunakan TypeScript dengan komponen fungsi React, state, dan event React.
Mengetik komponen React terkadang terasa seperti menulis kode boilerplate yang tidak perlu. Namun, semakin Anda menggunakannya, semakin Anda akan menghargai kemampuannya untuk menangkap kesalahan sebelum Anda menerapkan kode Anda.
