TypeScript Nedir?

Neden Bu Konu Önemli?

Bir bina inşa ettiğini düşün. JavaScript ile bina yapmak, taslak çizmeden, mühendislik hesabı yapmadan tuğla üstüne tuğla koymak gibi. Küçük bir kulübe için bu işe yarar. Ama 20 katlı bir apartman inşa etmeye çalıştığında, taslak olmadan "burada kolon mu vardı, kiriş mi?" diye sormaya başlarsın. Hatalar ancak bina çöktüğünde ortaya çıkar.

TypeScript, JavaScript'in üzerine eklenen bir tip sistemidir — inşaat öncesi yapılan mühendislik planı gibi. Kodun daha yazılırken, çalıştırmadan önce hataları yakalar. "Bu fonksiyon sayı bekliyor ama sen string gönderdin" gibi hataları, kullanıcı görmeden, geliştirme aşamasında tespit eder.

TypeScript, Microsoft tarafından 2012'de geliştirildi ve bugün dünyanın en popüler programlama dillerinden biri haline geldi. Angular, React, Vue, Node.js, Deno — hemen her büyük JavaScript projesi TypeScript'e geçti veya destek ekledi.

JavaScript'in Tip Sorunu

JavaScript dinamik tipli (dynamically typed) bir dildir. Değişkenlerin tipi çalışma zamanında (runtime) belirlenir, derleme zamanında (compile time) değil.

// JavaScript — hiçbir tip kontrolü yok
function topla(a, b) {
  return a + b;
}

console.log(topla(5, 3));        // 8 — beklendiği gibi
console.log(topla("5", 3));      // "53" — beklenmedik! String birleştirme
console.log(topla(true, false)); // 1 — beklenmedik! Boolean → number
console.log(topla(null, 5));     // 5 — beklenmedik! null → 0
console.log(topla({}, []));      // "[object Object]" — tamamen garip!

Bu hatalar JavaScript'te hiç uyarı vermeden çalışır. Hata ancak kullanıcı yanlış sonuç gördüğünde fark edilir — belki haftalarca sonra.

// Gerçek dünya senaryosu — API'den gelen veri
function kullaniciGoster(kullanici) {
  // kullanici.ad var mı? kullanici null mı? kullanici.adres.sehir var mı?
  // JavaScript sormaz — sen kontrol etmezsen çöker
  console.log(kullanici.ad.toUpperCase());
  // Eğer kullanici null ise: TypeError: Cannot read properties of null
  // Eğer ad undefined ise: TypeError: Cannot read properties of undefined
}

// Bu fonksiyonu çağıran kişi ne göndermeli?
// Belge yok, tip yok, tahmin yap!
kullaniciGoster(42); // Runtime hatası
kullaniciGoster(null); // Runtime hatası
kullaniciGoster({ isim: "Ahmet" }); // Runtime hatası (ad değil isim yazmış)

TypeScript: JavaScript + Tipler

TypeScript, JavaScript'in üst kümesidir (superset). Her geçerli JavaScript kodu, aynı zamanda geçerli TypeScript kodudur. TypeScript sadece ek özellikler ekler — bunların en önemlisi tip sistemidir.

// TypeScript — tip güvenliği
function topla(a: number, b: number): number {
  return a + b;
}

topla(5, 3);       // ✅ 8
// topla("5", 3);  // ❌ Derleme hatası! string, number'a atanamaz
// topla(true, 1); // ❌ Derleme hatası! boolean, number'a atanamaz

// Kullanıcı nesnesi — yapısı net tanımlanmış
interface Kullanici {
  id: number;
  ad: string;
  email: string;
  yas?: number; // ? → opsiyonel (olmayabilir)
}

function kullaniciGoster(kullanici: Kullanici): void {
  console.log(kullanici.ad.toUpperCase()); // Güvenli — ad kesinlikle string
}

kullaniciGoster({ id: 1, ad: "Ahmet", email: "a@b.com" }); // ✅
// kullaniciGoster(42);       // ❌ Derleme hatası!
// kullaniciGoster(null);     // ❌ Derleme hatası!
// kullaniciGoster({ isim: "Ahmet" }); // ❌ 'isim' yok, 'ad' lazım!

TypeScript'in Anahtar Noktaları

1. Derleme zamanı kontrolü: Hatalar kod çalışmadan önce yakalanır

2. Superset: Her JS kodu TS kodudur — kademeli geçiş mümkün

3. Silinir: Tip bilgileri derleme sonrası JavaScript'e dönüştüğünde kaybolur (type erasure)

4. Opsiyonel: İstediğin kadar katı veya gevşek kullanabilirsin

5. IDE desteği: Otomatik tamamlama, refactoring, hata gösterimi

Neden TypeScript Kullanmalıyız?

1. Hataları Erken Yakala

// JavaScript'te bu hata RUNTIME'da patlar
// TypeScript'te daha KOD YAZARKEN kırmızı çizgi çıkar

interface Urun {
  id: number;
  isim: string;
  fiyat: number;
  stok: number;
}

function indirimliUrunler(urunler: Urun[], indirim: number): Urun[] {
  return urunler
    .filter((u) => u.stok > 0)
    .map((u) => ({
      ...u,
      fiyat: u.fiyat * (1 - indirim),
      // indirimOrani: indirim, ← Bu Urun interface'inde yok — HATA!
    }));
}

2. IDE Deneyimi (IntelliSense)

TypeScript ile IDE'n süper güçler kazanır:

• Otomatik tamamlama: kullanici. yazdığında hangi özelliklerin olduğunu gösterir

• Hata gösterimi: Yanlış tip kullanımını anında kırmızı çizgiyle gösterir

• Refactoring: Bir özellik adını değiştirdiğinde tüm kullanım yerlerini günceller

• Belgeleme: Tip tanımları otomatik belge görevi görür

3. Dokümantasyon Olarak Tipler

// Tip tanımı, fonksiyonun nasıl kullanılacağını açıklar
// Ayrıca README veya JSDoc yazmaya gerek yok

function siparisOlustur(
  kullaniciId: number,
  urunler: Array<{ urunId: number; adet: number }>,
  adres: {
    il: string;
    ilce: string;
    postaKodu: string;
    detay: string;
  },
  odemeTipi: "krediKarti" | "havale" | "kapidaOdeme"
): Promise<{ siparisId: number; tahminiTeslim: Date }> {
  // Fonksiyonun ne alıp ne döndürdüğü tip tanımından belli
  // Başka dokümantasyona gerek yok!
}

4. Büyük Projelerde Ölçeklenebilirlik

// 50.000+ satırlık bir projede tip sistemi olmadan:
// - "Bu fonksiyon ne döndürüyor?" → Kaynak koduna bak
// - "Bu nesnenin hangi özellikleri var?" → console.log ile dene
// - "Bu değişiklik nereleri etkiler?" → Git grep + dua et

// TypeScript ile:
// - Tipler her şeyi açıklar
// - IDE değişikliğin etkisini gösterir
// - Compiler nerelerin kırıldığını söyler

TypeScript Kurulumu

Node.js ile Kurulum

# TypeScript'i global olarak kur
npm install -g typescript

# Versiyon kontrolü
tsc --version
# Version 5.x.x

# Proje bazlı kurulum (önerilen)
mkdir ts-proje
cd ts-proje
npm init -y
npm install --save-dev typescript

# tsconfig.json oluştur
npx tsc --init

İlk TypeScript Dosyası

// merhaba.ts — TypeScript dosyası (.ts uzantısı)
function selamla(isim: string): string {
  return `Merhaba, ${isim}! TypeScript dünyasına hoşgeldin.`;
}

const mesaj: string = selamla("Ahmet");
console.log(mesaj);

// Derleme: tsc merhaba.ts → merhaba.js oluşturur
// Çalıştırma: node merhaba.js

// merhaba.js — Derleme sonrası (tipler SİLİNMİŞ)
"use strict";
function selamla(isim) {
  return `Merhaba, ${isim}! TypeScript dünyasına hoşgeldin.`;
}
const mesaj = selamla("Ahmet");
console.log(mesaj);
// Dikkat: Tip bilgileri tamamen kayboldu — saf JavaScript!

ts-node ile Direkt Çalıştırma

# Derleme adımını atla — doğrudan çalıştır
npm install -g ts-node

ts-node merhaba.ts
# Merhaba, Ahmet! TypeScript dünyasına hoşgeldin.

tsconfig.json — Proje Ayarları

tsconfig.json, TypeScript derleyicisinin (compiler) nasıl davranacağını belirler. npx tsc --init ile oluşturulur.

// tsconfig.json — temel ayarlar
{
  "compilerOptions": {
    // === Hedef ===
    "target": "ES2020",        // Derleme hedefi: ES5, ES6, ES2020...
    "module": "ESNext",        // Modül sistemi: CommonJS, ESNext, NodeNext
    "moduleResolution": "node",// Modül çözümleme: node, bundler
    "lib": ["ES2020", "DOM"],  // Kullanılabilir kütüphaneler
    
    // === Çıktı ===
    "outDir": "./dist",        // Derlenmiş dosyaların konumu
    "rootDir": "./src",        // Kaynak dosyaların konumu
    "declaration": true,       // .d.ts dosyaları oluştur
    "sourceMap": true,         // Source map oluştur (debug için)
    
    // === Katılık ===
    "strict": true,            // Tüm strict kontrolleri AÇ
    "noImplicitAny": true,     // Implicit any'ye izin verme
    "strictNullChecks": true,  // null/undefined kontrolü zorla
    "noUnusedLocals": true,    // Kullanılmayan değişkenleri hata say
    "noUnusedParameters": true,// Kullanılmayan parametreleri hata say
    
    // === Modül ===
    "esModuleInterop": true,   // CJS/ESM uyumluluğu
    "resolveJsonModule": true, // JSON dosyalarını import et
    "skipLibCheck": true,      // .d.ts dosyalarını kontrol atla (hız)
    "forceConsistentCasingInFileNames": true // Dosya adı büyük/küçük harf
  },
  "include": ["src/**/*"],     // Hangi dosyalar dahil
  "exclude": ["node_modules", "dist"] // Hangi dosyalar hariç
}

Önemli Ayarlar Açıklaması

// target: "ES2020" → Modern JS özelliklerini kullan
// ES5 hedeflerseniz: class → function, async → __awaiter gibi dönüşümler yapılır
// ES2020 hedeflerseniz: Modern syntax korunur (optional chaining, BigInt vb.)

// strict: true → En iyi pratik — TÜM katılık kontrollerini açar:
// - noImplicitAny: Tip belirtilmezse hata
// - strictNullChecks: null/undefined güvenliği
// - strictFunctionTypes: Fonksiyon tipi uyumu
// - strictBindCallApply: bind/call/apply tip kontrolü
// - noImplicitThis: Belirsiz this'e izin verme
// - alwaysStrict: Her dosyada "use strict"

// 🏆 Yeni projelerde strict: true ile başlayın — sonra gevşetmek
//    zor değil ama sonradan sıkılaştırmak çok zor!

Derleme Süreci

TypeScript doğrudan tarayıcıda veya Node.js'te çalışmaz. Önce JavaScript'e derlenmesi (transpile) gerekir.

   ┌─────────────┐    tsc     ┌─────────────┐    node/browser
   │  .ts dosyası │  ──────→  │  .js dosyası │  ──────────────→  Çalıştır
   │  (TypeScript) │   compile  │  (JavaScript) │     runtime
   │  + tip bilgisi│           │  - tip bilgisi │
   └─────────────┘            └─────────────┘

# Tek dosya derleme
tsc merhaba.ts

# Tüm projeyi derleme (tsconfig.json'a göre)
tsc

# İzleme modu — dosya değişince otomatik derle
tsc --watch
# veya kısaca:
tsc -w

# Sadece tip kontrolü — dosya oluşturma
tsc --noEmit

Derleme Zinciri

# Tipik geliştirme akışı:
# 1. src/index.ts → TypeScript kodu yaz
# 2. tsc → dist/index.js oluşturulur (+ index.js.map, index.d.ts)
# 3. node dist/index.js → JavaScript çalıştırılır

# Modern projeler genelde bundler kullanır:
# Vite, esbuild, webpack — TypeScript'i hem derler hem paketler

Tip Çıkarımı (Type Inference)

TypeScript'in güçlü yanlarından biri tip çıkarımıdır. Her yere tip yazmana gerek yok — TypeScript birçok durumda tipi otomatik olarak anlayabilir.

// Açık tip tanımı — yazarsan kullanılır
let isim: string = "Ahmet";
let yas: number = 28;

// Tip çıkarımı — TypeScript tipi ANLAR
let isim2 = "Ahmet";   // TypeScript: bu string!
let yas2 = 28;          // TypeScript: bu number!
let aktif = true;       // TypeScript: bu boolean!

// ❌ Çıkarılan tipe uymayan atama hata verir
// isim2 = 42; // Error: Type 'number' is not assignable to type 'string'

// Fonksiyon dönüş tipi de çıkarılır
function topla(a: number, b: number) {
  return a + b; // TypeScript: dönüş tipi number
}

const sonuc = topla(5, 3); // sonuc: number — otomatik çıkarım

// Dizi tipi çıkarımı
const sayilar = [1, 2, 3];       // number[]
const isimler = ["A", "B", "C"]; // string[]
const karisik = [1, "iki", true]; // (number | string | boolean)[]

Ne Zaman Tip Yazmalı?

// ✅ Tip yazılması GEREKEN yerler:
// 1. Fonksiyon parametreleri
function selamla(isim: string): string { return `Merhaba ${isim}`; }

// 2. Nesne yapıları (interface/type)
interface Kullanici {
  id: number;
  ad: string;
}

// 3. any'den kaçınmak için
const veri: Kullanici = JSON.parse(jsonString);

// ✅ Tip yazılması GEREKSIZ olan yerler (çıkarım yeterli):
let x = 42;              // Değişken başlangıç değerinden çıkarılır
const arr = [1, 2, 3];   // Dizi elemanlarından çıkarılır
const sonuc = topla(5, 3); // Fonksiyon dönüş tipinden çıkarılır

💡 İpucu: Genel kural: parametre tiplerini yaz, dönüş tiplerini çıkarıma bırak (ama public API'ler için dönüş tipini de yazmak iyi bir pratik).

TypeScript ve JavaScript Birlikte

TypeScript'e geçiş "ya hep ya hiç" değildir. Kademeli geçiş stratejileri:

1. allowJs ile Karışık Proje

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,        // .js dosyalarını da dahil et
    "checkJs": true,        // .js dosyalarında da tip kontrolü yap
    "strict": false,        // Başlangıçta gevşek
    "outDir": "./dist"
  },
  "include": ["src/**/*"]
}

2. JSDoc ile JavaScript'te Tip Desteği

// utils.js — TypeScript'e geçmeden tip desteği
/**
 * İki sayıyı toplar
 * @param {number} a - Birinci sayı
 * @param {number} b - İkinci sayı
 * @returns {number} Toplam
 */
function topla(a, b) {
  return a + b;
}

/**
 * @typedef {Object} Kullanici
 * @property {number} id
 * @property {string} ad
 * @property {string} email
 * @property {boolean} [aktif] - Opsiyonel
 */

/**
 * @param {Kullanici} kullanici
 * @returns {string}
 */
function selamla(kullanici) {
  return `Merhaba ${kullanici.ad}`;
}

3. Declaration Files (.d.ts)

// types/legacy-lib.d.ts — Tipsiz JS kütüphanesi için tip tanımı
declare module "legacy-lib" {
  export function hesapla(a: number, b: number): number;
  export function formatla(deger: number, para: string): string;
  
  export interface AyarSecenekleri {
    dil: string;
    bolge: string;
    parabirimi: string;
  }
  
  export function ayarla(secenekler: Partial<AyarSecenekleri>): void;
}

// Kullanım
import { hesapla, formatla } from "legacy-lib";
// Artık tip desteği var!

Yaygın Hatalar ve Tuzaklar

Hata 1: any ile Tip Sistemini Devre Dışı Bırakmak

// ❌ any → TypeScript'in faydası sıfır
function islemiYap(veri: any): any {
  return veri.herhangi.birsey.yapabilirsin; // Hiçbir kontrol yok!
}

// ✅ Doğru tip kullan veya unknown ile güvenli çalış
function islemiYap(veri: unknown): string {
  if (typeof veri === "string") {
    return veri.toUpperCase(); // Tip kontrol edildikten sonra güvenli
  }
  throw new Error("String bekleniyor");
}

Hata 2: Tiplerin Çalışma Zamanında Var Olduğunu Sanmak

// ❌ TypeScript tipleri ÇALIŞMA ZAMANINDA YOK!
interface Kullanici {
  ad: string;
  email: string;
}

// Bu ÇALIŞMAZ — interface çalışma zamanında mevcut değil:
// if (veri instanceof Kullanici) { }  // Error!

// ✅ Çalışma zamanı kontrolü için:
function kullaniciMi(veri: unknown): veri is Kullanici {
  return (
    typeof veri === "object" &&
    veri !== null &&
    "ad" in veri &&
    "email" in veri
  );
}

if (kullaniciMi(veri)) {
  console.log(veri.ad); // TypeScript artık Kullanici olduğunu bilir
}

Hata 3: strict: false ile Başlamak

// ❌ strict: false → TypeScript'in güçlü tarafı devre dışı
// Sonradan açmak çok zor — yüzlerce hata çıkar

// ✅ Yeni projelerde HER ZAMAN strict: true ile başla
// Gerekirse münferit kuralları gevşet:
// {
//   "strict": true,
//   "noUnusedLocals": false  ← Sadece bunu gevşet
// }

Geliştirme Araçları

ts-node — Hızlı Geliştirme

# Derleme adımını atla
npm install -g ts-node
ts-node script.ts

# ESM desteği ile
ts-node --esm script.ts

tsx — Daha Hızlı Alternatif

# esbuild tabanlı — ts-node'dan çok daha hızlı
npm install -g tsx
tsx script.ts
tsx watch script.ts  # İzleme modu

tsx — Daha Hızlı Alternatif

# esbuild tabanlı — ts-node'dan çok daha hızlı
npm install -g tsx
tsx script.ts
tsx watch script.ts  # İzleme modu — dosya değişince otomatik çalıştır

Playground

https://www.typescriptlang.org/play

TypeScript Playground'da kodu tarayıcıda yazıp, anında JavaScript çıktısını ve hataları görebilirsin. Öğrenme aşamasında çok faydalı.

TypeScript'in Sınırları — Ne Yapamaz?

TypeScript güçlü bir araç ama sihir değil. Sınırlarını bilmek önemli:

// 1. Çalışma zamanı güvenliği YOK — tipler derleme sonrası silinir
interface User {
  name: string;
  age: number;
}

// API'den gelen veri TypeScript'in kontrolünde DEĞİL
const data = await fetch("/api/user").then(r => r.json());
// data tipi "any" — API yanlış veri dönerse TypeScript bunu YAKALAYAMAZ

// Çözüm: Runtime validation kütüphanesi kullan (Zod, Yup, io-ts)
import { z } from "zod";

const UserSchema = z.object({
  name: z.string(),
  age: z.number(),
});

const user = UserSchema.parse(data); // Çalışma zamanında doğrular

// 2. Performans etkisi YOK — tipler sadece geliştirme aracı
// TypeScript çalışma zamanında hiçbir ek maliyet getirmez
// Derleme sonrası saf JavaScript — tiplerin izleri bile kalmaz

// 3. Her hata türünü yakalayamaz
// Mantık hataları TypeScript'in kapsamı dışında:
function hesaplaIndirim(fiyat: number, oran: number): number {
  return fiyat + fiyat * oran; // ❌ Mantık hatası: + yerine - olmalı
  // TypeScript: "Tipler doğru, benden bu kadar" 🤷
}

// 4. any kullanıldığında güvenlik ortadan kalkar
function tehlikeli(veri: any): void {
  veri.var.olmayan.property(); // ✅ Derleme hatası YOK — any her şeyi kabul eder
  // Çalışma zamanında: TypeError!
}

⚠️ Dikkat: TypeScript bir güvenlik ağı ama %100 güvenlik sağlamaz. any kullanımı o ağda delik açar. API yanıtları, JSON.parse, localStorage.getItem gibi dış kaynaklardan gelen veriler runtime validation gerektirir.

Özet

Bu derste TypeScript'in ne olduğunu, neden kullanıldığını ve nasıl kurulduğunu öğrendik:

• TypeScript JavaScript'in üst kümesidir — JavaScript + tip sistemi. Her JS kodu geçerli TS kodudur.

• Derleme zamanı tip kontrolü sayesinde hatalar, kod çalışmadan önce yakalanır — runtime hataları büyük ölçüde azalır.

• Tip çıkarımı (type inference) sayesinde her yere tip yazmana gerek yok — TypeScript birçok durumda tipi otomatik anlar.

• tsconfig.json ile proje ayarları yapılır. strict: true yeni projeler için altın standarttır.

• Tipler derleme sonrası silinir (type erasure) — çalışma zamanında TypeScript izleri kalmaz.

• Geçiş kademeli olabilir: allowJs, JSDoc tipleri, .d.ts dosyaları ile JavaScript projesi yavaş yavaş TypeScript'e dönüştürülebilir.

Bir sonraki derste TypeScript'in tip sistemini detaylıca inceleyeceğiz.