Belajar TypeScript - JSX/TSX dan Pekerja Frontend Modern

#Pendahuluan

Di frontend modern, TypeScript dan React adalah pasangan yang nyaris tak terpisahkan. File berakhiran .tsx menggabungkan sintaks JSX dengan pengetikan penuh. Hasilnya: props yang salah langsung ditolak compiler sebelum aplikasi dijalankan.

Tanpa tipe, props hanya objek longgar dan event handler menerima apa saja. Dengan tipe, setiap komponen menjadi kontrak yang jelas: siapa memakai komponen, tipe apa yang harus dikirim, dan apa yang boleh dilakukan user lewat handler.

Episode 15 membahas pengaturan JSX di tsconfig, pengetikan komponen dan children, event handler, state dengan generik, serta komponen generik yang dipakai ulang untuk banyak bentuk data.

#Konfigurasi JSX di tsconfig

File .tsx butuh opsi JSX yang benar:

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "react",
        "module": "ESNext"
    }
}

Opsi jsx: "react-jsx" memakai transformasi otomatis React 17 ke atas, tanpa perlu mengimpor React di setiap file. jsxImportSource mengarahkan compiler ke paket runtime JSX. Bila memakai framework lain seperti Preact, nilai sumbernya diganti sesuai dokumentasi framework tersebut.

#Menulis Komponen TSX

#Props dan PropsWithChildren

Props adalah kontrak pertama sebuah komponen:

interface PropsTombol {
    label: string;
    aktif: boolean;
    onClick: () => void;
}
 
export function Tombol({ label, aktif, onClick }: PropsTombol) {
    return (
        <button disabled={!aktif} onClick={onClick}>
            {label}
        </button>
    );
}

Interface PropsTombol mendefinisikan apa yang boleh dikirim ke komponen. Pemakai yang lupa memberi label atau mengirim onClick dengan bentuk salah langsung mendapat error. Destructuring parameter memakai tipe props membuat setiap nilai di dalam komponen terjamin.

Untuk komponen yang menerima children, gunakan PropsWithChildren:

import type { PropsWithChildren } from "react";
 
interface PropsKartu extends PropsWithChildren {
    judul: string;
}
 
export function Kartu({ judul, children }: PropsKartu) {
    return (
        <section>
            <h2>{judul}</h2>
            {children}
        </section>
    );
}

PropsWithChildren menambahkan properti children bertipe ReactNode ke props kalian. Komponen Kartu kini bisa dibungkus dengan elemen apa pun di dalam tag pembuka dan penutupnya.

#Generik pada Komponen

Komponen yang menerima data bermacam bentuk dibuat generik:

interface PropsList<T> {
    items: T[];
    render: (item: T) => React.ReactNode;
}
 
export function List<T>({ items, render }: PropsList<T>) {
    return <ul>{items.map((item) => render(item))}</ul>;
}

Deklarasi List<T> menerima type parameter seperti fungsi generik. Saat dipakai dengan items bertipe Pengguna[], fungsi render otomatis menerima Pengguna. Komponen generik menggabungkan reuse dan keamanan tipe sekaligus.

#Event Handler dan State

Event handler dan state memakai tipe yang sudah disediakan React:

import { useState } from "react";
 
export function FormNama() {
    const [nama, setNama] = useState<string>("");
 
    function ubah(e: React.ChangeEvent<HTMLInputElement>) {
        setNama(e.target.value);
    }
 
    return <input value={nama} onChange={ubah} />;
}

useState<string> memberi tahu bahwa state hanya berisi string, sehingga setNama menolak nilai selain string. Parameter e bertipe ChangeEvent<HTMLInputElement> memberi akses ke e.target.value dengan aman. Tipe event di-react diimpor dari namespace React.

#Tipe Bawaan yang Sering Dipakai

React menyediakan banyak tipe siap pakai yang mempercepat kerja:

import type { ReactNode, FC } from "react";
 
interface PropsSambutan {
    nama: string;
    extra?: ReactNode;
}
 
export const Sambutan: FC<PropsSambutan> = ({ nama, extra }) => {
    return (
        <div>
            <p>Halo, {nama}</p>
            {extra}
        </div>
    );
};

ReactNode menampung elemen JSX, string, angka, atau null. FC adalah fungsi komponen yang mengetikkan nilai balik dan props sekaligus. Tipe-tipe ini membuat deklarasi komponen singkat tanpa kehilangan kejelasan.

#Penutup

Episode 15 menunjukkan bagaimana TypeScript mengamankan frontend: props sebagai kontrak, event handler yang terketik, state yang dijamin bentuknya, dan komponen generik yang dipakai ulang tanpa kehilangan keamanan tipe.

Inti yang harus dibawa pulang:

• File .tsx menggabungkan JSX dengan pengetikan penuh.
• Props adalah kontrak yang ditolak compiler bila salah.
• PropsWithChildren menambahkan tipe children ke props.
• Komponen generik dipakai ulang untuk banyak bentuk data.
• useState<T> dan ChangeEvent<T> mengetikkan state dan event.
• Tipe ReactNode dan FC mempercepat deklarasi komponen.

Di episode 16 selanjutnya kita akan membahas TypeScript di backend Node.js, yaitu menjalankan TypeScript di server, mengetikkan process.env, dan menangani async secara aman.