index

TypeScript ile Tip Güvenli Geliştirme

Not (🎯 Bu Yazıda Neler Öğreneceksiniz?)

TypeScript, JavaScript geliştirme süreçlerinde güvenlik ve verimlilik sağlayan güçlü bir araçtır. Bu yazıda, TypeScript’in temel özelliklerini ve best practice’leri ele alacağız.

TypeScript Neden Önemli?

Ipucu (🚀 TypeScript'in Gücü)

Modern web geliştirmede TypeScript kullanmanın başlıca sebepleri şunlardır:

Compile-time hata yakalama - Çalışma zamanı hatalarını önleme
Daha iyi IDE desteği - IntelliSense ve otomatik tamamlama
Kod okunabilirliği - Tip tanımları ile daha anlaşılır kod
Refactoring kolaylığı - Güvenli kod değişiklikleri

Temel Tipler

Örnek (Temel Tip Tanımlamaları)

// Primitive tipler
let isActive: boolean = true
let count: number = 42
let message: string = 'Merhaba'
 
// Array tipler
let numbers: number[] = [1, 2, 3]
let names: Array<string> = ['Ali', 'Veli']
 
// Object tipler
interface User {
  id: number
  name: string
  email?: string // Optional property
}
 
const user: User = {
  id: 1,
  name: 'Furkan',
}

Ipucu (💡 Pro İpucu)

Optional properties (?) kullanarak esnek interface’ler oluşturabilirsiniz. Bu, API’lerden gelen verileri tip güvenli şekilde handle etmenizi sağlar.

Generic Tipler

Örnek (Generic Fonksiyon ve Sınıf)

// Generic function
function identity<T>(arg: T): T {
  return arg
}
 
// Generic interface
interface Repository<T> {
  findById(id: number): T | null
  save(entity: T): T
  delete(id: number): boolean
}
 
// Generic class
class DataStore<T> {
  private items: T[] = []
 
  add(item: T): void {
    this.items.push(item)
  }
 
  getAll(): T[] {
    return this.items
  }
}

Utility Tipler

Örnek (Sık Kullanılan Utility Tipler)

interface User {
  id: number
  name: string
  email: string
  age: number
}
 
// Partial - tüm property'leri optional yapar
type PartialUser = Partial<User>
 
// Pick - belirli property'leri seçer
type UserBasicInfo = Pick<User, 'id' | 'name'>
 
// Omit - belirli property'leri çıkarır
type UserWithoutId = Omit<User, 'id'>
 
// Required - tüm property'leri zorunlu yapar
type RequiredUser = Required<PartialUser>

Best Practices

Önemli (Strict Mode Kullanın)

// tsconfig.json
{
  "compilerOptions": {
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  }
}

Tanım (Interface vs Type)

// Interface - extending için uygun
interface Animal {
  name: string
}
 
interface Dog extends Animal {
  breed: string
}
 
// Type - union/intersection için uygun
type Status = 'loading' | 'success' | 'error'
type ApiResponse<T> = {
  data: T
  status: Status
}

Açıklama (Enum Kullanımı)

// Const enum daha performanslı
const enum HttpStatus {
  OK = 200,
  NOT_FOUND = 404,
  INTERNAL_ERROR = 500,
}
 
// String enum daha okunabilir
enum LogLevel {
  DEBUG = 'debug',
  INFO = 'info',
  WARN = 'warn',
  ERROR = 'error',
}

React ile TypeScript

Örnek (React ile TypeScript Kullanımı)

// Component props typing
interface ButtonProps {
  children: React.ReactNode;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
}
 
const Button: React.FC<ButtonProps> = ({
  children,
  onClick,
  variant = "primary",
  disabled = false,
}) => {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`btn btn-${variant}`}
    >
      {children}
    </button>
  );
};
 
// Hook typing
const useCounter = (initialValue: number = 0) => {
  const [count, setCount] = useState<number>(initialValue);
 
  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);
 
  const decrement = useCallback(() => {
    setCount((prev) => prev - 1);
  }, []);
 
  return { count, increment, decrement };
};

Sonuç

Özet (Özet)

TypeScript, JavaScript geliştirmede güvenlik ve verimlilik sağlayan vazgeçilmez bir araçtır. Doğru kullanıldığında:

Hataları erken yakalar
Kod kalitesini artırır
Team çalışmalarını kolaylaştırır
Maintenance süreçlerini iyileştirir

TypeScript’i projelerinizde kullanmaya başlayın ve farkı kendiniz deneyimleyin!