Implementasi TypeScript pada React JS

Sebelumnya kita sudah memahami apa itu TypeScript. Jika belum, bisa kunjungi: Apa itu TypeScript?

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

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

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:

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:

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

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

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 di antara useState dan ()

contoh:

// 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)