TypeScript dengan React

TypeScript dengan React

Menggunakan TypeScript di React membuat komponen lebih robust dan lebih mudah dipahami oleh seluruh tim. Props yang salah tipe akan langsung dideteksi oleh editor.

Setup

npm create vite@latest my-app -- --template react-ts

Mengetik Props Komponen

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary" | "danger";
  disabled?: boolean;
}

function Button({ label, onClick, variant = "primary", disabled = false }: ButtonProps) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

useState dengan TypeScript

import { useState } from "react";

interface User {
  id: number;
  name: string;
}

function UserProfile() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  // TypeScript tahu: user bisa null, jadi harus dicek
  if (!user) return <p>Loading...</p>;

  return <h1>Hello, {user.name}</h1>;
}

Event Handlers

function SearchBar() {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} />
    </form>
  );
}