TypeScript ve Visual Studio Code Kurulumu

Günümüz web geliştirme dünyasında, büyük ve karmaşık uygulamaların yönetimi giderek daha zorlu hale gelmektedir. JavaScript’in esnek yapısı, bazen beklenmedik hatalara ve bakım zorluklarına yol açabilir. İşte tam bu noktada TypeScript devreye girer. TypeScript, JavaScript’e statik tip denetimi ekleyerek kodunuzu daha güvenli, daha okunabilir ve daha sürdürülebilir hale getiren bir süper kümesidir. Visual Studio Code (VS Code) ise, TypeScript ile çalışmak için adeta biçilmiş kaftan olan, Microsoft tarafından geliştirilmiş popüler ve ücretsiz bir kod düzenleyicidir. Bu rehberde, TypeScript’i Visual Studio Code ile nasıl etkili bir şekilde kullanacağınızı, kurulumdan gelişmiş özelliklere kadar adım adım öğreneceksiniz.

TypeScript ve Visual Studio Code Kurulumu

TypeScript ile geliştirme yapmaya başlamadan önce, gerekli araçları kurmanız gerekmektedir. Visual Studio Code, TypeScript için mükemmel bir entegrasyon sunar ve çoğu özelliği kutudan çıktığı gibi destekler.

Node.js ve npm Kurulumu

TypeScript derleyicisi (tsc) bir Node.js paketi olarak dağıtıldığı için, sisteminizde Node.js ve paket yöneticisi npm’in kurulu olması gerekmektedir. Eğer kurulu değilse, Node.js resmi web sitesinden işletim sisteminize uygun sürümü indirip kurabilirsiniz. Kurulumdan sonra, terminalinizde aşağıdaki komutları çalıştırarak Node.js ve npm’in doğru bir şekilde kurulduğunu doğrulayabilirsiniz:

node -v
npm -v

Visual Studio Code Kurulumu

Visual Studio Code’u henüz yüklemediyseniz, VS Code resmi web sitesinden indirip kurun. VS Code, TypeScript için yerleşik destek sunar, bu nedenle ek bir eklenti yüklemenize gerek kalmaz. Ancak, geliştirme deneyiminizi daha da zenginleştirecek bazı eklentileri daha sonra önereceğiz.

TypeScript Derleyicisi Kurulumu

TypeScript derleyicisini global olarak kurmak, herhangi bir dizinde tsc komutunu kullanmanıza olanak tanır. Terminalinizde aşağıdaki komutu çalıştırın:

npm install -g typescript

Bu, TypeScript’in en son sürümünü sisteminize yükleyecektir. Kurulumun başarılı olduğunu doğrulamak için:

tsc -v

Bu komut, kurulu TypeScript derleyicisinin sürümünü gösterecektir.

İlk TypeScript Projenizi Oluşturma

Şimdi temel kurulumları tamamladığımıza göre, ilk TypeScript projenizi VS Code içinde nasıl oluşturacağınızı ve yapılandıracağınızı görelim.

Proje Klasörü Oluşturma

Öncelikle, yeni projeniz için bir klasör oluşturun ve bu klasöre terminal üzerinden gidin:

mkdir my-ts-app
cd my-ts-app

package.json Oluşturma

Projenizin bağımlılıklarını ve betiklerini yönetmek için bir package.json dosyasına ihtiyacınız olacak. Bunu hızlıca oluşturmak için:

npm init -y

TypeScript’i Projeye Ekleme

Global olarak kurmuş olsak da, her projenin kendi TypeScript sürümünü yönetmesi iyi bir pratiktir. Böylece farklı projeler farklı TypeScript sürümlerini kullanabilir. TypeScript’i projenize geliştirme bağımlılığı olarak ekleyin:

npm install --save-dev typescript

tsconfig.json Yapılandırması

tsconfig.json dosyası, TypeScript derleyicisinin projenizi nasıl derlemesi gerektiğini belirleyen yapılandırma dosyasıdır. Bu dosyayı otomatik olarak oluşturmak için:

npx tsc --init

Bu komut, projenizin kök dizinine bir tsconfig.json dosyası ekleyecektir. Bu dosya birçok yorum satırı içerir ve çeşitli derleyici seçeneklerini gösterir. Temel olarak kullanacağınız bazı önemli seçenekler şunlardır:

• "target": "es2016": TypeScript kodunuzun hangi ECMAScript sürümüne derleneceğini belirtir. Genellikle daha yeni bir sürüm tercih edilir.
• "module": "commonjs": Derlenen JavaScript kodunun hangi modül sistemini kullanacağını belirtir (örn. CommonJS, ESNext).
• "outDir": "./dist": Derlenen JavaScript dosyalarının hangi dizine kaydedileceğini belirtir.
• "rootDir": "./src": TypeScript kaynak dosyalarının bulunduğu kök dizini belirtir.
• "strict": true: Tüm katı tip denetim seçeneklerini etkinleştirir. Bu, daha güvenli kod yazmak için şiddetle tavsiye edilir.
• "esModuleInterop": true: CommonJS modüllerinden ES modüllerine daha iyi uyumluluk sağlar.

Örnek bir tsconfig.json:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "src//*"
  ],
  "exclude": [
    "node_modules",
    "/*.spec.ts"
  ]
}

İlk TypeScript Dosyası

Şimdi src adında bir klasör oluşturun ve içine app.ts adında bir dosya ekleyin. Bu, ilk TypeScript kodunuzu içerecektir:

// src/app.ts
function greet(person: string) {
  return Merhaba, ${person}!;
}

let user = "Alice";
console.log(greet(user));

// Bir hata örneği: Sayı bekleyen yere string göndermek
// let age: number = "otuz"; // VS Code hemen hata verecektir!

// Tip çıkarımı (Type Inference)
let message = "TypeScript harika!"; // message otomatik olarak string tipinde olur
// message = 123; // Hata: 'number' tipindeki değer 'string' tipine atanamaz.

interface User {
    id: number;
    name: string;
    email?: string; // Opsiyonel özellik
}

const newUser: User = {
    id: 1,
    name: "Bob",
    // email: "bob@example.com" // Opsiyonel olduğu için yazmasak da olur
};

console.log(Kullanıcı: ${newUser.name} (ID: ${newUser.id}));

VS Code’da bu dosyayı açtığınızda, TypeScript’in yerleşik dil servisleri sayesinde anında tip hatalarını (örneğin age değişkenindeki hatayı) göreceksiniz. Ayrıca, değişkenlerin üzerine geldiğinizde tip bilgilerini ve otomatik tamamlama (IntelliSense) önerilerini de fark edeceksiniz.

TypeScript Temelleri ve VS Code Desteği

TypeScript’in temel yapı taşlarını ve VS Code’un bu temelleri nasıl desteklediğini inceleyelim.

Tip Tanımlamaları (Type Annotations)

TypeScript’in en temel özelliği, değişkenlere, fonksiyon parametrelerine ve dönüş değerlerine tip tanımlamaları ekleyebilmenizdir. VS Code, bu tip tanımlamalarını kullanarak size anında geri bildirim sağlar.

let userName: string = "Ayşe";
let userAge: number = 30;
let isActive: boolean = true;
let anything: any = "bu herhangi bir tip olabilir";

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

// VS Code, 'a' veya 'b' parametresine string geçmeye çalıştığınızda hata verecektir.
// calculateSum("1", 2); // Argument of type 'string' is not assignable to parameter of type 'number'.

VS Code, kodunuzu yazarken tip uyumsuzluklarını kırmızı dalgalı çizgilerle vurgular ve fare imlecinizi hatanın üzerine getirdiğinizde detaylı hata mesajları sunar. Bu, hataları derleme aşamasından önce, yani geliştirme aşamasında yakalamanızı sağlar.

Arayüzler (Interfaces) ve Tipler (Types)

Karmaşık veri yapılarını tanımlamak için arayüzleri (interfaces) ve tipleri (types) kullanırız. VS Code, bu yapıları anlar ve otomatik tamamlama ile tip kontrolünde size yardımcı olur.

interface Product {
  id: number;
  name: string;
  price: number;
  description?: string; // Opsiyonel özellik
}

type UserProfile = {
  username: string;
  email: string;
  age: number;
};

const myProduct: Product = {
  id: 101,
  name: "Laptop",
  price: 1200
};

const adminUser: UserProfile = {
  username: "admin",
  email: "admin@example.com",
  age: 40
};

// myProduct.price = "oniki yüz"; // Hata: 'string' tipindeki değer 'number' tipine atanamaz.
// VS Code, myProduct. derken id, name, price, description önerilerini sunacaktır.

Sınıflar (Classes)

TypeScript, ECMAScript 2015 (ES6) ile tanıtılan sınıfları destekler ve bunlara tip güvenliği ve erişim belirleyiciler (public, private, protected) gibi ek özellikler getirir.

class Animal {
  private name: string; // Sadece sınıf içinden erişilebilir
  protected species: string; // Sınıf ve alt sınıflarından erişilebilir

  constructor(name: string, species: string) {
    this.name = name;
    this.species = species;
  }

  public makeSound(sound: string): void {
    console.log(${this.name} (${this.species}) makes a ${sound} sound.);
  }
}

class Dog extends Animal {
  constructor(name: string) {
    super(name, "Dog");
  }

  bark(): void {
    this.makeSound("Woof");
  }
}

const myDog = new Dog("Buddy");
myDog.bark();
// myDog.name; // Hata: 'name' özelliği 'private' olduğundan erişilemez.
// myDog.species; // Hata: 'species' özelliği 'protected' olduğundan erişilemez.

VS Code, sınıf üyelerini ve metotlarını otomatik olarak tamamlar, erişim belirleyicilere göre erişilebilirlik hatalarını gösterir ve kalıtım hiyerarşisini anlamanıza yardımcı olur.

Derleme ve Çalıştırma

TypeScript kodunuzu doğrudan tarayıcıda veya Node.js ortamında çalıştıramazsınız. Önce onu JavaScript’e derlemeniz gerekir.

Terminalde, projenizin kök dizinindeyken aşağıdaki komutu çalıştırın:

npx tsc

Bu komut, tsconfig.json dosyanızdaki ayarlara göre src klasöründeki tüm TypeScript dosyalarını derleyecek ve çıktıları dist klasörüne (veya outDir olarak belirttiğiniz yere) JavaScript dosyaları olarak kaydedecektir. Örneğin, src/app.ts dosyanız dist/app.js olarak derlenecektir.

Derlenen JavaScript dosyasını çalıştırmak için:

node dist/app.js

Geliştirme sürecini hızlandırmak için package.json dosyanıza betikler ekleyebilirsiniz:

{
  "name": "my-ts-app",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/app.js",
    "dev": "tsc --watch & node dist/app.js" // Geliştirme için izleme modu
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^5.0.0"
  }
}

Şimdi terminalde npm run build ile derleyebilir ve npm run start ile çalıştırabilirsiniz. npm run dev ile hem dosyalarınızı izleyebilir (tsc --watch) hem de uygulamanızı çalıştırabilirsiniz. VS Code’un entegre terminali (Ctrl+ veya Cmd+) bu komutları çalıştırmak için mükemmeldir.

VS Code Gelişmiş Özellikleri ve Verimlilik İpuçları

Visual Studio Code, TypeScript ile çalışırken verimliliğinizi artıracak birçok gelişmiş özellik sunar.

Hata Ayıklama (Debugging)

VS Code’un yerleşik hata ayıklayıcısı, TypeScript kodunuzu doğrudan hata ayıklamanıza olanak tanır. Tarayıcıda veya Node.js ortamında çalışan kodunuz için kolayca hata ayıklama yapılandırmaları oluşturabilirsiniz.

1. app.ts dosyanızda bir satıra tıklayarak bir kesme noktası (breakpoint) belirleyin.
2. Sol taraftaki “Run and Debug” (Çalıştır ve Hata Ayıkla) simgesine tıklayın.
3. “create a launch.json file” (launch.json dosyası oluştur) seçeneğine tıklayın ve “Node.js” ortamını seçin. Bu, projenizin .vscode klasörüne bir launch.json dosyası ekleyecektir.
4. program özelliğini "${workspaceFolder}/dist/app.js" olarak güncelleyin (eğer ana dosyanız buysa).
5. F5 tuşuna basarak veya “Start Debugging” (Hata Ayıklamayı Başlat) düğmesine tıklayarak hata ayıklamayı başlatın.

Kodunuz kesme noktasına ulaştığında duracak ve değişkenlerin değerlerini inceleyebilir, adımlayabilir ve çağrı yığınını görebilirsiniz. VS Code’un bu özelliği, karmaşık hataları bulmak için vazgeçilmezdir.

Örnek .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "skipFiles": [
        "/"
      ],
      "program": "${workspaceFolder}/dist/app.js",
      "preLaunchTask": "tsc: build - tsconfig.json", // Hata ayıklamadan önce derleme yapar
      "outFiles": [
        "${workspaceFolder}/dist//*.js"
      ]
    }
  ]
}

Kod Düzenleme ve Refactoring

VS Code, TypeScript’in dil hizmetlerinden tam olarak yararlanarak kod düzenleme ve yeniden düzenleme (refactoring) araçları sunar:

• IntelliSense: Otomatik tamamlama, parametre bilgisi, hızlı bilgi ve üye listeleri, kod yazarken size rehberlik eder.
• Hata ve Uyarılar: Tip hataları ve potansiyel sorunlar anında vurgulanır.
• Hızlı Düzeltmeler (Quick Fixes): Hata ışığına tıklayarak veya Ctrl+. (Windows/Linux) / Cmd+. (macOS) tuşlarına basarak önerilen düzeltmeleri görebilirsiniz. Örneğin, eksik bir import’u otomatik olarak ekleyebilir.
• Yeniden Adlandırma (Rename Symbol): Bir sembolü (değişken, fonksiyon, sınıf) yeniden adlandırdığınızda, VS Code projenin tamamında ilgili tüm kullanımları günceller.
• Kodu Formatlama (Format Document): Shift+Alt+F (Windows/Linux) / Shift+Option+F (macOS) ile kodunuzu otomatik olarak formatlayabilirsiniz.

Görevler (Tasks)

VS Code, derleme, test çalıştırma gibi yaygın geliştirme görevlerini otomatikleştirmek için “Görevler” (Tasks) özelliğini kullanmanıza olanak tanır. Ctrl+Shift+B (Windows/Linux) / Cmd+Shift+B (macOS) ile derleme görevini çalıştırabilirsiniz.

Bir TypeScript derleme görevi otomatik olarak oluşturulur. İsterseniz .vscode/tasks.json dosyasını kendiniz de düzenleyebilirsiniz:

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "option": "watch", // Dosya değişikliklerini izler
      "problemMatcher": [
        "$tsc-watch"
      ],
      "group": "build",
      "label": "tsc: watch - tsconfig.json"
    },
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": [
        "$tsc"
      ],
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "label": "tsc: build - tsconfig.json"
    }
  ]
}

Eklentiler ve Entegrasyonlar

VS Code’un gücünü artıran birçok eklenti bulunmaktadır:

• ESLint: TypeScript ile de kullanılabilen popüler bir linting aracıdır. Kod kalitesini ve tutarlılığını sağlamak için TypeScript ESLint eklentilerini (@typescript-eslint/parser, @typescript-eslint/eslint-plugin) kullanabilirsiniz.
• Prettier: Kodunuzu otomatik olarak belirli bir stile göre formatlayan bir kod formatlayıcıdır. ESLint ile birlikte kullanıldığında çok güçlüdür.
• Git Entegrasyonu: VS Code, yerleşik Git entegrasyonu sayesinde versiyon kontrolünü kolaylaştırır. Değişiklikleri görsel olarak takip edebilir, commit yapabilir ve dallar arasında geçiş yapabilirsiniz.

Sonuç

TypeScript, modern JavaScript geliştirmesinde devrim niteliğinde bir araçtır. Statik tip kontrolü, geliştirme sürecindeki hataları en aza indirirken, kodunuzun daha anlaşılır ve bakımı kolay olmasını sağlar. Visual Studio Code ise, TypeScript için sunduğu kapsamlı dil hizmetleri, akıllı otomatik tamamlama, entegre hata ayıklayıcı ve zengin eklenti ekosistemi ile bu deneyimi zirveye taşır. Bu rehberde öğrendiğiniz kurulum adımları, temel özellikler ve gelişmiş ipuçları sayesinde, TypeScript projelerinizi VS Code ile verimli bir şekilde geliştirmeye başlayabilir ve yazılım kalitenizi önemli ölçüde artırabilirsiniz. TypeScript ve VS Code’un bu güçlü kombinasyonu, her seviyeden geliştirici için vazgeçilmez bir araç takımıdır.

SSS (Sıkça Sorulan Sorular)

TypeScript’i JavaScript ile birlikte kullanabilir miyim?

Evet, kesinlikle! TypeScript, aşamalı olarak benimsenecek şekilde tasarlanmıştır. Mevcut bir JavaScript projesine yavaş yavaş TypeScript dosyaları ekleyebilir ve bunları JavaScript ile yan yana derleyip çalıştırabilirsiniz. TypeScript, JavaScript dosyalarını da anlayabilir ve tip çıkarımı yapabilir.

any tipi ne zaman kullanılmalı?

any tipi, TypeScript’in tip denetimini tamamen devre dışı bırakır. Genellikle aşağıdaki durumlarda kullanılır:

• Mevcut bir JavaScript kütüphanesiyle entegre olurken ve o kütüphane için tip tanımlamaları (@types/ paketleri) mevcut değilse.
• Veri yapısını tam olarak bilmediğiniz veya bilmenizin çok zor olduğu durumlarda (örneğin, dinamik API yanıtları).
• Hızlı prototipleme yaparken.

Ancak, any kullanımı tip güvenliğini ortadan kaldırdığı için mümkün olduğunca kaçınılmalı veya geçici çözümler olarak görülmelidir.

interface ve type arasındaki temel fark nedir?

Hem interface hem de type karmaşık veri yapılarını tanımlamak için kullanılır, ancak bazı farkları vardır:

• Genişletilebilirlik: interface‘ler aynı isimde birden fazla kez tanımlanabilir ve TypeScript bunları otomatik olarak birleştirir (declaration merging). type‘lar ise bir kez tanımlanır ve birleştirilemez.
• Kullanım Alanı: interface‘ler genellikle nesne şekillerini ve sınıfların uyguladığı sözleşmeleri tanımlamak için tercih edilir. type‘lar ise nesne şekillerinin yanı sıra ilkel tipleri (type ID = string | number;), birleşim tiplerini (union types), kesişim tiplerini (intersection types) ve tuple tiplerini tanımlamak için daha esnektir.

Çoğu durumda, nesne şekilleri tanımlamak için interface kullanmak iyi bir başlangıçtır. Daha karmaşık tip manipülasyonları gerektiğinde type kullanmayı düşünebilirsiniz.

TypeScript’i hangi projelerde kullanmalıyım?

TypeScript, özellikle aşağıdaki türdeki projelerde büyük fayda sağlar:

• Büyük Ölçekli Uygulamalar: Kod tabanı büyüdükçe, tip denetimi hataları yakalamayı ve kodun anlaşılmasını kolaylaştırır.
• Ekip Çalışması: Farklı geliştiricilerin aynı kod tabanı üzerinde çalışırken tutarlılık sağlar ve yanlış anlamaları azaltır.
• Uzun Ömürlü Projeler: Uzun vadede kodun bakımı ve refactoring’i kolaylaşır.
• API Geliştirme (Node.js): Sunucu tarafında da tip güvenliği sağlayarak daha sağlam API’ler oluşturmanıza yardımcı olur.
• Kütüphane Geliştirme: Diğer geliştiricilerin kütüphanenizi daha kolay ve doğru bir şekilde kullanmasını sağlar.

VS Code’da TypeScript hatalarını nasıl gizleyebilirim?

Genellikle TypeScript hatalarını gizlemek iyi bir uygulama değildir, çünkü tip denetiminin temel amacı hataları erken yakalamaktır. Ancak, belirli durumlarda (örneğin, eski bir JavaScript dosyasını aşamalı olarak TypeScript’e geçirirken) hataları geçici olarak görmezden gelmek isteyebilirsiniz:

• Tek bir dosya için: Dosyanın başına // @ts-nocheck ekleyerek o dosyadaki tüm tip denetimini devre dışı bırakabilirsiniz.
• Belirli bir satır için: // @ts-ignore veya // @ts-expect-error yorumlarını kullanarak sonraki satırdaki tip hatasını yoksayabilirsiniz.
• tsconfig.json ayarları: "noImplicitAny": false veya "strict": false gibi ayarları kapatmak, daha az katı tip denetimine yol açar, ancak bu genellikle önerilmez. Ayrıca "exclude" bölümüne belirli dosyaları veya klasörleri ekleyerek derleme dışı bırakabilirsiniz.

Unutmayın, bu yöntemler genellikle geçici çözümlerdir ve mümkün olduğunca tip hatalarını düzeltmeye çalışmalısınız.