TypeScript semakin populer digunakan bersama **React** karena memberikan keuntungan berupa **static typing** yang membantu dalam menangkap error lebih awal saat pengembangan. Pada materi ini, kita akan mempelajari bagaimana mengintegrasikan TypeScript dengan React dan bagaimana menggunakannya untuk meningkatkan kualitas kode di proyek React.
## **Mengapa Menggunakan TypeScript dengan React?**
TypeScript membantu kita dalam membangun aplikasi React dengan beberapa manfaat, antara lain:
- **Pemeriksaan tipe secara statis**: Membantu mendeteksi error tipe selama penulisan kode, bukan pada saat runtime.
- **Opsi autocompletion dan dokumentasi lebih baik**: Membuat kode lebih mudah dimengerti dan dikelola dengan lebih baik, terutama pada tim besar.
- **Pemeliharaan yang lebih mudah**: Menambahkan tipe data membuat kode lebih aman dan lebih mudah di-maintain karena struktur lebih jelas.
## **Langkah-Langkah Menggunakan TypeScript dalam React**
### 1. **Membuat Proyek React dengan TypeScript**
React menyediakan template TypeScript secara default, sehingga mudah untuk memulai proyek baru.
#### Membuat Proyek React Baru dengan TypeScript:
```bash
npx create-react-app my-app --template typescript
Setelah proses instalasi selesai, Anda akan memiliki proyek React yang sudah dikonfigurasi untuk menggunakan TypeScript.
### 2. **Mengkonversi Proyek React yang Ada ke TypeScript**
Jika Anda memiliki proyek React berbasis JavaScript dan ingin mengonversinya ke TypeScript, berikut adalah langkah-langkahnya:
- Install dependensi TypeScript dan tipe untuk React:
```bash
npm install --save typescript @types/node @types/react @types/react-dom
```
- Ubah ekstensi file dari `.js` menjadi `.tsx` untuk file yang berisi JSX (React Components) dan `.ts` untuk file lainnya.
- Tambahkan file `tsconfig.json` di root proyek jika belum ada. File ini akan membantu konfigurasi bagaimana TypeScript dikompilasi dalam proyek React.
## **Menulis Komponen React dengan TypeScript**
### **1. Functional Components**
Komponen fungsional di React dengan TypeScript sangat mirip dengan JavaScript. Perbedaan utamanya adalah Anda dapat menambahkan **type annotations** untuk properti yang diterima komponen (props).
#### **Contoh Functional Component:**
```tsx
import React from "react";
interface GreetingProps {
name: string;
age: number;
}
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
return <h1>Hello, {name}. You are {age} years old.</h1>;
};
export default Greeting;
Pada contoh ini:
- **`GreetingProps`** adalah interface yang mendefinisikan tipe dari properti yang diterima oleh komponen `Greeting`.
- `React.FC<GreetingProps>` menunjukkan bahwa `Greeting` adalah komponen fungsional yang menerima props dengan tipe `GreetingProps`.
#### Penjelasan:
- **`name`**: Harus berupa string.
- **`age`**: Harus berupa number.
Jika kita mencoba menggunakan `Greeting` dengan props yang tidak sesuai, TypeScript akan memberikan error pada saat penulisan kode.
```tsx
<Greeting name="Budi" age={25} /> // Benar
<Greeting name="Budi" age="dua puluh"/> // Error: Type 'string' is not assignable to type 'number'
### **2. Class Components**
TypeScript juga mendukung komponen berbasis class, meskipun komponen fungsional lebih banyak digunakan pada React modern.
#### **Contoh Class Component:**
```tsx
import React, { Component } from "react";
interface CounterProps {
startCount: number;
}
interface CounterState {
count: number;
}
class Counter extends Component<CounterProps, CounterState> {
constructor(props: CounterProps) {
super(props);
this.state = {
count: props.startCount,
};
}
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>Current Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
export default Counter;
Pada contoh ini:
- **`CounterProps`** mendefinisikan tipe properti `startCount` yang harus berupa angka.
- **`CounterState`** mendefinisikan struktur state dengan properti `count` bertipe angka.
- Properti dan state memiliki tipe yang jelas, membantu menghindari kesalahan runtime.
## **Handling Events dalam TypeScript**
Dalam React, kita sering berinteraksi dengan event, seperti `onClick`, `onChange`, dan lain-lain. Dengan TypeScript, kita dapat menambahkan tipe yang sesuai untuk event handler.
#### **Contoh Event Handler dengan TypeScript:**
```tsx
import React, { useState } from "react";
const ClickButton: React.FC = () => {
const [count, setCount] = useState<number>(0);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setCount(count + 1);
};
return (
<div>
<p>You've clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
};
export default ClickButton;
Pada contoh di atas, `handleClick` memiliki tipe `React.MouseEvent<HTMLButtonElement>`, yang berarti fungsi ini akan menerima event klik dari elemen `button`. Tipe yang tepat membantu memberikan autocompletion untuk properti event.
## **Hooks dengan TypeScript**
### **1. `useState` Hook**
Hook `useState` sangat berguna untuk mengelola state dalam komponen fungsional. Dengan TypeScript, kita bisa menentukan tipe data yang akan disimpan dalam state.
#### **Contoh `useState` dengan TypeScript:**
```tsx
import React, { useState } from "react";
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
export default Counter;
Pada contoh ini:
- `useState<number>(0)` memberitahu TypeScript bahwa `count` harus berupa angka.
### **2. `useEffect` Hook**
`useEffect` digunakan untuk mengelola side effects dalam komponen. TypeScript bisa digunakan untuk menentukan tipe data yang digunakan dalam fungsi `useEffect`.
#### **Contoh `useEffect` dengan TypeScript:**
```tsx
import React, { useEffect, useState } from "react";
const DataFetcher: React.FC = () => {
const [data, setData] = useState<string[]>([]);
useEffect(() => {
fetch("/api/data")
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return (
<ul>
{data.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
};
export default DataFetcher;
Pada contoh ini:
- `useState<string[]>([])` memberitahu TypeScript bahwa `data` adalah array dari string.
- Kode ini akan memberikan peringatan jika data yang difetch bukan array string.
## **Menggunakan Props dengan Tipe Opsional**
Kadang-kadang kita ingin beberapa props bersifat opsional. TypeScript mendukung props opsional dengan menambahkan tanda `?` di definisi props.
#### **Contoh Props Opsional:**
```tsx
interface WelcomeProps {
name: string;
greeting?: string; // Properti opsional
}
const Welcome: React.FC<WelcomeProps> = ({ name, greeting }) => {
return <h1>{greeting ? greeting : "Hello"}, {name}!</h1>;
};
export default Welcome;
```
Pada contoh di atas, `greeting` bersifat opsional. Jika tidak diberikan, komponen akan menggunakan nilai default `"Hello"`.
## **TypeScript di Context API**
TypeScript bekerja dengan baik dengan **Context API** untuk manajemen state global dalam aplikasi React.
#### **Contoh Context API dengan TypeScript:**
```tsx
import React, { createContext, useContext, useState } from "react";
interface AuthContextProps {
user: string | null;
login: (username: string) => void;
}
const AuthContext = createContext<AuthContextProps | undefined>(undefined);
const AuthProvider: React.FC = ({ children }) => {
const [user, setUser] = useState<string | null>(null);
const login = (username: string) => {
setUser(username);
};
return (
<AuthContext.Provider value={{ user, login }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be used within an AuthProvider");
}
return context;
};
export default AuthProvider;
Pada contoh ini:
- **`AuthContextProps`** mendefinisikan tipe untuk context.
- Tipe context memberikan autocomplete dan validasi tipe untuk komponen yang mengkonsumsi context.
## **Kesimpulan**
Menggunakan TypeScript dengan React menawarkan banyak keuntungan seperti valid
asi tipe yang lebih baik, autocomplete, dan mengurangi kesalahan pada runtime. Dengan menerapkan TypeScript pada proyek React, kita bisa menulis kode yang lebih aman, terstruktur, dan mudah dipelihara.
Beberapa poin penting yang telah dibahas:
- Pembuatan proyek React dengan TypeScript.
- Menulis komponen fungsional dan berbasis class dengan tipe props.
- Menggunakan hooks seperti `useState` dan `useEffect` dengan TypeScript.
- Handling events dan props opsional.
- Penggunaan TypeScript di Context API.