Frontend Academy · Lekcja

TypeScript z React: generyki FC i hooki

Otypuje Pan/Pani komponenty React za pomocą generycznych propsów, jawnie określi typy useState i useRef oraz otypuje własne hooki zwracające krotki.

TypeScript z React: generyki FC i hooki to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Typowanie komponentów

Nowoczesny React: typuj propsy za pomocą interfejsu i używaj zwykłej funkcji. React.FC istnieje, ale nie jest już zalecany (niejawnie dodaje children i nie obsługuje generyków).

// Recommended:
interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

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

Typowanie children

Używaj React.ReactNode dla dowolnego elementu potomnego, który można wyrenderować.

interface CardProps {
  title: string;
  children: React.ReactNode;
}

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

Typowanie useState

useState zwykle wywnioskuje typ na podstawie wartości początkowej. Podaj typ jawnie, gdy wartość początkowa to null lub nie reprezentuje pełnego możliwego typu.

const [count, setCount] = useState(0);              // number
const [name, setName] = useState('');                // string

const [user, setUser] = useState<User | null>(null); // explicit
const [items, setItems] = useState<Item[]>([]);      // explicit array type

Typowanie useRef

Istnieją dwie formy: referencja do elementu DOM (zainicjalizowana wartością null) albo mutowalny kontener.

const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<number | null>(null);

useEffect(() => {
  inputRef.current?.focus();
  timerRef.current = window.setInterval(tick, 1000);
  return () => clearInterval(timerRef.current!);
}, []);

Typowanie obsługi zdarzeń

Używaj typów syntetycznych zdarzeń React.

function Form() {
  function onSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
  }
  function onChange(e: React.ChangeEvent<HTMLInputElement>) {
    setValue(e.target.value);
  }
  function onClick(e: React.MouseEvent<HTMLButtonElement>) {
    /* ... */
  }
  return <form onSubmit={onSubmit}>...</form>;
}

Komponenty generyczne

Komponenty mogą być generyczne — TypeScript wywnioskuje parametr typu na podstawie miejsca wywołania.

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

function List<T>({ items, renderItem, keyOf }: ListProps<T>) {
  return <ul>{items.map(i => <li key={keyOf(i)}>{renderItem(i)}</li>)}</ul>;
}

<List<User>
  items={users}
  renderItem={u => u.name}
  keyOf={u => u.id}
/>

Typowanie własnych hooków

Własne hooki to funkcje — typuj je tak jak każdą inną funkcję. Krotki zwracane przez funkcję wymagają jawnej adnotacji, aby uniknąć rozszerzenia do tablicy.

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = () => setValue(v => !v);
  return [value, toggle]; // tuple — annotation makes this stable
}

const [isOpen, toggle] = useToggle();

Typowanie Context

createContext wymaga wartości początkowej tego samego typu co wartość, którą będziesz przekazywać. Użyj asercji niepustości albo obiektu domyślnego.

interface AuthContextValue {
  user: User | null;
  signIn: (email: string, pw: string) => Promise<void>;
  signOut: () => void;
}

const AuthContext = createContext<AuthContextValue | null>(null);

export function useAuth() {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be inside AuthProvider');
  return ctx;
}

Typowanie useReducer

Jawnie określ typ stanu i unii akcji.

type State = { count: number };
type Action =
  | { type: 'increment' }
  | { type: 'decrement' }
  | { type: 'set'; value: number };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment': return { count: state.count + 1 };
    case 'decrement': return { count: state.count - 1 };
    case 'set':       return { count: action.value };
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

Unikanie React.FC

React.FC wyszedł z użycia: niejawnie dodaje children, nie obsługuje poprawnie komponentów generycznych i ogranicza niektóre optymalizacje. Preferuj zwykłe komponenty funkcyjne z otypowanymi propsami.

Narzędzie ComponentPropsWithoutRef

Aby odziedziczyć właściwości natywnego elementu (rozszerzając przycisk lub pole wejściowe), należy użyć ComponentPropsWithoutRef.

type ButtonProps = React.ComponentPropsWithoutRef<'button'> & {
  variant?: 'primary' | 'secondary';
};

function Button({ variant = 'primary', ...rest }: ButtonProps) {
  return <button className={`btn ${variant}`} {...rest} />;
}

Szybki test

Dlaczego ogólnie odradza się używanie React.FC na rzecz zwykłych typowanych komponentów funkcyjnych?

Podsumowanie: TypeScript + React

Typowanie właściwości za pomocą interfejsów, preferowanie zwykłych funkcji zamiast React.FC. children: React.ReactNode. useState często sam wywnioskuje typ, ale należy dodać adnotację dla null i pustych tablic. useRef służy do elementów DOM. Dla procedur obsługi należy używać typów zdarzeń React. Komponenty generyczne służą do tworzenia wielokrotnie używanych list i formularzy. Krotka zwracana przez własny hook wymaga adnotacji. ComponentPropsWithoutRef służy do rozszerzania natywnych elementów.

Często zadawane pytania

Czy lekcja „TypeScript z React: generyki FC i hooki” jest bezpłatna?

Tak — pełny tekst „TypeScript z React: generyki FC i hooki” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „TypeScript z React: generyki FC i hooki”?

Otypuje Pan/Pani komponenty React za pomocą generycznych propsów, jawnie określi typy useState i useRef oraz otypuje własne hooki zwracające krotki. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „TypeScript z React: generyki FC i hooki”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy