Dalam React, konsep Props dan State adalah dua hal fundamental yang digunakan untuk mengelola data dalam komponen. Dengan TypeScript, kita bisa memberikan tipe yang lebih jelas pada props dan state, sehingga membantu dalam mencegah bug dan meningkatkan keterbacaan kode.
Apa Itu Props dan State?
Props (Properties)
Props digunakan untuk mengirimkan data dari komponen induk (parent) ke komponen anak (child). Props bersifat immutable, yang berarti nilainya tidak bisa diubah oleh komponen yang menerimanya.
State
State adalah data yang dikelola dalam suatu komponen dan dapat berubah seiring waktu. Perubahan state akan menyebabkan komponen melakukan re-render.
Menggunakan Props dengan TypeScript
Untuk menggunakan props dalam TypeScript, kita perlu mendefinisikan tipe data props menggunakan type atau interface.
Contoh Props dalam Functional Component
type UserProps = {
name: string;
age: number;
};
const UserCard: React.FC<UserProps> = ({ name, age }) => {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
};
export default UserCard;
Di sini, UserProps mendefinisikan tipe data untuk props yang diterima oleh komponen UserCard. Jika ada props yang tidak sesuai dengan tipe yang telah didefinisikan, TypeScript akan memberikan error.
Menggunakan State dengan TypeScript
React menyediakan useState untuk mengelola state dalam functional component. Saat menggunakan TypeScript, kita bisa menentukan tipe data state agar lebih jelas.
Contoh Menggunakan useState
import { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Tambah</button>
</div>
);
};
export default Counter;
Di contoh di atas, kita mendefinisikan state count sebagai tipe number, sehingga jika ada kesalahan penggunaan tipe, TypeScript akan memberikan peringatan.
Props dengan Nilai Opsional
Terkadang, sebuah props tidak selalu wajib dikirimkan oleh parent component. Kita bisa menandai props sebagai opsional dengan menambahkan tanda ?.
type UserProps = {
name: string;
age?: number; // Bersifat opsional
};
const UserCard: React.FC<UserProps> = ({ name, age }) => {
return (
<div>
<h2>{name}</h2>
<p>Age: {age ?? 'Unknown'}</p>
</div>
);
};
export default UserCard;
Di sini, age bersifat opsional. Jika tidak diberikan, nilai default akan menjadi 'Unknown' menggunakan operator ??.
Props dengan Default Value
Jika kita ingin menetapkan nilai default untuk props, kita bisa melakukannya dengan cara berikut:
const UserCard: React.FC<UserProps> = ({ name, age = 18 }) => {
return (
<div>
<h2>{name}</h2>
<p>Age: {age}</p>
</div>
);
};
Di sini, jika age tidak diberikan, maka nilai defaultnya adalah 18.
State yang Lebih Kompleks dengan TypeScript
Jika state menyimpan objek yang lebih kompleks, kita bisa mendefinisikan tipe untuk objek tersebut.
type User = {
name: string;
age: number;
};
const UserProfile: React.FC = () => {
const [user, setUser] = useState<User>({ name: 'John Doe', age: 25 });
return (
<div>
<h2>{user.name}</h2>
<p>Age: {user.age}</p>
</div>
);
};
export default UserProfile;
Di sini, state user memiliki tipe data User, yang berarti setiap perubahan state harus sesuai dengan struktur tersebut.
Kesimpulan
Menggunakan TypeScript dalam React memberikan keuntungan dalam validasi tipe, pencegahan bug lebih awal, dan peningkatan kualitas kode. Dengan memahami bagaimana menggunakan Props dan State dalam TypeScript, pengembang dapat menulis kode yang lebih aman dan mudah dipelihara.
Dengan mengikuti praktik terbaik dalam mendefinisikan props dan state, pengembang React dapat mengembangkan aplikasi dengan struktur yang lebih baik dan lebih mudah dikelola dalam skala besar.
0 Comments