React-এর সাথে TypeScript ব্যবহার করা

interface ButtonProps {
  label: string
  onClick: () => void
  disabled?: boolean   // ? এই prop-কে optional বানায়
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  )
}

import type { ReactNode } from 'react'

interface CardProps {
  title: string
  children: ReactNode
}

function Card({ title, children }: CardProps) {
  return (
    <div className="card">
      <h3>{title}</h3>
      {children}
    </div>
  )
}

const [count, setCount] = useState(0)              // number হিসেবে infer করা
const [name, setName] = useState('')                // string হিসেবে infer করা

// একটা explicit type দরকার — null দিয়ে শুরু, কিন্তু পরে একটা User ধরবে
const [user, setUser] = useState<User | null>(null)

function SearchBox() {
  const [query, setQuery] = useState('')

  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setQuery(event.target.value)
  }

  return <input value={query} onChange={handleChange} />
}

function TextInput() {
  const inputRef = useRef<HTMLInputElement>(null)

  function focus() {
    inputRef.current?.focus()   // ?. কারণ এটা null দিয়ে শুরু হয়
  }

  return <input ref={inputRef} />
}