TypeScript Academy · Lekcja

Komponenty generyczne i forwardRef

Buduj wielokrotnego użytku komponenty z typami, korzystając z generyków.

Komponenty generyczne i forwardRef to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 4 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 TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Wprowadzenie

Ta lekcja dotyczy komponentów generycznych i forwardRef w TypeScript z użyciem React.

Interfejs propsów komponentu

Należy zdefiniować interfejs propsów komponentów React, aby udokumentować i wymusić zgodność API komponentu.

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

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

FC a jawny typ zwracany

React.FC automatycznie dodaje children i inne typy. Jawny typ zwracany (JSX.Element | null) jest często bardziej przejrzysty.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Typowanie useState

useState wywnioskowuje typ na podstawie wartości początkowej. Należy podać parametr typu, gdy wartość początkowa to null lub jest niejednoznaczna.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Typowanie useReducer

useReducer najlepiej współpracuje z typem akcji będącym rozłączną unią.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Typowanie useRef dla DOM

useRef dla elementów DOM wymaga argumentu typu. Należy zainicjalizować go wartością null, ponieważ element jeszcze nie istnieje.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Typowanie obsługi zdarzeń

Typy zdarzeń React obejmują React.ChangeEvent, React.MouseEvent i React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Komponenty generyczne

Komponenty generyczne przyjmują parametr typu, co pozwala tworzyć elastyczne, bezpieczne typowo listy i komponenty wyboru.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef w TypeScript

forwardRef wymaga parametrów typu zarówno dla typu elementu ref, jak i propsów.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Typy zwracane niestandardowych hooków

Wartości zwracane przez niestandardowe hooki należy jawnie typować, aby uniknąć wywnioskowania any[] dla zwracanych krotek.

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Kontekst w TypeScript

Kontekst React należy typować unią obejmującą undefined, aby wymusić na konsumentach sprawdzanie, czy kontekst jest dostępny.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Szybki sprawdzian

Jaki jest prawidłowy typ ref odwołującego się do elementu HTML input?

Podsumowanie

Propsy React należy typować za pomocą interfejsów, useState za pomocą parametrów typu, zdarzenia za pomocą typów zdarzeń React, ref za pomocą generyków elementów DOM, a forwardRef za pomocą dwóch parametrów typu. Komponenty generyczne umożliwiają tworzenie bezpiecznego typowo, wielokrotnego użytku interfejsu użytkownika.

Często zadawane pytania

Czy lekcja „Komponenty generyczne i forwardRef” jest bezpłatna?

Tak — pełny tekst „Komponenty generyczne i forwardRef” 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 TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Komponenty generyczne i forwardRef”?

Buduj wielokrotnego użytku komponenty z typami, korzystając z generyków. Ćwiczysz TypeScript 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ąć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript 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 4 z 4.

Ile czasu zajmuje lekcja „Komponenty generyczne i forwardRef”?

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 TypeScript Academy?

Tak. Każda lekcja TypeScript 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 TypeScript Academy