TypeScript használata React-ben

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

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

interface CardProps {
  title: string
  description: string
  imageUrl?: string
  children?: React.ReactNode
}

import { useState } from "react"

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

const UserProfile = () => {
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState<boolean>(false)
  return <div>{user?.name}</div>
}

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

import { useRef } from "react"

const InputFocus = () => {
  const inputRef = useRef<HTMLInputElement>(null)
  return <input ref={inputRef} />
}

import { ReactNode, PropsWithChildren } from "react"

interface LayoutProps {
  children: ReactNode
  title: string
}

type CardWithChildrenProps = PropsWithChildren<{ title: string }>