TypeScript Academy · Lektion

React-Component-Props typisieren

Definieren Sie Prop-Interfaces und verwenden Sie FC oder explizite Rückgabetypen.

React-Component-Props typisieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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 TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion lernen Sie, wie Sie Props von React-Komponenten mit TypeScript und React typisieren.

Props-Schnittstelle für Komponenten

Definieren Sie eine Props-Schnittstelle für React-Komponenten, um die Komponenten-API zu dokumentieren und durchzusetzen.

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

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

FC im Vergleich zum expliziten Rückgabetyp

React.FC fügt children und andere Typen automatisch hinzu. Ein expliziter Rückgabetyp (JSX.Element | null) ist oft klarer.

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

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

useState typisieren

useState leitet den Typ aus dem Startwert ab. Geben Sie einen Typparameter an, wenn der Startwert null oder nicht eindeutig ist.

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

useReducer typisieren

useReducer funktioniert am besten mit einem diskriminierten Union-Action-Typ.

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

useRef für das DOM typisieren

useRef für DOM-Elemente benötigt ein Typargument. Initialisieren Sie den Wert mit null, da das Element noch nicht existiert.

const inputRef = useRef<HTMLInputElement>(null);

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

Event-Handler typisieren

Zu den React-Event-Typen gehören React.ChangeEvent, React.MouseEvent und React.FormEvent.

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

Generische Komponenten

Generische Komponenten akzeptieren einen Typparameter für flexible, typsichere Listen und Select-Komponenten.

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

forwardRef mit TypeScript

forwardRef benötigt Typparameter sowohl für den Typ des ref-Elements als auch für die Props.

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

Rückgabetypen benutzerdefinierter Hooks

Typisieren Sie die Rückgabewerte benutzerdefinierter Hooks explizit, um bei Tupel-Rückgabewerten die Ableitung von any[] zu vermeiden.

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

Context mit TypeScript

Typisieren Sie den React-Context mit einer Union, die undefined einschließt, damit Nutzer des Contexts eine Prüfung durchführen müssen.

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

Kurztest

Welcher Typ ist für einen ref auf ein HTML-Eingabeelement korrekt?

Zusammenfassung

Typisieren Sie React-Props mit Schnittstellen, useState mit Typparametern, Events mit React-Event-Typen, refs mit Generics für DOM-Elemente und forwardRef mit zwei Typparametern. Generische Komponenten ermöglichen eine typsichere, wiederverwendbare UI.

Häufig gestellte Fragen

Ist die Lektion „React-Component-Props typisieren“ kostenlos?

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

Was lerne ich in „React-Component-Props typisieren“?

Definieren Sie Prop-Interfaces und verwenden Sie FC oder explizite Rückgabetypen. Du übst TypeScript 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 TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript 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 1 von 4.

Wie lange dauert die Lektion „React-Component-Props typisieren“?

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 TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript 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

← Zurück zu TypeScript Academy