Skip to main content

⚙️ TypeScript Projesi Kurulumu: Temel Ayarlar ve En İyi Uygulamalar

📘 Bu Rehberde Ne Öğreneceksiniz?​

Bu rehber, size sıfırdan bağımsız bir TypeScript projesi kurulumu sürecini adım adım gösterecek.
tsconfig.json dosyasının yapılandırılmasını, npx tsc ile derleme işlemini ve Google TypeScript Style (GTS) ile kod standartlarını uygulamayı öğreneceksiniz.
Sonunda, hatasız, ölçeklenebilir ve modern bir TypeScript projesi kurabilecek hale geleceksiniz.

🧩 1️⃣ TypeScript Bağımlılığını Kurma ve Projeyi Başlatma​

Başlamadan önce, bilgisayarınızda Node.js ve npm kurulu olduğundan emin olun.

AçıklamaKomut
Yeni proje klasörü oluşturur ve içine girer.mkdir rabisu-ts-proje && cd rabisu-ts-proje
package.json dosyasını otomatik oluşturur.npm init -y
TypeScript’i yalnızca geliştirme ortamı için kurar.npm install --save-dev typescript
tsconfig.json dosyasını oluşturur.npx tsc --init

📘 Açıklama:
npx tsc --init, TypeScript derleyicisinin (TSC) çalışma kurallarını belirleyen tsconfig.json dosyasını oluşturur.

⚙️ 2️⃣ tsconfig.json Dosyasını Yapılandırma​

tsconfig.json, TypeScript derleyicisinin kodunuzu nasıl JavaScript’e dönüştüreceğini belirleyen dosyadır.

Aşağıdaki örnek yapı önerilen temel ayarlardır:

{
  "compilerOptions": {
    "target": "es2020",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./build",
    "strict": true,
    "esModuleInterop": true
  }
}

🧠 Önemli Parametreler:

"target" → Derlenecek JavaScript sürümü (örnek: "ES2022")

"module" → Modül sistemi ("NodeNext" veya "CommonJS")

"rootDir" → Kaynak TS dosyalarının klasörü ("./src")

"outDir" → Derlenmiş JS dosyalarının hedef klasörü ("./build")

"strict": true → Daha güvenli ve tip denetimli kod sağlar

💻 3️⃣ TypeScript Kodunu Yazma ve Derleme​

🔹 Kaynak Dosyayı Oluşturun​


mkdir src
echo "
const sunucuAdi: string = 'tr1-node01';
export function selamla(kim: string = sunucuAdi): string {
  return \`Merhaba, \${kim}!\`;
}
console.log(selamla());

" > src/index.ts

🔹 Derleme İşlemi​

Kodu JavaScript’e çevirmek için:


npx tsc

Derlenmiş dosya build/ klasörüne kaydedilir.

🔹 Çalıştırma​


node build/index.js

Çıktı:

Merhaba, tr1-node01!

🔹 Otomatik Derleme (Watch Mode)​

Kaydettiğinizde otomatik derleme yapmak için:


npx tsc -w

🧠 4️⃣ Google TypeScript Style (GTS) ile Kod Standartlarını Uygulama​

GTS, Google’ın resmi TypeScript kod stili, linter ve biçimlendirici aracıdır. Projeye entegre etmek için aşağıdaki adımları uygulayın:

🧩 Açıklama💻 Komut
GTS kütüphanesini kurar.npm install --save-dev gts
GTS yapılandırmasını projeye ekler.npx gts init
Kodunuzu derler ve kontrol eder.npm run compile && npm run check
Hataları otomatik düzeltir.npm run fix

🧩 GTS’nin Kazandırdıkları:

ESLint + Prettier yapılandırmasını otomatik ekler

Kod stili denetimi sağlar

Tutarlı bir tsconfig.json oluşturur

🧠 5️⃣ Hızlı Kurulum Komutu (Tüm Adımlar Tek Satırda)​

Zaman kazanmak istiyorsanız aşağıdaki komut, proje oluşturma ve yapılandırmayı tek adımda yapar:


npm init -y && npm i -D typescript ts-node eslint prettier @types/node && npx tsc --init

Bu komut:

TypeScript ve gerekli araçları yükler

tsconfig.json oluşturur

Geliştirici ortamını otomatik hazırlar

⚡ Performans ve Yapılandırma Önerileri​

⚙️ Ayar🧩 Açıklama💡 Önerilen Değer
"strict"Tip hatalarını erken tespit eder.true
"rootDir"TS kaynak dizini"./src"
"outDir"JS çıktı dizini"./build"
"skipLibCheck"Kütüphane tip denetimini hızlandırır.true

💡 Ek İpucu: Yeni sözlük veya obje oluştururken dict() yerine kullanmak gibi, TypeScript’te de derleyiciye özel optimizasyonlar performansı artırır.

💬 Sıkça Sorulan Sorular (SSS)​

  1. npx tsc ve npx ts-node arasındaki fark nedir?

npx tsc, TypeScript dosyalarını kalıcı .js dosyalarına çevirir. ts-node ise bellekte çalıştırır, diske yazmaz.

  1. tsconfig.json içinde en kritik ayar nedir?

"strict": true en önemli ayardır. Tip güvenliği sağlar, hataları erken fark etmenizi sağlar.

  1. Proje dizin yapısı nasıl olmalı?

src/ kaynak kodları, build/ derlenmiş çıktılar içindir. Bu ayrımı rootDir ve outDir ile belirleyin.

  1. TypeScript’i React veya Express ile nasıl kullanırım?

React için:


npx create-react-app my-app --template typescript

Express için:

npm i express @types/express @types/node
  1. Kod stillerini otomatik düzeltmek mümkün mü?

Evet, GTS ile npm run fix komutu kodunuzu biçimlendirir ve hataları düzeltir.

🎯 Sonuç​

Bu kılavuzda, sıfırdan bir TypeScript projesi kurmayı, tsconfig.json yapılandırmasını ve GTS ile kod kalitesini artırmayı öğrendiniz. Artık Node.js, Express veya React projelerinizde güçlü, ölçeklenebilir ve okunabilir TypeScript kodları yazabilirsiniz.