React with TypeScript (ใช้ React กับ TypeScript)

TypeScript ช่วยเพิ่มความปลอดภัยและความเข้าใจในโค้ด React ของเรา

Basic Component (คอมโพเนนต์พื้นฐาน)

interface Props {
  name: string;
  age?: number; // Optional prop
}

const Greeting: React.FC<Props> = ({ name, age = 18 }) => {
  return (
    <div>
      Hello {name}, you are {age} years old
    </div>
  );
};

Hooks with Types (ใช้ Hooks พร้อม Type)

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<{ name: string; age: number } | null>(null);

useEffect(() => {
  // Effect logic here
}, [count]);

Event Handling (จัดการอีเวนต์)

const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  console.log("Button clicked!", e.currentTarget.value);
};

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setValue(e.target.value);
};

Generic Components (คอมโพเนนต์เจเนอริก)

interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

// วิธีใช้
<List<{ id: number; name: string }>
  items={users}
  renderItem={(user) => <div key={user.id}>{user.name}</div>}
/>;

หมายเหตุ

• ใช้ interface หรือ type ตามความเหมาะสม
• ใช้ Utility Types เช่น Partial, Pick, Omit เมื่อจำเป็น
• ควรกำหนด type ให้ครบถ้วนตั้งแต่ต้น
• ใช้ strict: true ใน tsconfig.json