TypeScriptIntermediate

React ও TypeScript

Props, useState, event handler, useRef, children ও component টাইপ — React-এ TypeScript ব্যবহার বাংলায়।

10টি অংশবাংলা ভাষায়

React-এর সাথে TypeScript একটি জনপ্রিয় জুটি। কম্পোনেন্টের props, state ও event — প্রতিটিতে টাইপ দিলে UI-তে হওয়া ভুলগুলো কমে যায়।

Props Typing

UserCard.tsxtsx

tsx

interface UserCardProps {
  name: string;
  age?: number;          // optional
  onGreet: (name: string) => void;
}

function UserCard({ name, age, onGreet }: UserCardProps) {
  return (
    <button onClick={() => onGreet(name)}>
      {name} {age ? "(" + age + ")" : ""}
    </button>
  );
}

export default UserCard;

State (useState)

const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

// union state — উপযুক্ত
type View = "list" | "grid";
const [view, setView] = useState<View>("list");

Events ও Handlers

import type { ChangeEvent, FormEvent } from "react";

function SearchBox() {
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    console.log(event.target.value);
  };

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    // ...
  };

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleChange} placeholder="সার্চ..." />
    </form>
  );
}

useRef ও children

import { useRef } from "react";


function Box({ children }: { children: ReactNode }) {
  const inputRef = useRef<HTMLInputElement>(null);

  const focus = () => inputRef.current?.focus();

  return (
    <div onClick={focus}>
      <input ref={inputRef} />
      <div>{children}</div>
    </div>
  );
}

props-name নিয়ম

Always props-এর interface আলাদা রাখুন (যেমন UserCardProps)। React.FC-এর দরকার নেই — সাধারণ function + explicit children টাইপই যথেষ্ট ও পরিষ্কার।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।