Saat ini, React adalah perpustakaan viral dan salah satu front-end terhebat; itu telah menjadi perpustakaan utama bagi banyak pengembang saat mengembangkan aplikasi front-end.
Membangun Aplikasi React dengan TypeScript
TypeScript, di sisi lain, adalah bahasa pemrograman yang diketik secara statis yang membuat kode JavaScript kita lebih mudah diprediksi. Salah satu alasan utama diciptakannya TypeScript adalah untuk membantu pengembang tidak hanya menciptakan sesuatu, namun juga merancang produk yang selalu dapat kita prediksi perilakunya.
Pengenalan untuk membuat aplikasi reaksi dengan skrip ketikan
Aplikasi React kita akan lebih mudah diprediksi jika kita menggunakan TypeScript untuk membangunnya karena kita akan dapat menemukan banyak kesalahan saat runtime (selama kompilasi).
Saya akan membawa Anda dalam perjalanan ini bersama saya hari ini. Saya akan melakukan yang terbaik untuk menjaga konsepnya tetap sederhana untuk Anda. Anda tidak perlu membuat kode dengan saya. Tetapi jika Anda berhasil, itu akan luar biasa!
Dalam tutorial ini, saya akan memandu Anda melalui langkah-langkah membuat aplikasi reaksi sederhana dan menambahkan skrip ketikan ke proyek reaksi yang ada.
Posting ini tidak dimaksudkan sebagai panduan pemula untuk React atau TypeScript; sebaliknya, ini akan menunjukkan kepada kita cara menggunakan TypeScript di aplikasi React.
Kompiler TypeScript
Dimulai dengan file App.tsx, mari kita lihat lebih dalam komponen dan pengujiannya. Ekstensi file mungkin adalah hal pertama yang Anda perhatikan. Semua file komponen sekarang menjadi tsx, bukan jsx, dan setupTests.js telah diubah namanya menjadi setupTests.ts. Tapi kenapa begitu?
Browser dan Node saat ini tidak menerima TypeScript secara langsung; mereka hanya memahami JavaScript, jadi kita harus mengubah skrip TypeScript kita menjadi skrip JavaScript. Ini adalah tugas yang ditangani oleh kompiler TypeScript.
Ekstensi file yang berbeda, seperti yang disebutkan di atas, digunakan karena kompiler harus mengetahui file mana yang akan dikompilasi vs file yang merupakan JavaScript murni.
Menambahkan TypeScript
Catatan: fitur ini tersedia dengan
react-scripts@2.1.0dan lebih tinggi.
- Instalasi – Untuk memulai proyek Buat Aplikasi React baru dengan TypeScript, Anda dapat menjalankan perintah di bawah ini.
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescriptJika sebelumnya Anda sudah menginstal create-react-app secara global melalui npm install -g create-react-app, kami menyarankan Anda menghapus instalasi paket menggunakan npm uninstall -g create-react-app or yarn global remove create-react-app untuk memastikan bahwa npx selalu menggunakan versi terbaru.
Pemasangan global create-react-app tidak lagi didukung.
2. Tambahkan TypeScript ke Proyek React yang Ada
Konversi TypeScript dari Aplikasi yang Ada. Navigasikan ke direktori aplikasi Anda di konsol, tempat Anda ingin menginstal TypeScript:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
# or
yarn add typescript @types/node @types/react @types/react-dom @types/jestGanti nama file apa pun menjadi file TypeScript (mis src/index.js untuk src/index.tsx) dan jangan lupa restart servernya!
npm install --save typescript @types/node @types/react @types/react-
dom @types/jestSetelah itu, ganti nama file apa pun yang Anda inginkan menjadi file TypeScript menjadi endin.tsx. Alih-alih App.js, Anda mungkin menggunakan App.tsx.
Di sinilah Anda mungkin mengalami masalah. Anda akan melihat bahwa hampir semua yang ada di file App.tsx Anda ditandai dengan warna merah. Ini tidak ideal.
Jika Anda belum melakukannya, impor bagian React from react' di awal file.
Saat Anda mengarahkan kursor ke elemen yang digarisbawahi di VSCode, pesan “Tidak dapat menggunakan JSX kecuali tanda '— jsx' diberikan” muncul. Anda dapat memilih opsi “Koreksi Cepat” atau memperbaikinya secara manual pada saat ini. Saat Anda memilih “Perbaikan Cepat”, Anda akan diberikan opsi untuk “Aktifkan tanda '— jsx' di file konfigurasi Anda.” Diperlukan satu atau dua detik untuk memuatnya, dan kemudian kesalahannya akan hilang.
Membuat Naskah Aplikasi React Native (Versi Terbaru)
Anda tidak perlu membuat file tsconfig.json; satu akan diciptakan untukmu. Anda dapat melakukan perubahan pada konfigurasi TypeScript yang telah dibuat.
Buku Pegangan TypeScript
- Buku Pegangan TypeScript
- Contoh TypeScript di React
- React + Lembar Cheat TypeScript memiliki gambaran umum yang bagus tentang cara menggunakan React dengan TypeScript
Panduan Lengkap Membuat Naskah Aplikasi Create React Native Dari Awal
Ada dua keuntungan bekerja dalam kerangka apa pun. Ini meningkatkan keterampilan Anda sebagai pengembang dan pemahaman Anda tentang pekerjaan yang Anda lakukan.
Hal ini juga memungkinkan Anda untuk mengapresiasi hal-hal yang dilakukan framework ini di balik layar yang sering kita abaikan.
Saya ingin mendalami React untuk melihat cara kerja aplikasi di balik layar dengan mereproduksinya secara lokal.
TypeScript adalah bahasa pemrograman yang ketat dan diketik secara statis yang meningkatkan prediktabilitas kode JavaScript kami. Salah satu alasan utama diciptakannya TypeScript adalah untuk membantu pengembang tidak hanya menciptakan sesuatu, namun juga merancang produk yang selalu dapat kita prediksi perilakunya.
Anda dapat menggunakan templat untuk memulai aplikasi TypeScript baru. Tambahkan —template TypeScript ke perintah pembuatan untuk menggunakan template TypeScript kami.
npx create-react-app my-app --template typescriptIni dikompilasi dengan indah tanpa pengaturan khusus untuk diaktifkan atau paket untuk diunduh. Semua file yang seharusnya .js file sekarang .ts or .tsx.
Jangan khawatir jika Anda sudah mulai mengerjakan sebuah proyek dan ingin beralih ke TypeScript. Ada juga solusi untuk itu.
Benang membuat skrip aplikasi reaksi
Jika sebelumnya Anda sudah menginstal create-react-app secara global melalui npm install -g create-react-app, kami menyarankan Anda menghapus instalasi paket menggunakan npm uninstall -g create-react-app or yarn global remove create-react-app untuk memastikan bahwa npx selalu menggunakan versi terbaru.
1. yarn create react app typescript
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
2. how to install react with typescript
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
3. npx react typescript
npx create-react-app my-app --template typescript
4. create-react-app typescript
npx create-react-app my-app --template typescript
# or #
yarn create react-app my-app --template typescriptCopy
5. create react app ts
To create typescript version
npx create-react-app my-app --template typescript
# or
yarn create react-app my-app --template typescript
Inisialisasi Proyek Dengan Benang
Kemudian jalankan perintah berikut untuk membuat proyek npm (disarankan benang).
yarn init
or
npm initInilah Hasil Benang yang Tampak
Cara Mendeklarasikan Tipe pada Aplikasi React
Mari kita buat tipe untuk kita Semua objek, di dalam App.tsx file tempatkan objek ini setelah impor.
type ITodo = {
// Our todo should have the title and completed fields and the id field to
id: number;
title: string;
completed: boolean;
}
type ITodos = {
todos: ITodo[], // Our Todos is an array of Todo
}Jenis acara dalam reaksi
Tantangannya sekarang adalah: bagaimana kita bisa mengetahui tipe apa yang diteruskan ke acara tersebut?
Ya, React mempunyai banyak event, dan kita tidak mungkin mengetahui tipe apa yang dimiliki masing-masing event, jadi saya biasanya menempatkan objek event di handler di mana ia digunakan, arahkan kursor ke atasnya, dan salin tipenya.
<button onClick={e => {console.log(e) }}>Add</button>
(parameter) e: React.MouseEvent<HTMLButtonElement, MouseEvent>Mendeklarasikan tipe prop menggunakan 'React.FC'
const TodosComponent: React.FC<{
todos: ITodos,
toggleTodos: (id: number) => void,
deleteTodos: (id: number) => void
}> = ({todos, toggleTodos, deleteTodos}) => {
const deleteTodo = (id: number) => {
if (window.confirm(`Are you sure you want to delete todo?`)) {
deleteTodos(id);
}
}
return (
<div className="section__todos">
<h2>Todos</h2>
{todos.todos.length ? <ul className="todos">
{todos.todos.map(todo => (
<li key={todo.id}>
<span style={{textDecoration: todo.completed? 'line-through': 'none'}}>{todo.title}</span>
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodos(todo.id)} />
<button onClick={() => {deleteTodo(todo.id)}}>X</button>
</li>
))}
</ul>: <div>No Todo has been created</div>}
</div>
);
};Mengetik variabel di TypeScript
Mari kita lihat contoh berikut:
let helloWorld = "Hello World";
Karena nilai dalam variabel helloWorld adalah string, maka sekarang bertipe string, dan Anda dapat memanipulasinya seperti biasa dengan string. Namun, jika jenis variabelnya berubah di kemudian hari, jenis variabelnya juga akan berubah.
Beginilah cara kerja TypeScript: ia menetapkan tipe variabel berdasarkan nilainya pada saat deklarasi, oleh karena itu baris kode yang sama akan berfungsi dalam kedua bahasa. Perbedaannya didasarkan pada apa yang terjadi ketika Anda ingin memberikan nilai baru ke variabel dengan tipe berbeda.
Kita sudah melihat cara melakukannya dengan JavaScript, tapi bagaimana jika kita mencoba hal yang sama dengan TypeScript?
Dokumentasi
Berikut adalah beberapa tempat terbaik untuk menemukan informasi terkini tentang React dan TypeScript:
Buat eslint skrip aplikasi reaksi pada tahun 2022
Prasyarat untuk membuat eslint skrip aplikasi reaksi
Catatan: Anda perlu menginstal Node versi >= 10. Jadi, jika Anda belum memilikinya, silakan kunjungi website NodeJS, unduh dan instal di mesin lokal Anda. (https://nodejs.org/en/)
Langkah 1: Buat Proyek React dengan TypeScript
npx create-react-app my-app --template typescript
Langkah 2: Hapus konfigurasi ESLint yang telah ditentukan sebelumnya
“eslintConfig”: {
“meluas”:[
"aplikasi reaksi",
“aplikasi reaksi/bercanda”
]
}
Langkah 3: Instal paket ESLint
npm install eslint --save-dev
Cara Membeli Properti di Metaverse | Berapa Biaya Tanah Metaverse