Gyakorlati példák

interface ApiResponse<T> {
  data: T
  status: number
  message: string
  error?: string
}

interface Post {
  id: number
  title: string
  body: string
  userId: number
  createdAt: string
}

async function fetchPost(id: number): Promise<ApiResponse<Post>> {
  const response = await fetch(`/api/posts/${id}`)
  return response.json()
}

interface LoginForm {
  email: string
  password: string
  rememberMe: boolean
}

import { useForm } from "react-hook-form"

const LoginPage = () => {
  const { register, handleSubmit } = useForm<LoginForm>()
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register("email")} />
      <input type="password" {...register("password")} />
    </form>
  )
}

interface ListProps<T> {
  items: T[]
  renderItem: (item: T) => React.ReactNode
  keyExtractor: (item: T) => string | number
  emptyMessage?: string
}

function List<T>({ items, renderItem, keyExtractor, emptyMessage = "Nincs elem" }: ListProps<T>) {
  if (items.length === 0) return <p>{emptyMessage}</p>

  return (
    <ul>
      {items.map((item) => (
        <li key={keyExtractor(item)}>{renderItem(item)}</li>
      ))}
    </ul>
  )
}

import { create } from "zustand"

interface CartItem {
  id: number
  name: string
  price: number
  quantity: number
}

interface CartStore {
  items: CartItem[]
  total: number
  addItem: (item: CartItem) => void
  removeItem: (id: number) => void
  clearCart: () => void
}

const useCartStore = create<CartStore>((set) => ({
  items: [],
  total: 0,
  addItem: (item) =>
    set((state) => ({
      items: [...state.items, item],
      total: state.total + item.price * item.quantity,
    })),
  removeItem: (id) => set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
  clearCart: () => set({ items: [], total: 0 }),
}))