Question 1

Was ist die korrekte Syntax zum Typisieren von React-Komponenten-Props?

Accepted Answer

Das Props-Interface gefolgt von der Typisierung der Funktion mit Props als Parameter ist die empfohlene Standardsyntax. Dieser Ansatz bietet hervorragende Typinferenz und ermöglicht eine einfache Wiederverwendung des Props-Typs an anderer Stelle im Code. Er ist expliziter als React.FC und ermöglicht eine bessere Kontrolle über die Typisierung der children.

Question 2

Wie typisiert man einen einfachen State mit useState korrekt?

Accepted Answer

TypeScript leitet den State-Typ automatisch vom initialen Wert ab, der an useState übergeben wird. Für einen einfachen Wert wie einen String ist es nicht notwendig, den generischen Typ explizit anzugeben. Die automatische Inferenz ist ausreichend und macht den Code kompakter. Explizites Typisieren wird nur für Unions oder wenn der Initialwert null ist sinnvoll.

Question 3

Was ist der korrekte Typ für ein onClick-Event auf einem Button?

Accepted Answer

React.MouseEvent<HTMLButtonElement> ist der spezifische Typ für Klick-Events auf einem Button. Der generische Parameter HTMLButtonElement gibt das betroffene DOM-Element an und ermöglicht den Zugriff auf button-spezifische Eigenschaften über event.currentTarget. Die Verwendung von nativem DOM-MouseEvent oder einem zu allgemeinen Typ würde diese Typisierungspräzision verlieren.

TypeScript mit React

Was ist die korrekte Syntax zum Typisieren von React-Komponenten-Props?

Antwort

Wie typisiert man einen einfachen State mit useState korrekt?

Antwort

Was ist der korrekte Typ für ein onClick-Event auf einem Button?

Antwort

Welchen Typ für die Typisierung der children einer Wrapper-Komponente verwenden?

Was ist der Hauptunterschied zwischen React.FC und direkter Typisierung?

Weitere React / Next.js-Interviewthemen

JavaScript-Grundlagen

React-Grundlagen

React Hooks

Komponentenlebenszyklus

React Router

Zustandsverwaltung mit Context

Formulare & Controlled Components

Datenabruf & API

React Query (TanStack Query)

Styling & CSS-in-JS

Next.js Grundlagen

Next.js Data Fetching

Next.js Server Actions

Routing & Navigation in Next.js

Next.js API Routes

Next.js Metadata & SEO

Next.js Middleware & Auth

React Testing

Zustand State Management

React Performance-Optimierung

Error Boundaries & Error Handling

Advanced React Patterns

Erweiterte Next.js-Funktionen

Next.js Deployment & Produktion

Architecture & Design Patterns

React Server Components

Next.js Internationalisierung

React Sicherheit & Best Practices

Meistere React / Next.js für dein nächstes Interview