TypeScript w React bez bólu: 7 wzorców do produkcyjnych komponentów

// ŹLE — ręczne wypisywanie
type ButtonProps = {
  onClick?: (e: React.MouseEvent) => void
  disabled?: boolean
  type?: 'button' | 'submit' | 'reset'
  className?: string
  children?: React.ReactNode
  // ... 50 więcej propów, których nie pamiętasz
}

// DOBRZE
import { ComponentProps } from 'react'
 
type ButtonProps = ComponentProps<'button'> & {
  variant?: 'primary' | 'secondary'
}
 
function Button({ variant = 'primary', className, ...rest }: ButtonProps) {
  return (
    <button className={`btn btn-${variant} ${className ?? ''}`} {...rest} />
  )
}
 
// Użycie — wszystkie natywne atrybuty button'a działają
;<Button
  variant="primary"
  onClick={handleClick}
  aria-label="Save"
  disabled={loading}
  type="submit"
/>

import { ComponentProps } from 'react'
import { Link } from 'react-router'
 
type NavLinkProps = ComponentProps<typeof Link> & {
  icon?: React.ReactNode
}

// ŹLE
type AlertProps = {
  type: 'info' | 'error' | 'success'
  message: string
  errorCode?: string // tylko dla error
  action?: () => void // tylko dla success
}
 
function Alert({ type, message, errorCode, action }: AlertProps) {
  // TypeScript nie wie, że errorCode i action są mutually exclusive
}

// DOBRZE
type AlertProps =
  | { type: 'info'; message: string }
  | { type: 'error'; message: string; errorCode: string }
  | { type: 'success'; message: string; action?: () => void };
 
function Alert(props: AlertProps) {
  if (props.type === 'error') {
    // TypeScript wie, że errorCode istnieje
    console.log(props.errorCode);
  }
  if (props.type === 'success') {
    // TypeScript wie, że action może istnieć, ale errorCode nie
    props.action?.();
  }
  return <div className={`alert alert-${props.type}`}>{props.message}</div>;
}
 
// Użycie
<Alert type="error" message="Something went wrong" errorCode="ERR_500" />
<Alert type="info" message="New feature available" />
// <Alert type="info" errorCode="..." /> — ERROR: errorCode is not valid for type='info'

type ButtonProps =
  | ({ loading?: false } & ComponentProps<'button'>)
  | ({ loading: true; loadingText: string } & ComponentProps<'button'>)

// DOBRZE
type SelectProps<T> = {
  items: T[]
  getLabel: (item: T) => string
  getValue: (item: T) => string
  value: T | null
  onChange: (value: T) => void
}
 
function Select<T>({
  items,
  getLabel,
  getValue,
  value,
  onChange,
}: SelectProps<T>) {
  return (
    <select
      value={value ? getValue(value) : ''}
      onChange={(e) => {
        const selected = items.find((item) => getValue(item) === e.target.value)
        if (selected) onChange(selected)
      }}
    >
      {items.map((item) => (
        <option key={getValue(item)} value={getValue(item)}>
          {getLabel(item)}
        </option>
      ))}
    </select>
  )
}
 
// Użycie — generyczny User
type User = { id: string; name: string; email: string }
;<Select<User>
  items={users}
  getLabel={(user) => user.name}
  getValue={(user) => user.id}
  value={selectedUser}
  onChange={setSelectedUser}
/>

<Select
  items={users} // T inferred as User
  getLabel={(user) => user.name} // user: User
  getValue={(user) => user.id} // user: User
  value={selectedUser}
  onChange={setSelectedUser}
/>

'use client'
 
function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    if (typeof window === 'undefined') return initialValue
 
    const stored = window.localStorage.getItem(key)
    if (!stored) return initialValue
 
    try {
      return JSON.parse(stored) as T
    } catch {
      return initialValue
    }
  })
 
  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])
 
  return [value, setValue] as const
}
 
// Użycie
const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light')

import { ElementType, ComponentPropsWithoutRef } from 'react';
 
type ButtonBaseProps = {
  variant?: 'primary' | 'secondary';
  children?: React.ReactNode;
};
 
type ButtonProps<E extends ElementType> = ButtonBaseProps & {
  as?: E;
} & Omit<ComponentPropsWithoutRef<E>, keyof ButtonBaseProps | 'as'>;
 
function Button<E extends ElementType = 'button'>({
  as,
  variant = 'primary',
  children,
  ...rest
}: ButtonProps<E>) {
  const Component = as || 'button';
  return (
    <Component className={`btn btn-${variant}`} {...rest}>
      {children}
    </Component>
  );
}
 
// Użycie
<Button onClick={handleClick}>Click me</Button>  // renderuje <button>
<Button as="a" href="/home/">Home</Button>  // renderuje <a>
<Button as={Link} to="/home">Home</Button>  // renderuje <Link>

// Same as const zawęża wartości, ale nie sprawdza schematu tras.
const ROUTES = {
  home: '/',
  about: '/about',
  blog: '/blog',
} as const
 
// Możesz użyć wartości jako stringa.
const path: string = ROUTES.home // OK
 
// TypeScript widzi też literalne wartości.
type Path = (typeof ROUTES)[keyof typeof ROUTES]
// Path = '/' | '/about' | '/blog'

const ROUTES = {
  home: '/',
  about: '/about',
  blog: '/blog',
} as const satisfies Record<string, `/${string}`>
 
type Path = (typeof ROUTES)[keyof typeof ROUTES]
// Path = '/' | '/about' | '/blog'
 
const broken = {
  home: 'home',
  blog: '/blog',
} as const satisfies Record<string, `/${string}`>
// ERROR: 'home' nie pasuje do formatu `/${string}`

const COLORS = {
  primary: '#0066ff',
  secondary: '#ff6600',
  danger: '#ff0000',
} satisfies Record<string, `#${string}`>
 
type ColorName = keyof typeof COLORS // 'primary' | 'secondary' | 'danger'
 
function Button({ color }: { color: ColorName }) {
  return <button style={{ background: COLORS[color] }}>Click</button>
}

// React 19+ — ref jako regular prop
type InputProps = ComponentProps<'input'> & {
  label: string
  ref?: React.Ref<HTMLInputElement>
}
 
function Input({ label, ref, ...rest }: InputProps) {
  return (
    <label>
      <span>{label}</span>
      <input ref={ref} {...rest} />
    </label>
  )
}
 
// Użycie
const inputRef = useRef<HTMLInputElement>(null)
;<Input label="Email" ref={inputRef} type="email" />

// React 18
import { forwardRef, ComponentProps } from 'react'
 
type InputProps = ComponentProps<'input'> & { label: string }
 
const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...rest }, ref) => {
    return (
      <label>
        <span>{label}</span>
        <input ref={ref} {...rest} />
      </label>
    )
  },
)

// ŹLE — TypeScript krzyczy
function Input() {
  const handleChange = (e: Event) => {
    setValue(e.target.value) // Error: Property 'value' does not exist on 'EventTarget'
  }
}
 
// DOBRZE — typowane eventy Reactowe
import { ChangeEvent } from 'react'
 
function Input() {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value) // OK, e.target jest HTMLInputElement
  }
 
  return <input onChange={handleChange} />
}

<input onChange={(e) => setValue(e.target.value)} /> // e typed correctly

type InputProps = {
  value: string
  onChange: (value: string) => void // nie event, tylko value
}
 
function Input({ value, onChange }: InputProps) {
  return <input value={value} onChange={(e) => onChange(e.target.value)} />
}

// Props dla children
type Props = {
  children: React.ReactNode // wszystko, co się da wyrenderować
}
 
// Props dla style
type Props = {
  style?: React.CSSProperties // typowany style object
}
 
// Handler dla event'u z komponentu
type Props = {
  onClick: React.MouseEventHandler<HTMLButtonElement>
  onSubmit: React.FormEventHandler<HTMLFormElement>
}
 
// Ref do konkretnego HTML element'u
const divRef = useRef<HTMLDivElement>(null)
 
// Setter dla useState
type SetValueAction<T> = React.Dispatch<React.SetStateAction<T>>
 
// Context z properti'ami
type ThemeContextValue = {
  theme: string
  setTheme: (theme: string) => void
}
 
const ThemeContext = createContext<ThemeContextValue | null>(null)
 
function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used inside ThemeProvider')
  }
  return context
}