TypeScript Nedir? Neden TypeScript Kullanmalısınız?

JavaScript, web'in tartışmasız kralı. Tarayıcıda çalışan tek dil olarak yıllardır milyonlarca geliştiricinin vazgeçilmezi. Peki ya projeleriniz büyüdükçe, ekibiniz genişledikçe JavaScript'in "esnek" yapısı sizi zorluyorsa? İşte tam bu noktada TypeScript sahneye çıkıyor.

Bu yazıda TypeScript'in ne olduğunu, neden bu kadar popülerleştiğini, JavaScript'ten farkını ve nasıl başlayacağınızı A'dan Z'ye öğreneceksiniz. Eğer "TypeScript öğrenmeli miyim?" diye düşünüyorsanız, bu rehber tam size göre.

TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen ve JavaScript'in üzerine inşa edilmiş açık kaynaklı bir programlama dilidir. İlk olarak 2012 yılında, C# dilinin yaratıcısı Anders Hejlsberg liderliğinde piyasaya sürülmüştür.

TypeScript'i en basit şekilde şöyle tanımlayabiliriz:

TypeScript = JavaScript + Statik Tip Sistemi

TypeScript, JavaScript'in tüm özelliklerini içerir ve bunların üzerine statik tip kontrolü (static type checking) ekler. Yani yazdığınız her TypeScript kodu aynı zamanda geçerli bir JavaScript kodudur — ama tersi her zaman doğru değildir.

Peki "statik tip" ne demek? JavaScript'te bir değişkene önce bir sayı, sonra bir string atayabilirsiniz ve hiçbir hata almazsınız. TypeScript'te ise değişkenlerin tipini önceden belirlersiniz; yanlış bir tip atamaya çalıştığınızda daha kodu çalıştırmadan hata alırsınız.

TypeScript dosyaları .ts uzantısına sahiptir ve TypeScript Compiler (tsc) tarafından standart JavaScript'e dönüştürülür (transpile edilir). Yani tarayıcı veya Node.js, TypeScript'i doğrudan çalıştırmaz — önce JavaScript'e çevrilir. Bu da demek oluyor ki TypeScript'in çalıştığı her yerde JavaScript çalışır; uyumluluk sorunu yoktur.

Kısa Tarihçe

• 2012: Microsoft, TypeScript'i açık kaynak olarak yayınladı

• 2016: TypeScript 2.0 ile strict mod ve gelişmiş tip sistemi geldi

• 2018: Angular ve Vue 3 TypeScript'e geçiş yaptı

• 2023-2025: TypeScript 5.x serisi ile performans iyileştirmeleri; GitHub'da en çok kullanılan dillerden biri haline geldi

JavaScript'in Sorunları ve TypeScript'in Çözümü

JavaScript harika bir dil, ama büyük projelerde ciddi sorunlar yaratabilir. Gelin bu sorunlara ve TypeScript'in sunduğu çözümlere birlikte bakalım.

1. Tip Güvenliği Eksikliği

JavaScript dinamik tipli (dynamically typed) bir dildir. Bu, geliştirme hızını artırsa da büyük projelerde kabus gibi hatalara yol açar.

JavaScript — Sorun:

function hesaplaKDV(fiyat, oran) {
  return fiyat * oran / 100;
}

// Yanlışlıkla string gönderildi — hata yok, ama sonuç yanlış!
const sonuc = hesaplaKDV("100", "18");
console.log(sonuc); // 18 (doğru gibi görünüyor ama aslında "100" * "18" / 100)

const sonuc2 = hesaplaKDV("yüz", 18);
console.log(sonuc2); // NaN — sessizce hata üretir!

TypeScript — Çözüm:

function hesaplaKDV(fiyat: number, oran: number): number {
  return fiyat * oran / 100;
}

// ❌ Derleme hatası: Argument of type 'string' is not assignable to parameter of type 'number'
const sonuc = hesaplaKDV("100", "18");

// ✅ Doğru kullanım
const sonuc = hesaplaKDV(100, 18);
console.log(sonuc); // 18

TypeScript, bu hatayı kodunuzu çalıştırmadan önce yakalar. Kullanıcıya ulaşmadan, geliştirme aşamasında düzeltirsiniz.

2. IDE Desteği ve Refactoring

JavaScript'te bir objenin özelliklerini görmek için dokümantasyon karıştırırsınız. TypeScript'te editörünüz her şeyi otomatik tamamlar. Aynı şekilde, bir fonksiyon adını değiştirmek istediğinizde TypeScript tüm kullanım noktalarını bilir — güvenli refactoring yaparsınız.

3. Ekip Çalışmasında İletişim

Takım arkadaşınızın yazdığı fonksiyonu kullanmak için kaynak kodu okumak zorunda kalmazsınız. TypeScript'te fonksiyonun imzası (signature) her şeyi anlatır:

// Bu fonksiyonun ne beklediği ve ne döndüğü kristal netliğinde
function kullaniciOlustur(
  ad: string,
  email: string,
  yas: number,
  aktif?: boolean  // ? → opsiyonel parametre
): { id: number; ad: string; email: string } {
  // ...
}

4. Geç Fark Edilen Hatalar

JavaScript'te birçok hata ancak runtime'da ortaya çıkar. TypeScript ile bu hataların büyük çoğunluğunu derleme zamanında yakalarsınız.

💡 İpucu: Araştırmalar, yazılım hatalarının %15-20'sinin tip hatalarından kaynaklandığını gösteriyor. TypeScript, bu hataların neredeyse tamamını derleme aşamasında yakalar.

TypeScript Tip Sistemi

TypeScript'in kalbi tip sistemidir (type system). Bu bölümde en önemli tip yapılarını örneklerle göreceğiz.

Temel Tipler (Primitive Types)

let isim: string = "Tolgahan";           // String
let yas: number = 28;                    // Number (tam sayı ve ondalık ayrımı yok)
let fiyat: number = 99.90;
let aktif: boolean = true;               // Boolean

// Any — tip kontrolünü devre dışı bırakır (kaçının!)
let hersey: any = "merhaba";
hersey = 42; // Hata yok — ama TypeScript'in amacına ters!

// Unknown — any'nin güvenli versiyonu
let bilinmeyen: unknown = "merhaba";
// bilinmeyen.toUpperCase(); // ❌ Hata! Önce tip kontrolü yapmalısınız
if (typeof bilinmeyen === "string") {
  bilinmeyen.toUpperCase(); // ✅ Artık güvenli
}

// Void — bir şey döndürmeyen fonksiyonlar
function logla(mesaj: string): void { console.log(mesaj); }

// Never — asla tamamlanmayan fonksiyonlar
function hataFirlat(mesaj: string): never { throw new Error(mesaj); }

⚠️ Dikkat: any tipini mümkün olduğunca kullanmaktan kaçının. any kullandığınız anda TypeScript'in tip güvenliğini kaybedersiniz. Bunun yerine unknown tipini tercih edin.

Array ve Tuple

let sayilar: number[] = [1, 2, 3, 4, 5];              // Array
let isimler: Array<string> = ["Ali", "Veli", "Ayşe"]; // Alternatif yazım

let kullanici: [string, number] = ["Tolgahan", 28];   // Tuple — sabit sıralı tip
// kullanici = [28, "Tolgahan"]; // ❌ Sıra yanlış!

let sabitler: readonly number[] = [1, 2, 3];           // Readonly Array
// sabitler.push(4); // ❌ Readonly diziye eleman eklenemez

Interface

Interface, bir objenin yapısını (şeklini) tanımlamak için kullanılır. Büyük projelerde en çok kullanacağınız yapılardan biridir.

interface Kullanici {
  id: number;
  ad: string;
  email: string;
  yas?: number;               // opsiyonel alan
  readonly kayitTarihi: Date;  // sadece okunabilir
}

// Kullanım
const kullanici: Kullanici = {
  id: 1,
  ad: "Tolgahan",
  email: "info@tolgahan.dev",
  kayitTarihi: new Date()
};

// kullanici.kayitTarihi = new Date(); // ❌ readonly olduğu için değiştirilemez!

// Interface genişletme (extend)
interface Admin extends Kullanici {
  yetki: string[];
  superAdmin: boolean;
}

const admin: Admin = {
  id: 2,
  ad: "Ayşe",
  email: "ayse@example.com",
  kayitTarihi: new Date(),
  yetki: ["kullanici_yonetimi", "icerik_duzenleme"],
  superAdmin: false
};

Type Alias

type anahtar kelimesi ile özel tipler oluşturabilirsiniz. Interface'e benzer ama bazı farklılıkları vardır.

// Basit type alias
type ID = number | string;

// Union type — birden fazla tip kabul eder
type Durum = "aktif" | "pasif" | "beklemede";

let kullaniciDurumu: Durum = "aktif";
// kullaniciDurumu = "silindi"; // ❌ Hata! İzin verilen değerler dışında

// Intersection type — tipleri birleştirme
type Kisi = {
  ad: string;
  yas: number;
};

type Calisan = Kisi & {
  sirket: string;
  maas: number;
};

const calisan: Calisan = {
  ad: "Mehmet",
  yas: 35,
  sirket: "TechCorp",
  maas: 45000
};

Interface mi, Type mı kullanmalıyım? Genel kural: Obje yapıları için interface, union/intersection gibi birleşik tipler için type kullanın. Aslında çoğu durumda ikisi de işe yarar — önemli olan projede tutarlı olmaktır.

Generics

Generics, yeniden kullanılabilir ve tip güvenli yapılar oluşturmanızı sağlar. Bir fonksiyonun birden fazla tip ile çalışmasını istiyorsanız Generics kullanırsınız.

JavaScript — Tip güvenliği yok:

function ilkElemaniGetir(dizi) {
  return dizi[0];
}

const sayi = ilkElemaniGetir([1, 2, 3]);
// sayi'nın tipi belli değil — number mı, string mi?

TypeScript (Generics) — Tip güvenli:

function ilkElemaniGetir<T>(dizi: T[]): T | undefined {
  return dizi[0];
}

const sayi = ilkElemaniGetir<number>([1, 2, 3]);       // number
const isim = ilkElemaniGetir<string>(["a", "b", "c"]); // string

// TypeScript tipi otomatik çıkarabilir (type inference)
const sayi2 = ilkElemaniGetir([1, 2, 3]); // number — açıkça yazmaya gerek yok!

// Daha karmaşık bir örnek
interface ApiResponse<T> {
  data: T;
  basarili: boolean;
  mesaj: string;
  zamanDamgasi: Date;
}

interface Urun {
  id: number;
  ad: string;
  fiyat: number;
}

// API yanıtı tiplenmiş oluyor
const urunYaniti: ApiResponse<Urun> = {
  data: { id: 1, ad: "Laptop", fiyat: 25000 },
  basarili: true,
  mesaj: "Ürün başarıyla getirildi",
  zamanDamgasi: new Date()
};

Generics, özellikle API katmanı, veri yapıları ve utility fonksiyonlar yazarken hayat kurtarır. React'te useState<T>, useRef<T> gibi hook'larda sürekli kullanırsınız.

Enum

Enum (enumeration), ilişkili sabitleri bir arada gruplamak için kullanılır.

// String enum (okunabilir, tercih edin)
enum SiparisDevlet {
  Beklemede = "BEKLEMEDE",
  Hazirlaniyor = "HAZIRLANIYOR",
  Kargoda = "KARGODA",
  TeslimEdildi = "TESLIM_EDILDI",
  IptalEdildi = "IPTAL_EDILDI"
}

function siparisDurumunuGuncelle(durum: SiparisDevlet): void {
  if (durum === SiparisDevlet.IptalEdildi) {
    console.log("Sipariş iptal edildi, iade süreci başlatılıyor.");
  }
}

siparisDurumunuGuncelle(SiparisDevlet.IptalEdildi);
// siparisDurumunuGuncelle("IPTAL"); // ❌ Sadece enum değerleri kabul edilir

💡 İpucu: Yeni projelerde string enum yerine as const ile sabit objeler kullanmak daha modern ve tree-shaking dostu bir yaklaşımdır:

const SIPARIS_DURUM = {
  Beklemede: "BEKLEMEDE",
  Kargoda: "KARGODA",
  TeslimEdildi: "TESLIM_EDILDI"
} as const;

type SiparisDurum = typeof SIPARIS_DURUM[keyof typeof SIPARIS_DURUM];

TypeScript Kurulumu ve Yapılandırma

TypeScript'i kullanmaya başlamak oldukça kolaydır. Adım adım gidelim.

Adım 1: TypeScript'i Kurun

# Global kurulum
npm install -g typescript

# Versiyon kontrolü
tsc --version

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

Adım 2: tsconfig.json Oluşturun

tsconfig.json dosyası TypeScript derleyicisinin ayarlarını içerir. Proje kök dizininde şu komutu çalıştırın:

tsc --init

Bu komut varsayılan bir tsconfig.json oluşturur. İşte modern bir web projesi için önerilen yapılandırma:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Kritik ayarlar: strict: true (tüm katı kontrolleri açar — mutlaka kullanın), target (çıktı JS versiyonu), outDir/rootDir (kaynak ve çıkış dizinleri), sourceMap (hata ayıklama haritası).

Adım 3: Yazın, Derleyin, Çalıştırın

src/index.ts dosyası oluşturun:

function selamla(isim: string): string {
  return `Merhaba, ${isim}! TypeScript dünyasına hoş geldin.`;
}
console.log(selamla("Dünya"));

tsc                      # TypeScript → JavaScript derleme
tsc --watch              # Her kayıtta otomatik derleme
node dist/index.js       # Çalıştırma

# Veya doğrudan çalıştırma (geliştirme için)
npx tsx src/index.ts

⚠️ Dikkat: Prodüksiyon ortamında önceden derlenmiş JavaScript dosyalarını kullanın. ts-node / tsx geliştirme aşaması içindir.

TypeScript vs JavaScript: Kapsamlı Karşılaştırma

İki dili yan yana koyalım:

Pratik Karşılaştırma: API İsteği

JavaScript ile — data'nın yapısı belirsiz, hatalar runtime'da çıkar:

async function kullanicilariGetir() {
  const response = await fetch("/api/kullanicilar");
  const data = await response.json();
  data.forEach(k => {
    console.log(k.isim);      // undefined olabilir!
    console.log(k.adres.il);  // TypeError riski!
  });
}

TypeScript ile — her şey tip güvenli:

interface Kullanici {
  id: number;
  isim: string;
  email: string;
  adres?: { sokak: string; il: string };
}

async function kullanicilariGetir(): Promise<Kullanici[]> {
  const response = await fetch("/api/kullanicilar");
  const data: Kullanici[] = await response.json();
  data.forEach(k => {
    console.log(k.isim);        // ✅ Tip güvenli
    console.log(k.adres?.il);   // ✅ Optional chaining
    // console.log(k.telefon);  // ❌ Derleme hatası!
  });
}

Kimler TypeScript Kullanıyor?

TypeScript artık küçük projelerin dili değil. Dünyanın en büyük teknoloji şirketleri ve popüler frameworkler TypeScript'i benimsedi.

Frameworkler ve Kütüphaneler

• Angular: Google'ın frameworkü, ilk günden TypeScript ile yazılmıştır. Angular projesi açtığınızda otomatik olarak TypeScript kullanırsınız.

• React Ecosystem: React'in kendisi JavaScript ile yazılmış olsa da, topluluk büyük ölçüde TypeScript'e geçti. Next.js, Remix gibi meta-frameworkler TypeScript'i varsayılan olarak destekler.

• Vue 3: Vue.js'in 3. versiyonu sıfırdan TypeScript ile yeniden yazıldı. Nuxt 3 de TypeScript-first yaklaşımını benimser.

• Deno: Node.js'in yaratıcısı Ryan Dahl'ın yeni runtime'ı, TypeScript'i doğal olarak çalıştırır — derleme adımına bile gerek yoktur.

• Svelte / SvelteKit: TypeScript desteği yerleşik olarak gelir.

• Nest.js: Node.js için enterprise-grade backend framework, tamamen TypeScript ile yazılmıştır.

• Prisma: Modern ORM, TypeScript tip güvenliğini veritabanı katmanına taşır.

Şirketler

Microsoft (VS Code), Google (Angular), Airbnb, Slack, Stripe, Shopify, Vercel (Next.js) ve daha birçok büyük teknoloji şirketi TypeScript'i standart olarak kullanıyor.

TypeScript'in Avantajları

1. Erken Hata Tespiti

Hataları canlı ortama çıkmadan yakalarsınız. Tip hataları, tanımsız değişkenler, yanlış fonksiyon çağrıları — hepsi derleme anında görünür.

2. Üstün IDE Deneyimi

VS Code + TypeScript birlikte kullanıldığında: akıllı otomatik tamamlama (IntelliSense), fonksiyon imza gösterimi, hata altı çizgisi, güvenli refactoring, Go to Definition ve Find All References — tüm bunlar yerleşik gelir.

3. Daha İyi Dokümantasyon

Tip tanımlamaları kodun kendisini dokümante eder. Parametreleri ve dönüş değerlerini görmek için ayrıca dokümantasyon okumaya gerek kalmaz.

4. Güvenli Refactoring

Bir interface'i değiştirdiğinizde, onu kullanan tüm noktalarda derleme hatası alırsınız. Hiçbir yeri atlamazsınız.

5. Ekip Üretkenliği

Tip tanımlamaları kodun "sözleşmesi" (contract) görevi görür. Ekip arkadaşınızın yazdığı kodu anlamak çok daha kolay hale gelir.

6. Kademeli Geçiş (Gradual Adoption)

Mevcut JavaScript projenize yavaş yavaş TypeScript dosyaları ekleyebilirsiniz. Sıfırdan yazmak zorunda değilsiniz.

TypeScript'in Dezavantajları

Dürüst olmak lazım — TypeScript mükemmel değil. İşte dikkat etmeniz gereken noktalar:

1. Öğrenme Eğrisi

Temel TypeScript hızlıca öğrenilir, ama Generics, Conditional Types gibi ileri konular zaman alabilir. Yatırım yapmaya değer bir eğridir.

2. Derleme Adımı

Build pipeline'a bir adım eklenir. Ancak Vite, esbuild, SWC gibi araçlar bunu milisaniyeler seviyesine indirmiştir.

3. Başlangıçta Yavaşlatabilir

Küçük script'ler veya prototipler için fazla gelebilir. Proje büyüdükçe bu "yavaşlık" kendini kat kat geri öder.

4. Üçüncü Parti Kütüphane Tipleri

Her npm paketi tip tanımlamaları ile gelmez. @types/ paketleri çoğunu kapsar ama bazen eksik veya güncel olmayan tiplerle karşılaşabilirsiniz.

5. Yanlış Güvenlik Hissi

TypeScript sadece derleme zamanında kontrol yapar. Dışarıdan gelen veriler için runtime doğrulaması (Zod, io-ts gibi kütüphaneler) hâlâ gereklidir.

6. Karmaşık Tip Tanımlamaları

Tip tanımlamaları kodun kendisinden daha karmaşık hale gelebilir. Pragmatik olun — %80 kapsama iyi bir hedeftir.

JavaScript'ten TypeScript'e Geçiş Stratejisi

Mevcut bir JavaScript projenizi TypeScript'e taşımak göz korkutucu görünebilir, ama doğru stratejiyle oldukça sorunsuz bir süreçtir.

Adım 1: Hazırlık

# TypeScript ve gerekli paketleri kurun
npm install --save-dev typescript @types/node

# tsconfig.json oluşturun — gevşek ayarlarla başlayın

Başlangıç tsconfig.json (gevşek mod):

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": false,
    "allowJs": true,
    "checkJs": false,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

Dikkat: allowJs: true — bu sayede .js ve .ts dosyaları bir arada çalışabilir.

Adım 2: Kademeli Dönüşüm

1. Kolay dosyalardan başlayın: Utility fonksiyonları, sabitler, küçük modüller

2. Dosya uzantısını değiştirin: .js → .ts

3. Temel tipleri ekleyin: Fonksiyon parametreleri ve dönüş değerleri

4. Interface'leri tanımlayın: Veri modelleri için

5. any kullanmaktan çekinmeyin (başlangıçta): Her şeyi bir anda tiplemeye çalışmayın

Adım 3: Strict Modu Açın

Dosyaların çoğunu dönüştürdükten sonra tsconfig.json'da strict ayarlarını kademeli olarak açın:

{
  "compilerOptions": {
    "strict": false,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true
  }
}

Önce noImplicitAny, sonra strictNullChecks, en son strict: true. Her adımda çıkan hataları düzeltin.

Adım 4: Tam Strict Mod

Tüm dosyalar dönüştürüldüğünde ve hatalar giderildikten sonra:

{
  "compilerOptions": {
    "strict": true,
    "allowJs": false
  }
}

Artık projeniz tamamen TypeScript! 🎉

💡 İpucu: Büyük projelerde bu geçiş aylar sürebilir — ve bu tamamen normal. Önemli olan her sprint'te birkaç dosya dönüştürmek ve asla geri adım atmamaktır.

IDE Desteği ve Araçlar

TypeScript deneyimini en iyi hale getiren araçlar:

Editörler

• VS Code (Önerilen) — TypeScript desteği yerleşik. Faydalı uzantılar: Pretty TypeScript Errors, Move TS, TypeScript Importer

• WebStorm / IntelliJ — Mükemmel refactoring araçları, ancak ücretli

Build Araçları

• Vite — Modern frontend için en hızlı build aracı, TypeScript yerleşik

• esbuild — Go ile yazılmış, milisaniyeler içinde derler

• SWC — Rust ile yazılmış, Next.js'in varsayılan derleyicisi

• tsx — ts-node'un modern alternatifi

Linting ve Formatlama

• ESLint + typescript-eslint — Kod kalite kontrolleri

• Prettier veya Biome — Kod formatlama

TypeScript Öğrenme Yol Haritası

TypeScript'i sıfırdan öğrenmek istiyorsanız, işte size adım adım bir yol haritası:

Seviye 1: Temel (1-2 Hafta)

• ✅ Temel tipler: string, number, boolean, array, object

• ✅ Fonksiyon tipleri ve dönüş değerleri

• ✅ Interface ve Type Alias

• ✅ Union ve Intersection types

• ✅ Type inference (tip çıkarımı)

• ✅ tsconfig.json ayarları

Seviye 2: Orta (2-4 Hafta)

• ✅ Generics

• ✅ Enum ve literal types

• ✅ Utility types: Partial, Required, Pick, Omit, Record

• ✅ Type narrowing ve type guards

• ✅ Module sistemi

• ✅ @types paketleri ve declaration files

Seviye 3: İleri (4-8 Hafta)

• ✅ Conditional types

• ✅ Mapped types

• ✅ Template literal types

• ✅ infer keyword

• ✅ Decorators

• ✅ Declaration merging

• ✅ Kendi utility type'larınızı yazma

Seviye 4: Uzman (Sürekli)

• ✅ Karmaşık generic yapılar

• ✅ TypeScript Compiler API

• ✅ Type-safe library tasarımı

• ✅ Monorepo'larda TypeScript yönetimi

• ✅ Performance optimizasyonu (type instantiation limitleri)

Her seviyede bol bol pratik yapın. Teoriyi okumak yetmez — kendi projelerinizde TypeScript kullanarak öğrenin.

📚 TypeScript'i gerçekten öğrenmek mi istiyorsunuz? [tolgahan.dev'de 60 derslik ücretsiz JavaScript & TypeScript kursu](/courses/javascript-typescript-sifirdan-ileri-seviyeye) sizi sıfırdan ileri seviyeye taşır. Temel JavaScript'ten başlayıp TypeScript'in en ileri konularına kadar her şeyi adım adım, pratik örneklerle öğrenirsiniz.

Sıkça Sorulan Sorular (SSS)

TypeScript öğrenmek için JavaScript bilmem gerekir mi?

Evet. TypeScript, JavaScript'in üzerine inşa edilmiş bir süper settir. Değişkenler, fonksiyonlar, objeler, Promise'ler gibi temelleri bilmeden TypeScript öğrenmeye çalışmak, yüzme bilmeden dalış kursuna gitmek gibidir. Önce sağlam bir JavaScript temeli edinin, sonra TypeScript'e geçin.

TypeScript performansı etkiler mi?

Hayır, runtime performansını etkilemez. TypeScript derlendikten sonra saf JavaScript'e dönüşür — runtime'da bir maliyeti yoktur. Tek "maliyet" derleme adımıdır, ama esbuild/SWC ile milisaniyeler seviyesindedir.

Küçük projeler için TypeScript gerekli mi?

Zorunlu değil, ama faydalıdır. Hızlı bir prototip için JavaScript yeterli olabilir. Ama "küçük" başlayan projeler büyüme eğilimindedir. TypeScript ile başlamak, ileride geçiş zahmetini ortadan kaldırır. Genel tavsiye: Yeni proje başlıyorsanız TypeScript ile başlayın.

TypeScript ile React kullanabilir miyim?

Evet, mükemmel çalışırlar. React topluluğunun büyük çoğunluğu TypeScript kullanıyor. Next.js, Vite gibi araçlar TypeScript template'leri ile gelir. Örnek:

interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: "primary" | "secondary";
  disabled?: boolean;
}

function Button({ label, onClick, variant = "primary", disabled }: ButtonProps) {
  return (
    <button 
      className={`btn btn-${variant}`} 
      onClick={onClick}
      disabled={disabled}
    >
      {label}
    </button>
  );
}

// ✅ Tip güvenli kullanım
<Button label="Gönder" onClick={() => console.log("tıklandı")} />

// ❌ Derleme hatası: 'variant' sadece "primary" | "secondary" olabilir
<Button label="Gönder" onClick={() => {}} variant="danger" />

TypeScript, JavaScript'in yerini alacak mı?

Hayır. TypeScript, JavaScript'i *tamamlayan* bir araçtır. Derlendikten sonra JavaScript olur — yani JavaScript her zaman var olmaya devam edecek. Ancak geliştirme sürecinde TypeScript giderek standart haline geliyor. JavaScript bilgisi temel olarak gerekli kalacak, ama TypeScript bilmek modern web geliştirme için neredeyse zorunlu bir beceri.

Sonuç

TypeScript, JavaScript ekosistemindeki en önemli gelişmelerden biridir. Statik tip sistemi, mükemmel IDE desteği ve geniş topluluk desteğiyle hem bireysel geliştiriciler hem de büyük ekipler için oyun değiştirici bir araçtır.

Özetleyelim:

• TypeScript = JavaScript + Statik Tip Sistemi — JavaScript bilginiz boşa gitmez

• Hataları erken yakalar — Canlı ortama çıkmadan sorunları görün

• IDE deneyimini üst seviyeye taşır — Otomatik tamamlama, refactoring, navigasyon

• Büyük projeler için vazgeçilmez — Ekip çalışması ve kod kalitesi

• Kademeli geçiş mümkün — Tüm projeyi bir anda değiştirmek zorunda değilsiniz

• Endüstri standardı — Angular, Next.js, Deno, Nest.js ve daha fazlası

Eğer JavaScript biliyorsanız ve kariyerinizi bir adım ileri taşımak istiyorsanız, TypeScript öğrenmek yapabileceğiniz en değerli yatırımlardan biridir.

🚀 Hemen başlamak ister misiniz? [tolgahan.dev'de 60 derslik ücretsiz JavaScript & TypeScript kursu](/courses/javascript-typescript-sifirdan-ileri-seviyeye) ile TypeScript'i sıfırdan ileri seviyeye kadar öğrenin. Teori ve pratiği bir arada, adım adım ilerleyin. Üstelik tamamen ücretsiz!