0Pricing
Frontend Academy · Lektion

TypeScript mit React: FC-Generics und Hooks

Typisieren Sie React-Komponenten mit generischen Props, annotieren Sie useState und useRef mit expliziten Typen und typisieren Sie benutzerdefinierte Hooks, die Tupel zurückgeben.

TypeScript mit React: FC-Generics und Hooks ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Komponenten typisieren

Modernes React: Typisieren Sie Props mit einem Interface und verwenden Sie eine einfache Funktion. React.FC existiert zwar, wird aber nicht mehr empfohlen (implizite children, keine Unterstützung für Generics).

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

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

children typisieren

Verwenden Sie React.ReactNode für jedes renderbare Child.

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

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

useState typisieren

useState leitet den Typ normalerweise aus dem Anfangswert ab. Geben Sie einen expliziten Typ an, wenn der Anfangswert null ist oder nicht den vollständigen möglichen Typ repräsentiert.

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

useRef typisieren

Es gibt zwei Formen: eine Referenz auf ein DOM-Element (mit null initialisiert) oder einen veränderlichen Container.

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!);
}, []);

Event-Handler typisieren

Verwenden Sie die synthetischen Event-Typen von 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>;
}

Generische Komponenten

Komponenten können generisch sein – TypeScript leitet den Typparameter aus der Aufrufstelle ab.

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}
/>

Benutzerdefinierte Hooks typisieren

Benutzerdefinierte Hooks sind Funktionen – typisieren Sie sie wie jede andere Funktion. Rückgabe-Tupel benötigen eine explizite Annotation, damit der Typ nicht zu einem Array erweitert wird.

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();

Context typisieren

createContext benötigt einen Anfangswert desselben Typs wie der Wert, den Sie bereitstellen werden. Verwenden Sie eine Non-Null-Assertion oder ein Standardobjekt.

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;
}

useReducer typisieren

Geben Sie den Zustand und die Action-Union explizit an.

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 });

React.FC vermeiden

React.FC wird zunehmend weniger verwendet: Es fügt implizit children hinzu, unterstützt generische Komponenten nicht sauber und verhindert einige Optimierungen. Bevorzugen Sie einfache Funktionskomponenten mit typisierten Props.

Utility-Typ ComponentPropsWithoutRef

Um die Props eines nativen Elements zu übernehmen, etwa beim Erweitern eines Buttons oder Inputs, verwenden Sie ComponentPropsWithoutRef.

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

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

Kurze Überprüfung

Warum wird die Verwendung von React.FC im Allgemeinen zugunsten einfacher typisierter Funktionskomponenten nicht empfohlen?

Zusammenfassung: TypeScript + React

Typisieren Sie Props mit Interfaces und bevorzugen Sie einfache Funktionen gegenüber React.FC. children: React.ReactNode. Bei useState erfolgt die Typinferenz häufig automatisch; bei null oder leeren Arrays sollten Sie den Typ angeben. Verwenden Sie useRef für DOM-Elemente. Nutzen Sie die React-Ereignistypen für Handler. Generische Komponenten eignen sich für wiederverwendbare Listen und Formulare. Das Tupel-Ergebnis benutzerdefinierter Hooks benötigt eine Typannotation. Verwenden Sie ComponentPropsWithoutRef, um native Elemente zu erweitern.

Häufig gestellte Fragen

Ist die Lektion „TypeScript mit React: FC-Generics und Hooks“ kostenlos?

Ja — der vollständige Text von „TypeScript mit React: FC-Generics und Hooks“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „TypeScript mit React: FC-Generics und Hooks“?

Typisieren Sie React-Komponenten mit generischen Props, annotieren Sie useState und useRef mit expliziten Typen und typisieren Sie benutzerdefinierte Hooks, die Tupel zurückgeben. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „TypeScript mit React: FC-Generics und Hooks“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Template-Literal-Typen
  2. Dekoratoren und Metadaten
  3. TypeScript mit React: FC-Generics und Hooks
  4. Strict Mode und any vermeiden
← Zurück zu Frontend Academy