TypeScriptとReact
props、state、イベント、ジェネリクス、FC型、children型、フックの型付け
20 面接問題·
Mid-Level
1Reactコンポーネントのpropsを型付けする正しい構文は何ですか？
1
Reactコンポーネントのpropsを型付けする正しい構文は何ですか？
回答
Props interfaceに続いてProps parameterで関数を型付けする方法が推奨される標準的な構文です。このアプローチは優れた型推論を提供し、コードの他の部分でProps型を簡単に再利用できます。React.FCより明示的で、childrenの型付けをより細かく制御できます。
2useStateで単純なstateを正しく型付けする方法は？
2
useStateで単純なstateを正しく型付けする方法は？
回答
TypeScriptはuseStateに渡された初期値からstateの型を自動的に推論します。stringのような単純な値の場合、ジェネリック型を明示的に指定する必要はありません。自動推論で十分であり、コードをより簡潔にします。明示的な型付けはユニオン型やnullが初期値の場合にのみ有用です。
3ボタンのonClickイベントの正しい型は何ですか？
3
ボタンのonClickイベントの正しい型は何ですか？
回答
React.MouseEvent<HTMLButtonElement>はボタンのクリックイベントに対する特定の型です。ジェネリックパラメータHTMLButtonElementは関連するDOM要素を指定し、event.currentTargetを通じてボタン固有のプロパティにアクセスできます。ネイティブDOMのMouseEventや汎用的すぎる型を使用すると、この型精度が失われます。
4
ラッパーコンポーネントのchildrenを型付けするにはどの型を使うべきですか？
5
React.FCと直接型付けの主な違いは何ですか？
+17 面接問題
その他のReact / Next.js面接トピック
JavaScript の基礎
Junior
25問React の基礎
Junior
20問React Hooks
Junior
22問コンポーネントのライフサイクル
Junior
18問React Router
Junior
20問Contextを使った状態管理
Junior
18問フォームと Controlled Components
Mid-Level
20問データ取得と API
Mid-Level
20問React Query (TanStack Query)
Mid-Level
20問Styling & CSS-in-JS
Mid-Level
18問Next.jsの基礎
Mid-Level
25問Next.js データフェッチング
Mid-Level
24問Next.js Server Actions
Mid-Level
20問Next.jsのルーティングとナビゲーション
Mid-Level
22問Next.js API Routes
Mid-Level
20問Next.js Metadata & SEO
Mid-Level
18問Next.js の Middleware と Auth
Mid-Level
22問React テスト
Mid-Level
20問Zustand State Management
Mid-Level
18問React パフォーマンス最適化
Senior
22問Error Boundaries & エラーハンドリング
Senior
18問Advanced React Patterns
Senior
20問Next.jsの高度な機能
Senior
24問Next.jsのデプロイメントと本番環境
Senior
20問アーキテクチャ & デザインパターン
Senior
22問React Server Components
Senior
26問Next.js の国際化
Senior
20問React セキュリティ & ベストプラクティス
Senior
22問