# TypeScript z React (React / Next.js)

> Typy dla props, state, events, generics, typ FC, typ children, typowanie hooków

- 20 pytań z rozmów
- Mid-Level
- [Pytania z rozmów: React / Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne.md)

## 1. Jaka jest poprawna składnia do typowania props komponentu React?

**Odpowiedź**

Interfejs Props, po którym następuje typowanie funkcji z Props jako parametrem, to zalecana standardowa składnia. To podejście zapewnia doskonałe wnioskowanie typów i umożliwia łatwe ponowne użycie typu Props w innych miejscach kodu. Jest bardziej jawny niż React.FC i zapewnia lepszą kontrolę nad typowaniem children.

## 2. Jak poprawnie typować prosty state z useState?

**Odpowiedź**

TypeScript automatycznie wnioskuje typ state na podstawie wartości początkowej przekazanej do useState. Dla prostej wartości jak string nie ma potrzeby jawnego określania typu generycznego. Automatyczne wnioskowanie jest wystarczające i sprawia, że kod jest bardziej zwięzły. Jawne typowanie jest przydatne tylko dla unii lub gdy wartość początkowa jest null.

## 3. Jaki jest poprawny typ dla zdarzenia onClick na przycisku?

**Odpowiedź**

React.MouseEvent<HTMLButtonElement> to specyficzny typ dla zdarzeń kliknięcia na przycisku. Parametr generyczny HTMLButtonElement określa odnośny element DOM, co umożliwia dostęp do właściwości specyficznych dla przycisku przez event.currentTarget. Użycie natywnego DOM MouseEvent lub zbyt ogólnego typu spowodowałoby utratę tej precyzji typowania.

## Jeszcze 17 dostępnych pytań

- Jakiego typu użyć do typowania children komponentu opakowującego?
- Jaka jest główna różnica między React.FC a bezpośrednim typowaniem?

Zarejestruj się za darmo: https://sharpskill.dev/pl/login

## Inne tematy rekrutacyjne React / Next.js

- [Podstawy JavaScript](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/javascript-essentials.md): 25 pytań, Junior
- [Podstawy React](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-fundamentals.md): 20 pytań, Junior
- [React Hooks](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-hooks.md): 22 pytań, Junior
- [Cykl życia komponentu](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/component-lifecycle.md): 18 pytań, Junior
- [React Router](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-router.md): 20 pytań, Junior
- [Zarządzanie stanem z Context](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/state-management-context.md): 18 pytań, Junior
- [Formularze i Controlled Components](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/forms-controlled-components.md): 20 pytań, Mid-Level
- [Pobieranie danych i API](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/fetching-data-api.md): 20 pytań, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-query-tanstack.md): 20 pytań, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/styling-css-in-js.md): 18 pytań, Mid-Level
- [Podstawy Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-fundamentals.md): 25 pytań, Mid-Level
- [Pobieranie danych w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-data-fetching.md): 24 pytań, Mid-Level
- [Server Actions w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-server-actions.md): 20 pytań, Mid-Level
- [Routing i Nawigacja w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-routing-navigation.md): 22 pytań, Mid-Level
- [API Routes w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-api-routes.md): 20 pytań, Mid-Level
- [Metadata & SEO w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-metadata-seo.md): 18 pytań, Mid-Level
- [Middleware i Auth w Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-middleware-auth.md): 22 pytań, Mid-Level
- [Testowanie React](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-testing.md): 20 pytań, Mid-Level
- [Zustand State Management](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/zustand-state-management.md): 18 pytań, Mid-Level
- [Optymalizacja wydajności React](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-performance-optimization.md): 22 pytań, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-error-boundaries.md): 18 pytań, Senior
- [Advanced React Patterns](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/advanced-react-patterns.md): 20 pytań, Senior
- [Zaawansowane funkcje Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-advanced-features.md): 24 pytań, Senior
- [Wdrożenie i Produkcja Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-deployment-production.md): 20 pytań, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-architecture-patterns.md): 22 pytań, Senior
- [React Server Components](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-server-components.md): 26 pytań, Senior
- [Internacjonalizacja Next.js](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/nextjs-internationalization.md): 20 pytań, Senior
- [React Bezpieczeństwo & Najlepsze Praktyki](https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/react-security-best-practices.md): 22 pytań, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/pl/technologies/react-next/pytania-rekrutacyjne/typescript-react