Implementasi TypeScript pada React JS
Published: 2023-12-02 06:28:27

Sebelumnya kita sudah memahami apa itu TypeScript. Jika belum, bisa kunjungi: [Apa itu TypeScript?](https://dev.to/driannaird/apa-itu-typescript-50k4)

Kali ini kita akan belajar implementasi TypeScript pada project React JS kita, fyi React JS adalah sebuah library JavaScript yang digunakan untuk mempermudah proses Development front end.

**1. React Element dan Props**
```ts
import { ReactElement } from "react";

type HeadingProps = {
  title: string;
};

const Heading = ({ title }: HeadingProps): ReactElement => {
  return <h1>{title}</h1>;
};

export default Heading;
```

Pada contoh di atas kita mendefinisikan types pada props title dengan membuat sebuah type HeadingProps yang berisi title: string.

Ketika Komponen Heading di panggil di komponen lain kita akan di beritahu tipe data props dari title dan akan ada error jika memberikan title dengan tipe data lain. Sebagai contoh

```ts
import Heading from "./components/Heading"

const Main = () => {
   return (
     <>
       <Heading title={2023} />
     </>
   )
}

export default Main;
```
Maka program di atas akan mendapat warning bahwa title hanya menerima tipe data string.

Lalu kita mempunyai ReactElement pada program:
```ts
import { ReactElement } from "react";

const Heading = ({ title }: HeadingProps): ReactElement => {
  return <h1>{title}</h1>;
};
```
Dimana (): ReactElement berfungsi untuk menentukan return dari fungsi heading menjadi Elemen HTML React.

**2. React.FC**
Kita juga bisa menggunakan cara seperti di bawah:

```ts
import React from "react"

export const Section: React.FC<{ title: string }> = ({ children, title }) => {
  return (
     <section>
        <h2>{title}</h2>
	<p>{children}</p>
     </section>
  );
}
```
React.FC<{ title: string }>: Ini menunjukkan bahwa Section adalah functional component (FC) dan menerima properti dengan tipe objek yang memiliki properti title yang bertipe string.

**3. Rekomendari penulisan code dan penggunaan default value**

```ts
import React from "react"

type SectionProps = {
   title?: string;
   children: ReactNode;
}

export const Section = ({ children, title: "My Subheading" }: SectionProps ) => {
   return (
      <section>
         <h2>{title}</h2>
	 <p>{children}</p>
      </section>
   );
}
```
Kita bisa membuat sebuah type sebagai contoh SectionProps di mana kita menentukan bahwa title menjadi opsional karena ada tanda ? disana dan memiliki tipe data string, lalu children kita tentukan type nya dengan ReactNode.

Pada title memiliki sebuah default value title: "My Subheading", karena disini saya mengatur title sebagai opsional, jadi ketika komponen pemanggil tidak menyertakan title secara otomatis default value bekerja.

**4. Implementasi component di atas**

```ts
import Heading from "./components/Heading";
import { Section } from "./components/Section";

function App() {
  return (
    <>
      <Heading title={"Hello World!"} />
      <Section>This is my first Section</Section>
      <Section title="Second sub heading">This is my second Section</Section>
    </>
  );
}

export default App;
```

**5. Menggunakan useState di typescript**
Penggunaan types pada useState cukup simpel kita hanya perlu menambahkan <tipe data> di antara useState dan ()

contoh: 

```ts
// Normalnya
const [count, setCount] = useState(0)

// Mendefinisikan type secara langsung
const [count, setCount] = useState<number>(0)

// Union type boleh number boleh null
const [count, setCount] = useState<number | null>(null)
```

Sekian Tutorial typescript react saya, terimakasih