TypeScript ile Daha İyi React Kodları Yazma

TypeScript, JavaScript'e statik tip kontrolü ekleyerek daha güvenli ve sürdürülebilir kodlar yazmamızı sağlıyor. React projelerinde TypeScript kullanmanın avantajlarını ve en iyi pratikleri paylaşacağım.

TypeScript'in React'ta Avantajları

TypeScript, React projelerinde birçok avantaj sağlıyor:

• Tip Güvenliği: Runtime hatalarını compile time'da yakalama
• Daha İyi IDE Desteği: Otomatik tamamlama ve refactoring
• Daha İyi Dokümantasyon: Tip tanımları kod dokümantasyonu görevi görür
• Takım Çalışması: Daha iyi kod anlaşılabilirliği ve iletişim
• Refactoring Güvenliği: Değişikliklerin güvenli şekilde yapılması

En İyi Pratikler

1. Interface Tanımları

interface UserProps {
  id: number;
  name: string;
  email: string;
  isActive?: boolean;
  avatar?: string;
  role: 'admin' | 'user' | 'moderator';
}

const UserCard: React.FC = ({ id, name, email, isActive = true, avatar, role }) => { return (

user-card ${isActive ? 'active' : 'inactive'}}> {avatar && }

{name}

{email}

role-${role}}>{role}

2. Generic Types

interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
}

interface User { id: number; name: string; email: string; }

// Kullanım const fetchUsers = async (): Promise> => { const response = await fetch('/api/users'); return response.json(); }; `

3. Utility Types

// Partial - Tüm özellikleri opsiyonel yapar
type PartialUser = Partial<User>;

// Pick - Belirli özellikleri seçer type UserDisplay = Pick;

// Omit - Belirli özellikleri çıkarır type UserWithoutId = Omit;

// Record - Key-value çiftleri için type ThemeColors = Record<'primary' | 'secondary' | 'accent', string>; `

4. Strict Mode Kullanımı

{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

Hook'lar için TypeScript

Custom Hook'lar

interface UseCounterReturn {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const useCounter = (initialValue: number = 0): UseCounterReturn => { const [count, setCount] = useState(initialValue);

const increment = useCallback(() => { setCount(prev => prev + 1); }, []);

const decrement = useCallback(() => { setCount(prev => prev - 1); }, []);

const reset = useCallback(() => { setCount(initialValue); }, [initialValue]);

return { count, increment, decrement, reset }; }; `

Context API ile TypeScript

interface ThemeContextType {
  theme: 'light' | 'dark';
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [theme, setTheme] = useState<'light' | 'dark'>('light');

const toggleTheme = useCallback(() => { setTheme(prev => prev === 'light' ? 'dark' : 'light'); }, []);

return ( {children} ); }; `

Form Handling

interface LoginForm {
  email: string;
  password: string;
  rememberMe: boolean;
}

const LoginForm: React.FC = () => { const [formData, setFormData] = useState({ email: '', password: '', rememberMe: false });

const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // Form işlemleri };

const handleChange = (e: React.ChangeEvent) => { const { name, value, type, checked } = e.target; setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value })); };

return (

Sonuç

TypeScript, React projelerinde kod kalitesini ve güvenliğini önemli ölçüde artırıyor. Başlangıçta öğrenme eğrisi olsa da, uzun vadede büyük avantajlar sağlıyor. Özellikle büyük projelerde ve takım çalışmalarında TypeScript'in değeri çok daha belirgin oluyor.

Gelecekte TypeScript'in web geliştirme ekosisteminde daha da yaygınlaşacağını ve standart haline geleceğini düşünüyorum.