ReactJS - Penempatan Semua Jenis

Hai sana, bakal pengembang React! Hari ini, kita akan melangsungkan perjalanan menarik ke dunia penempatan jenis statis dalam ReactJS. Sebagai guru sains komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk memandu Anda melalui konsep penting ini, langkah demi langkah. Jangan khawatir jika Anda baru belajar pemrograman - kita akan mulai dari dasar dan naik tingkat!

Apa Itu Penempatan Jenis Statis?

Sebelum kita memasuki hal khusus dalam ReactJS, mari pahami apa itu penempatan jenis statis. Bayangkan Anda sedang membuat kue. Anda tidak akan menggunakan garam sebagai gula, kan? Itu karena Anda tahu jenis bahan yang Anda butuhkan. Penempatan jenis statis mirip - itu membantu kita menggunakan jenis data yang benar dalam kode kita.

Dalam pemrograman, penempatan jenis statis adalah proses yang memverifikasi jenis variabel, parameter fungsi, dan nilai kembalian sebelum kode dieksekusi. Itu seperti memiliki teman yang membantu memeriksa resep Anda sebelum Anda mulai memasak!

Mengapa Menggunakan Penempatan Jenis Statis di React?

Sekarang, Anda mungkin berpikir, "Mengapa kita butuh ini di React?" Mari saya ceritakan kisah pendek. Pada suatu waktu, di negeri yang jauh (ok, itu hanya di pekerjaan saya sebelumnya), kita memiliki proyek React besar. Semua tampak baik sampai kita mulai mendapatkan kesalahan aneh di produksi. ternyata, kita sedang mengirim jenis data yang salah ke beberapa komponen. Jika saja kita menggunakan penempatan jenis statis, kita bisa menangkap masalah ini awal!

Penempatan jenis statis di React membantu kita:

1. Tangkap kesalahan awal dalam pengembangan
2. Tingkatkan kualitas dan keterbacaan kode
3. Sediakan dokumentasi yang lebih baik
4. Perbaiki pengalaman pengembangan dengan autocomplete yang lebih baik

Mengenalkan Flow

Sekarang kita tahu mengapa penempatan jenis statis penting, mari kenalkan teman baru kita: Flow. Flow adalah penempat jenis statis untuk JavaScript, diciptakan oleh Facebook (orang yang memberikan kita React). Itu seperti superhero untuk kode Anda, menangkap masalah jenis sebelum mereka menjadi masalah!

Menyiapkan Flow di Proyek React

Mari kita merabaikan tangan dan menyiapkan Flow di proyek React. Jangan khawatir, saya akan memandu Anda melalui setiap langkah!

1. Pertama, mari buat proyek React baru:

npx create-react-app my-flow-app
cd my-flow-app

2. Sekarang, mari instal Flow:

npm install --save-dev flow-bin

3. Tambahkan skrip Flow ke package.json Anda:

{
"scripts": {
"flow": "flow"
}
}

4. Inisialisasi Flow:

npm run flow init

Ini akan membuat file .flowconfig di root proyek Anda.

5. Tambahkan // @flow di bagian atas file mana pun yang Anda inginkan Flow untuk memeriksa.

Menggunakan Flow di Komponen React

Sekarang kita sudah menyiapkan Flow, mari lihat bagaimana kita bisa menggunakannya di komponen React. Kita akan mulai dengan contoh sederhana:

// @flow
import React from 'react';

type Props = {
name: string,
age: number
};

function Greeting({ name, age }: Props) {
return <h1>Hallo, {name}! Anda berusia {age} tahun.</h1>;
}

export default Greeting;

mariuraikan ini:

• // @flow di bagian atas memberitahu Flow untuk memeriksa file ini.
• Kita mendefinisikan jenis Props dengan name sebagai string dan age sebagai number.
• Dalam parameter fungsi, kita gunakan : Props untuk memberitahu Flow bahwa fungsi ini mengharapkan properti jenis Props.

Sekarang, jika kita mencoba menggunakan komponen ini secara salah, Flow akan memperingatkan kita:

// Ini akan menyebabkan kesalahan Flow
<Greeting name={42} age="dua puluh" />

Flow akan memberitahu kita bahwa kita mencoba mengirimkan number untuk name ( yang seharusnya string) dan string untuk age ( yang seharusnya number).

Flow dengan State React

Flow juga bisa membantu kita dengan state React. Ini contoh:

// @flow
import React, { useState } from 'react';

type State = {
count: number
};

function Counter() {
const [state, setState] = useState<State>({ count: 0 });

const increment = () => {
setState(prevState => ({ count: prevState.count + 1 }));
};

return (
<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}

export default Counter;

Dalam contoh ini:

• Kita mendefinisikan jenis State dengan properti count jenis number.
• Kita gunakan useState<State> untuk memberitahu Flow bahwa state kita harus cocok dengan jenis State.

Flow dengan Props React

Mari lihat contoh yang lebih kompleks dengan props:

// @flow
import React from 'react';

type Props = {
items: Array<string>,
onItemClick: (item: string) => void
};

function ItemList({ items, onItemClick }: Props) {
return (
<ul>
{items.map((item, index) => (
<li key={index} onClick={() => onItemClick(item)}>
{item}
</li>
))}
</ul>
);
}

export default ItemList;

Ini apa yang terjadi:

• Kita mendefinisikan Props dengan items sebagai array string dan onItemClick sebagai fungsi yang menerima string dan mengembalikan nothing (void).
• Flow akan memastikan bahwa saat kita menggunakan komponen ini, kita mengirim jenis props yang benar.

Tabel Metode Flow

Berikut adalah tabel metode Flow umum yang Anda akan gunakan di React:

Metode	Deskripsi	Contoh
type	Mendefinisikan jenis baru	type Props = { name: string };
interface	Mendefinisikan interface baru	interface User { name: string, age: number }
$ReadOnly<T>	Membuat semua properti di T readonly	type Props = $ReadOnly<{ name: string }>;
$Shape<T>	Membuat semua properti di T opsional	type PartialUser = $Shape<User>;
$ElementType<T, K>	Mendapatkan jenis elemen dalam array atau objek	type Name = $ElementType<User, 'name'>;
$Keys<T>	Mendapatkan gabungan jenis semua kunci di T	type UserKeys = $Keys<User>;
$Values<T>	Mendapatkan gabungan jenis semua nilai di T	type UserValues = $Values<User>;

Kesimpulan

Dan itu dia, teman-teman! Kita telah mengambil langkah pertama ke dunia penempatan jenis statis dengan Flow di React. Ingat, seperti belajar keterampilan baru, itu mungkin merasakan seperti tantangan pertama kali. Tetapi dengan latihan, Anda akan menemukan bahwa Flow menjadi alat tak ternilai di dalam set alat pengembangan React Anda.

Penempatan jenis statis mungkin tampak seperti kerja ekstra sekarang, tapi percayalah, Anda masa depan akan berterima kasih kepada Anda saat ini untuk menangkap kesalahan jenis sebelum mereka menjadi kesalahan runtime!

Tetap kode, tetap belajar, dan yang paling penting, bersenang-senang! React dengan Flow adalah seperti memiliki superpower - gunakanlah dengan bijak, dan kode Anda akan lebih kuat, lebih aman, dan mudah dipahami. Sampaijumpa nanti, kodingsenang!

Credits: Image by storyset