TypeScript nedir, neden var?

JavaScript'in üzerine derleme zamanında tip kontrolü ekleyen bir katman. Tarayıcı TypeScript'i anlamaz — tsc (veya Next.js'in kullandığı SWC) onu düz JavaScript'e "derler" (transpile eder). Kazandırdığı şey: hatayı kullanıcı görmeden, editörde, yazarken yakalamak.

1. Temel tipler

let ad: string = "Ahmet";
let yas: number = 29;
let aktif: boolean = true;
let etiketler: string[] = ["senior", "frontend"];
let koordinat: [number, number] = [41.01, 28.97]; // tuple — sabit uzunluk ve sıradaki tip

// any KULLANMA — TS'i kapatmak gibidir. Bilmiyorsan unknown kullan:
function handleApi(veri: unknown) {
  if (typeof veri === "string") { // daraltma (narrowing) olmadan veriyi kullanamazsın
    console.log(veri.toUpperCase());
  }
}

2. interface vs type

%90 durumda ikisi de aynı işi görür. Kural: obje şekli tanımlıyorsan ve genişletilebilir olmasını istiyorsan interface; union, tuple ya da hesaplanmış bir tip gerekiyorsa type.

interface Kullanici {
  id: number;
  ad: string;
  rol?: "admin" | "editor"; // ?  → opsiyonel alan
}
interface AdminKullanici extends Kullanici { yetkiler: string[] }

// type: union'lar için interface çalışmaz, type gerekir
type Durum = "loading" | "success" | "error";
type ApiSonuc<T> = { durum: "success"; veri: T } | { durum: "error"; mesaj: string };

3. Generics — "tip parametresi"

Fonksiyonun hangi tiple çağrıldığını hatırlayan bir kalıp. En somut örnek: useState<T>().

function ilkEleman<T>(liste: T[]): T | undefined {
  return liste[0];
}
ilkEleman([1,2,3]);          // T = number olarak çıkarılır
ilkEleman(["a","b"]);        // T = string

// React'te en çok burada görürsün:
const [kullanici, setKullanici] = useState<Kullanici | null>(null);

4. Utility types (mülakatta sorulan klasikler)

5. React + TypeScript — gerçekte yazacağın kod budur

type ButonProps = {
  etiket: string;
  varyant?: "primary" | "ghost";
  onClick: () => void;
  children?: React.ReactNode;
};

const Buton: React.FC<ButonProps> = ({ etiket, varyant = "primary", onClick, children }) => (
  <button className={`btn btn-${varyant}`} onClick={onClick}>{etiket}{children}</button>
);

// Event tipleme — bunu ezberle, hep aynı kalıp:
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
}

Egzersizler

interface Kullanici { ad: string; aktif: boolean }
function aktifIsimler(liste: Kullanici[]): string[] {
  return liste.filter(k => k.aktif).map(k => k.ad);
}