Bekir Karadeniz
Bekir Karadeniz
CTO
27.08.2025

TypeScript Temelleri: Başlangıçlar İçin Kapsamlı Rehber

TypeScriptJavaScriptProgramlamaWeb GeliştirmeTutorial
TypeScript Temelleri ve Programlama

TypeScript, JavaScript'in tip güvenli bir üst kümesi olarak, modern web geliştirmede güçlü bir araç haline gelmiştir. Bu kapsamlı rehber, TypeScript'in temellerini öğrenmenize ve güçlü, ölçeklenebilir uygulamalar geliştirmeye başlamanıza yardımcı olacaktır.

TypeScript Nedir?

TypeScript, Microsoft tarafından geliştirilen, JavaScript'e statik tip tanımları ekleyen açık kaynaklı bir programlama dilidir. JavaScript'in tüm özelliklerini içerir ve ek olarak tip güvenliği, daha iyi IDE desteği ve gelişmiş hata yakalama yetenekleri sağlar.

TypeScript'in Avantajları

  • Tip Güvenliği: Geliştirme aşamasında hataları yakalar
  • Daha İyi IDE Desteği: Gelişmiş otomatik tamamlama ve refactoring
  • Kod Okunabilirliği: Tip tanımları kodun anlaşılmasını kolaylaştırır
  • Ölçeklenebilirlik: Büyük projelerde daha iyi organize edilmiş kod
  • ES6+ Özellikleri: Modern JavaScript özelliklerini destekler

TypeScript Kurulumu

TypeScript'i kurmanın en kolay yolu npm kullanmaktır:

# Global kurulum
npm install -g typescript

# Proje bazında kurulum
npm install --save-dev typescript

# TypeScript derleyicisini çalıştırma
tsc dosya.ts

Temel Veri Tipleri

TypeScript'te temel veri tiplerini tanıyalım:

Primitif Tipler

// String tipi
let ad: string = "Bekir";
let soyad: string = 'Karadeniz';

// Number tipi
let yas: number = 30;
let pi: number = 3.14;

// Boolean tipi
let aktif: boolean = true;
let tamamlandi: boolean = false;

// Undefined ve null
let tanimsiz: undefined = undefined;
let bos: null = null;

Array (Dizi) Tipleri

// String dizisi
let isimler: string[] = ["Ali", "Veli", "Ayşe"];
let alternatifIsimler: Array<string> = ["Mehmet", "Fatma"];

// Number dizisi
let sayilar: number[] = [1, 2, 3, 4, 5];
let notlar: Array<number> = [85, 92, 78, 90];

// Mixed dizi (Union type)
let karisik: (string | number)[] = ["Ali", 25, "Veli", 30];

Değişken Tanımlama

Let, Const ve Var

// let - Block scope'da değiştirilebilir değişken
let kullaniciAdi: string = "admin";
kullaniciAdi = "user"; // ✅ Geçerli

// const - Değiştirilemez değişken
const API_URL: string = "https://api.example.com";
// API_URL = "başka url"; // ❌ Hata verir

// var - Function scope (kullanımı önerilmez)
var eskiDegisken: number = 10;

// Tip çıkarımı (Type Inference)
let otomatikTip = "Bu string olarak algılanır"; // string
let otomatikSayi = 42; // number
let otomatikBoolean = true; // boolean

Union ve Intersection Tipler

// Union tipi (| operatörü)
let kimlik: string | number;
kimlik = "TC123456789"; // ✅ Geçerli
kimlik = 123456789;     // ✅ Geçerli

// Fonksiyonda union tipi
function yazdir(deger: string | number): void {
    console.log(deger);
}

// Literal tipler
let durum: "başladı" | "devam ediyor" | "tamamlandı";
durum = "başladı"; // ✅ Geçerli
// durum = "beklemede"; // ❌ Hata

Fonksiyonlar

Temel Fonksiyon Tanımlama

// Basit fonksiyon
function selamla(ad: string): string {
    return `Merhaba, ${ad}!`;
}

// Arrow fonksiyon
const topla = (a: number, b: number): number => {
    return a + b;
};

// Opsiyonel parametreler
function kullaniciBilgisi(ad: string, soyad?: string): string {
    if (soyad) {
        return `${ad} ${soyad}`;
    }
    return ad;
}

// Varsayılan parametreler
function hesapla(deger: number, carpan: number = 2): number {
    return deger * carpan;
}

// Void fonksiyon (geri dönüş değeri yok)
function logYaz(mesaj: string): void {
    console.log(mesaj);
}

Fonksiyon Overload

// Fonksiyon overload tanımları
function birlestir(a: string, b: string): string;
function birlestir(a: number, b: number): number;

// Gerçek implementasyon
function birlestir(a: any, b: any): any {
    return a + b;
}

// Kullanım
let stringBirlestir = birlestir("Merhaba ", "Dünya"); // string
let sayiBirlestir = birlestir(5, 10); // number

Interface'ler

Interface'ler TypeScript'te nesne şekillerini tanımlamak için kullanılır:

Temel Interface Kullanımı

// Basit interface
interface Kullanici {
    ad: string;
    soyad: string;
    yas: number;
    email: string;
}

// Interface kullanımı
const kullanici: Kullanici = {
    ad: "Ahmet",
    soyad: "Yılmaz",
    yas: 28,
    email: "ahmet@example.com"
};

// Opsiyonel özellikler
interface Urun {
    ad: string;
    fiyat: number;
    aciklama?: string; // Opsiyonel
    stokta?: boolean;  // Opsiyonel
}

// Readonly özellikler
interface Ayarlar {
    readonly id: number;
    readonly olusturmaTarihi: Date;
    ad: string;
}

Interface Kalıtımı

// Temel interface
interface Hayvan {
    ad: string;
    yas: number;
}

// Interface kalıtımı
interface Kedi extends Hayvan {
    cinsi: string;
    miyavlar(): void;
}

// Çoklu kalıtım
interface UcanHayvan {
    kanatGenisligi: number;
    uc(): void;
}

interface Kartal extends Hayvan, UcanHayvan {
    avTipi: string;
}

// Interface implementasyonu
const kedi: Kedi = {
    ad: "Pamuk",
    yas: 3,
    cinsi: "Tekir",
    miyavlar() {
        console.log("Miyav!");
    }
};

Fonksiyon Interface'leri

// Fonksiyon interface'i
interface HesaplamaFonksiyonu {
    (a: number, b: number): number;
}

// Interface'i uygulayan fonksiyonlar
const topla: HesaplamaFonksiyonu = (x, y) => x + y;
const carp: HesaplamaFonksiyonu = (x, y) => x * y;

// Index signature
interface StringDictionary {
    [key: string]: string;
}

const sozluk: StringDictionary = {
    "merhaba": "hello",
    "tesekkurler": "thank you"
};

Class'lar (Sınıflar)

Temel Class Tanımlama

// Basit class
class Araba {
    // Özellikler (Properties)
    marka: string;
    model: string;
    yil: number;

    // Constructor
    constructor(marka: string, model: string, yil: number) {
        this.marka = marka;
        this.model = model;
        this.yil = yil;
    }

    // Metodlar
    bilgiVer(): string {
        return `${this.yil} ${this.marka} ${this.model}`;
    }

    calistir(): void {
        console.log("Araba çalıştırıldı!");
    }
}

// Class kullanımı
const arabam = new Araba("Toyota", "Corolla", 2022);
console.log(arabam.bilgiVer()); // "2022 Toyota Corolla"

Erişim Belirleyicileri

class BankaHesabi {
    // Public (varsayılan) - her yerden erişilebilir
    public hesapNo: string;
    
    // Private - sadece class içinden erişilebilir
    private bakiye: number;
    
    // Protected - class ve alt sınıflardan erişilebilir
    protected hesapTipi: string;

    constructor(hesapNo: string, ilkBakiye: number) {
        this.hesapNo = hesapNo;
        this.bakiye = ilkBakiye;
        this.hesapTipi = "Tasarruf";
    }

    // Public metod
    public bakiyeGoster(): number {
        return this.bakiye;
    }

    // Private metod
    private komisyonHesapla(): number {
        return this.bakiye * 0.01;
    }

    // Protected metod
    protected hesapBilgisi(): string {
        return `${this.hesapTipi}: ${this.hesapNo}`;
    }
}

Class Kalıtımı

// Temel sınıf
class Hayvan {
    protected ad: string;
    protected yas: number;

    constructor(ad: string, yas: number) {
        this.ad = ad;
        this.yas = yas;
    }

    sesCikar(): void {
        console.log("Hayvan ses çıkarıyor");
    }

    bilgiVer(): string {
        return `Ad: ${this.ad}, Yaş: ${this.yas}`;
    }
}

// Kalıtım (Inheritance)
class Köpek extends Hayvan {
    private cinsi: string;

    constructor(ad: string, yas: number, cinsi: string) {
        super(ad, yas); // Üst sınıfın constructor'ını çağır
        this.cinsi = cinsi;
    }

    // Metod override
    sesCikar(): void {
        console.log("Hav hav!");
    }

    // Yeni metod
    oyun(): void {
        console.log(`${this.ad} top oynuyor!`);
    }
}

// Kullanım
const kopegim = new Köpek("Karabaş", 3, "Golden Retriever");
kopegim.sesCikar(); // "Hav hav!"
kopegim.oyun();     // "Karabaş top oynuyor!"

Abstract Class'lar

// Abstract sınıf - doğrudan örneklenemez
abstract class Sekil {
    protected renk: string;

    constructor(renk: string) {
        this.renk = renk;
    }

    // Concrete metod
    renkGetir(): string {
        return this.renk;
    }

    // Abstract metod - alt sınıflarda mutlaka implement edilmeli
    abstract alanHesapla(): number;
    abstract cevreHesapla(): number;
}

// Abstract sınıfı extend eden concrete sınıf
class Daire extends Sekil {
    private yaricap: number;

    constructor(renk: string, yaricap: number) {
        super(renk);
        this.yaricap = yaricap;
    }

    alanHesapla(): number {
        return Math.PI * this.yaricap * this.yaricap;
    }

    cevreHesapla(): number {
        return 2 * Math.PI * this.yaricap;
    }
}

const daire = new Daire("kırmızı", 5);
console.log(daire.alanHesapla()); // 78.54

Generics (Jenerikler)

Generics, tip güvenliğini koruyarak yeniden kullanılabilir bileşenler oluşturmanızı sağlar:

// Generic fonksiyon
function kimlik<T>(arg: T): T {
    return arg;
}

// Kullanım
let stringKimlik = kimlik<string>("merhaba");
let sayiKimlik = kimlik<number>(42);

// Generic interface
interface Cevap<T> {
    data: T;
    durum: string;
    mesaj: string;
}

// Farklı tiplerle kullanım
const stringCevap: Cevap<string> = {
    data: "Başarılı",
    durum: "200",
    mesaj: "İşlem tamamlandı"
};

const kullaniciCevap: Cevap<Kullanici> = {
    data: {
        ad: "Ali",
        soyad: "Veli",
        yas: 25,
        email: "ali@example.com"
    },
    durum: "200",
    mesaj: "Kullanıcı getirildi"
};

// Generic class
class Kutu<T> {
    private icerik: T;

    constructor(icerik: T) {
        this.icerik = icerik;
    }

    icerikGetir(): T {
        return this.icerik;
    }

    icerikAyarla(icerik: T): void {
        this.icerik = icerik;
    }
}

const stringKutu = new Kutu<string>("Merhaba");
const sayiKutu = new Kutu<number>(123);

Enum'lar

// Numeric enum
enum Yön {
    Yukari,    // 0
    Asagi,     // 1
    Sol,       // 2
    Sag        // 3
}

// String enum
enum Durum {
    Beklemede = "BEKLEMEDE",
    Isleniyor = "ISLENIYOR",
    Tamamlandi = "TAMAMLANDI",
    Hata = "HATA"
}

// Computed enum
enum Dosya {
    None = 0,
    Read = 1 << 1,    // 2
    Write = 1 << 2,   // 4
    ReadWrite = Read | Write  // 6
}

// Kullanım
let mevcut Durum = Durum.Beklemede;
let hareket = Yön.Yukari;

function durumKontrol(durum: Durum): string {
    switch (durum) {
        case Durum.Beklemede:
            return "İşlem bekleniyor";
        case Durum.Isleniyor:
            return "İşlem devam ediyor";
        case Durum.Tamamlandi:
            return "İşlem tamamlandı";
        default:
            return "Bilinmeyen durum";
    }
}

Type Aliases ve Utility Types

Type Aliases

// Type alias
type KullaniciID = string | number;
type KullaniciRolu = "admin" | "kullanici" | "moderator";

type Kullanici = {
    id: KullaniciID;
    ad: string;
    rol: KullaniciRolu;
    aktif: boolean;
};

// Union type alias
type StringOrNumber = string | number;
type EventHandler = () => void;

// Function type alias
type HesaplamaFonksiyonu = (a: number, b: number) => number;

const topla: HesaplamaFonksiyonu = (x, y) => x + y;

Utility Types

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

// Partial - Tüm özellikleri opsiyonel yapar
type KismiUrun = Partial<Urun>;
const guncelleme: KismiUrun = { fiyat: 100 }; // Sadece fiyat

// Required - Tüm özellikleri zorunlu yapar
type TamUrun = Required<Urun>;

// Pick - Belirli özellikleri seçer
type UrunOzeti = Pick<Urun, "id" | "ad">;
const ozet: UrunOzeti = { id: 1, ad: "Laptop" };

// Omit - Belirli özellikleri çıkarır
type UrunBilgisi = Omit<Urun, "id">;
const yeniUrun: UrunBilgisi = {
    ad: "Mouse",
    fiyat: 50,
    aciklama: "Kablosuz mouse"
};

// Record - Anahtar-değer çiftleri oluşturur
type UlkeCurrency = Record<string, string>;
const paraBirimleri: UlkeCurrency = {
    "TR": "TRY",
    "US": "USD",
    "EU": "EUR"
};

Modules ve Namespaces

ES6 Modules

// math.ts - Export örnekleri
export const PI = 3.14159;

export function topla(a: number, b: number): number {
    return a + b;
}

export class Hesap Makinesi {
    topla(a: number, b: number): number {
        return a + b;
    }
}

// Default export
export default function carp(a: number, b: number): number {
    return a * b;
}

// main.ts - Import örnekleri
import carp, { PI, topla, HesapMakinesi } from './math';
import * as MathUtils from './math';

console.log(PI); // 3.14159
console.log(topla(5, 3)); // 8
console.log(carp(4, 2)); // 8

const hesaplayici = new HesapMakinesi();
console.log(hesaplayici.topla(10, 5)); // 15

Temel Komutlar ve CLI

TypeScript Compiler (tsc) Komutları

# Tek dosya derleme
tsc dosya.ts

# Tüm TypeScript dosyalarını derleme
tsc

# Watch mode (değişiklikleri otomatik derle)
tsc --watch
tsc -w

# Belirli target versiyonu
tsc --target ES2020 dosya.ts

# Output dizini belirtme
tsc --outDir dist src/*.ts

# Source map oluşturma
tsc --sourceMap dosya.ts

# Strict mode
tsc --strict dosya.ts

# Tip kontrolü yapmadan derleme
tsc --noEmitOnError false dosya.ts

tsconfig.json Yapılandırması

{
  "compilerOptions": {
    // Target JavaScript versiyonu
    "target": "ES2020",
    
    // Module sistemi
    "module": "commonjs",
    
    // Output dizini
    "outDir": "./dist",
    
    // Root dizin
    "rootDir": "./src",
    
    // Strict tip kontrolü
    "strict": true,
    
    // ES6 import/export desteği
    "esModuleInterop": true,
    
    // Skip lib check
    "skipLibCheck": true,
    
    // Force consistent casing
    "forceConsistentCasingInFileNames": true,
    
    // Source map üretimi
    "sourceMap": true,
    
    // Implicit any'e izin verme
    "noImplicitAny": true,
    
    // Kullanılmayan locals kontrolü
    "noUnusedLocals": true,
    
    // DOM tip tanımları
    "lib": ["ES2020", "DOM"]
  },
  
  // Dahil edilecek dosyalar
  "include": [
    "src/**/*"
  ],
  
  // Hariç tutulacak dosyalar
  "exclude": [
    "node_modules",
    "dist"
  ]
}

En İyi Uygulamalar

Kod Yazma İlkeleri

  • Strict Mode Kullanın: tsconfig.json'da strict: true ayarını açın
  • Anlamlı İsimler: Değişken ve fonksiyon isimleri açıklayıcı olsun
  • Interface vs Type: Nesne şekilleri için interface, union/primitive için type kullanın
  • Readonly Kullanımı: Değişmemesi gereken veriler için readonly kullanın
  • Optional Chaining: `?.` operatörünü güvenli erişim için kullanın
// İyi örnekler
interface KullaniciBilgileri {
    readonly id: number;
    ad: string;
    email?: string; // Opsiyonel
}

// Optional chaining kullanımı
const kullanici: KullaniciBilgileri | null = getKullanici();
console.log(kullanici?.email?.toLowerCase());

// Type guards
function isString(value: unknown): value is string {
    return typeof value === 'string';
}

// Assert kullanımı (dikkatli kullanın)
const element = document.getElementById('myDiv') as HTMLDivElement;

Sonuç

TypeScript, JavaScript geliştirme deneyiminizi önemli ölçüde geliştirebilecek güçlü bir araçtır. Bu rehberde öğrendiğiniz temel kavramlar, sağlam TypeScript uygulamaları geliştirmenin temelini oluşturur.

Programlama yolculuğunuzda TypeScript'i öğrenmek, sadece daha güvenli kod yazmanızı sağlamakla kalmaz, aynı zamanda modern web geliştirme ekosisteminde daha etkili olmanızı da sağlar. React, Angular, Vue.js gibi popüler framework'ler TypeScript desteği sunarak, öğrendiğiniz bilgileri geniş bir yelpazede kullanabilirsiniz.

"TypeScript öğrenmek, sadece bir dil öğrenmek değil, daha iyi bir geliştirici olmaktır. Tip güvenliği ve araç desteği, kodunuzun kalitesini ve geliştirme hızınızı artırır."
TypeScript Temelleri: Başlangıçlar İçin Kapsamlı Rehber | HRSP Blog