TypeScript & React: Pengenalan Dasar | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

TypeScript & React: Pengenalan Dasar | Dasar TypeScript untuk JavaScript Developer | Mahir.dev | Mahir.dev Academy

tsx

// File: Tombol.tsx
import React from 'react'; // Di proyek Vite modern, import React kadang opsional buat JSX
 
// 1. Definisikan bentuk props pake interface atau type
interface TombolProps {
  teks: string;                 // Prop 'teks' wajib string
  onClick: () => void;          // Prop 'onClick' wajib fungsi tanpa argumen & return
  disabled?: boolean;            // Prop 'disabled' opsional boolean
  jenis?: "primer" | "sekunder"; // Prop 'jenis' opsional, nilainya cuma boleh "primer" atau "sekunder" (Union Type)
}
 
// 2. Kasih tipe ke parameter props di fungsi komponen
function Tombol({ teks, onClick, disabled = false, jenis = "primer" }: TombolProps) {
  // Kita pake destructuring props di sini dan kasih nilai default
  
  let kelasDasar = "py-2 px-4 rounded font-semibold transition-colors ";
  if (jenis === "primer") {
    kelasDasar += "bg-blue-500 text-white hover:bg-blue-600";
  } else {
    kelasDasar += "bg-gray-200 text-gray-800 hover:bg-gray-300";
  }
  if (disabled) {
    kelasDasar += " opacity-50 cursor-not-allowed";
  }
 
  return (
    <button className={kelasDasar} onClick={onClick} disabled={disabled}>
      {teks}
    </button>
  );
}
 
export default Tombol;
 
// Cara pakenya di komponen lain (misal, App.tsx):
// import Tombol from './Tombol';
// ...
// <Tombol teks="Kirim" onClick={() => console.log('Kirim diklik!')} jenis="primer" />
// <Tombol teks="Batal" onClick={() => console.log('Batal!')} jenis="sekunder" disabled />
// <Tombol teks="Default" onClick={() => {}} /> {/* jenis akan primer, disabled akan false */}
// <Tombol onClick={() => {}} /> // ERROR! Prop 'teks' wajib ada dan belum dikasih.

tsx

import React, { FC, ReactNode } from 'react'; // FC adalah Functional Component
 
interface KartuProps {
  judul: string;
  children: ReactNode; // children harus didefinisikan kalau mau dipake eksplisit
                       // React.FC otomatis nambahin children?, tapi lebih baik eksplisit
}
 
const Kartu: FC<KartuProps> = ({ judul, children }) => {
  return (
    <div className="border p-4 rounded shadow">
      <h2 className="text-xl mb-2">{judul}</h2>
      <div>{children}</div>
    </div>
  );
};
 
export default Kartu;

tsx

import React, { useState } from 'react';
 
function Counter() {
  const [hitungan, setHitungan] = useState(0); // TS otomatis nebak 'hitungan' itu tipe 'number'
                                              // dan 'setHitungan' itu fungsi (value: number) => void
 
  // hitungan = "nol"; // ERROR! Gak bisa assign string ke number.
  // setHitungan("satu"); // ERROR! setHitungan ngarepnya number.
 
  return (
    <div>
      <p>Hitungan: {hitungan}</p>
      <button onClick={() => setHitungan(prev => prev + 1)}>Tambah</button>
    </div>
  );
}

tsx

import React, { useState } from 'react';
 
interface Pengguna {
  id: number;
  nama: string;
}
 
function ProfilPengguna() {
  // State 'user' bisa objek Pengguna atau null (kalau belum login/data belum ada)
  // Kita kasih tipe eksplisit: useState<Pengguna | null>(initialValue)
  const [user, setUser] = useState<Pengguna | null>(null); 
  const [isLoading, setIsLoading] = useState<boolean>(true); // Eksplisit boolean
 
  // Simulasi fetch data
  useEffect(() => {
    setTimeout(() => {
      setUser({ id: 1, nama: "Budi Reactson" });
      setIsLoading(false);
    }, 1000);
  }, []);
 
  if (isLoading) return <p>Loading...</p>;
 
  if (!user) return <p>Pengguna tidak ditemukan.</p>; // Handle kalau user null
 
  return (
    <div>
      <h1>{user.nama}</h1> {/* Aman, TS tau user punya properti nama kalau gak null */}
      <p>ID: {user.id}</p>
    </div>
  );
}

tsx

import React, { useState, ChangeEvent, FormEvent } from 'react';
 
function FormLogin() {
  const [email, setEmail] = useState('');
 
  const handleEmailChange = (event: ChangeEvent<HTMLInputElement>) => {
    // 'event.target' otomatis punya tipe HTMLInputElement, jadi 'event.target.value' aman diakses
    setEmail(event.target.value);
  };
 
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("Email yang disubmit:", email);
  };
 
  const handleButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    // 'event' di sini punya properti spesifik buat mouse event
    console.log("Tombol diklik di koordinat X:", event.clientX);
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="email" 
        value={email} 
        onChange={handleEmailChange} 
        placeholder="Email" 
      />
      <button type="submit" onClick={handleButtonClick}>Login</button>
    </form>
  );
}