# React ile TypeScript (React / Next.js)

> Props, state, event, generics, FC tipi, children tipi, hook tiplemesi için tipler

- 20 mülakat soruları
- Mid-Level
- [Mülakat Soruları: React / Next.js](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari.md)

## 1. React bileşen props'larını tiplemenin doğru sözdizimi nedir?

**Cevap**

Props interface'i ardından Props parametresiyle fonksiyonun tiplemesi önerilen standart sözdizimdir. Bu yaklaşım mükemmel tip çıkarımı sunar ve Props tipinin kodun başka yerlerinde kolayca yeniden kullanılmasını sağlar. React.FC'den daha açık olup children tiplemesi üzerinde daha iyi kontrol sağlar.

## 2. useState ile basit bir state nasıl doğru tiplendirilir?

**Cevap**

TypeScript, useState'e iletilen başlangıç değerinden state tipini otomatik olarak çıkarır. String gibi basit bir değer için genel tipi açıkça belirtmeye gerek yoktur. Otomatik çıkarım yeterlidir ve kodu daha kısa hale getirir. Açık tipleme yalnızca union'lar veya başlangıç değeri null olduğunda kullanışlıdır.

## 3. Bir buton üzerindeki onClick olayı için doğru tip nedir?

**Cevap**

React.MouseEvent<HTMLButtonElement>, bir butondaki tıklama olayları için özel tiptir. HTMLButtonElement genel parametresi, ilgili DOM öğesini belirtir ve event.currentTarget aracılığıyla butona özgü özelliklere erişim sağlar. Yerel DOM MouseEvent veya çok genel bir tip kullanmak bu tipleme hassasiyetini kaybettirir.

## 17 soru daha mevcut

- Bir wrapper bileşenin children'larını tiplemek için hangi tip kullanılmalıdır?
- React.FC ile doğrudan tipleme arasındaki temel fark nedir?

Ücretsiz kaydol: https://sharpskill.dev/tr/login

## Diğer React / Next.js mülakat konuları

- [JavaScript Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/javascript-essentials.md): 25 soru, Junior
- [React Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-fundamentals.md): 20 soru, Junior
- [React Hooks](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-hooks.md): 22 soru, Junior
- [Bileşen yaşam döngüsü](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/component-lifecycle.md): 18 soru, Junior
- [React Router](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-router.md): 20 soru, Junior
- [Context ile state yönetimi](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/state-management-context.md): 18 soru, Junior
- [Formlar ve Controlled Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/forms-controlled-components.md): 20 soru, Mid-Level
- [Veri Çekme ve API](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/fetching-data-api.md): 20 soru, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-query-tanstack.md): 20 soru, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/styling-css-in-js.md): 18 soru, Mid-Level
- [Next.js Temelleri](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-fundamentals.md): 25 soru, Mid-Level
- [Next.js Veri Çekme](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-data-fetching.md): 24 soru, Mid-Level
- [Next.js Server Actions](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-server-actions.md): 20 soru, Mid-Level
- [Next.js Routing ve Navigasyon](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-routing-navigation.md): 22 soru, Mid-Level
- [Next.js API Routes](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-api-routes.md): 20 soru, Mid-Level
- [Next.js Metadata & SEO](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-metadata-seo.md): 18 soru, Mid-Level
- [Next.js Middleware ve Auth](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-middleware-auth.md): 22 soru, Mid-Level
- [React Testing](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-testing.md): 20 soru, Mid-Level
- [Zustand State Management](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/zustand-state-management.md): 18 soru, Mid-Level
- [React Performans Optimizasyonu](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-performance-optimization.md): 22 soru, Senior
- [Error Boundaries & Error Handling](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-error-boundaries.md): 18 soru, Senior
- [Advanced React Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/advanced-react-patterns.md): 20 soru, Senior
- [Next.js Gelişmiş Özellikler](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-advanced-features.md): 24 soru, Senior
- [Next.js Dağıtım & Üretim](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-deployment-production.md): 20 soru, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-architecture-patterns.md): 22 soru, Senior
- [React Server Components](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-server-components.md): 26 soru, Senior
- [Next.js Uluslararasılaştırma](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/nextjs-internationalization.md): 20 soru, Senior
- [React Güvenlik & En İyi Uygulamalar](https://sharpskill.dev/tr/technologies/react-next/mulakat-sorulari/react-security-best-practices.md): 22 soru, Senior

---

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