TypeScript Derleyici ve Ayarları

TypeScript ile yazılım geliştirmeye başladığında, sadece kod yazmak yetmez. Kodlarının nasıl çalıştırılacağını, nasıl derleneceğini ve nasıl düzenli tutulacağını da bilmen gerekir. İşte burada devreye TypeScript derleyicisi (compiler) ve onun ayar dosyası olan tsconfig.json girer.

Bu yazıda, TypeScript’te derleme işleminin nasıl yapıldığını ve tsconfig.json ile projeyi nasıl yapılandırabileceğini öğreneceksin.

TypeScript Dosyası Nasıl Derlenir?

TypeScript ile yazılan .ts uzantılı dosyalar, tarayıcılar tarafından doğrudan çalıştırılamaz. Bunun yerine önce JavaScript’e çevrilmesi gerekir. Bu çevirmeye derleme (compile) denir.

Derleme komutu:

tsc index.ts

Bu komutu yazdığında, bulunduğun klasörde index.js adında bir JavaScript dosyası oluşur. Artık bu dosya, tarayıcı ya da Node.js tarafından çalıştırılabilir hale gelmiştir.

ECMAScript (ES) Sürüm Ayarı Nedir?

JavaScript’in her yıl yeni sürümleri çıkıyor. Bu sürümler ES5, ES6, ES2020 gibi isimlerle anılıyor. Her sürümde yeni özellikler ekleniyor.

TypeScript ile çalışırken yazdığın kodun hangi ES sürümüne göre derleneceğini belirlemek önemlidir. Çünkü eski tarayıcılar modern ES sürümlerini desteklemeyebilir.

Örnek:

"target": "ES6"

Bu satır, TypeScript’in kodunu ES6 uyumlu JavaScript’e çevireceğini söyler.

ES5 en güvenli ama eski, ES6 ve sonrası daha modern sözdizimlerini destekler.

tsconfig.json Dosyası: Ayarların Merkezi

Tek tek dosyaları derlemek yerine, projenin tüm ayarlarını tek bir yerden yönetmek istersen tsconfig.json dosyasını kullanırsın.

Oluşturmak için terminale şunu yaz:

tsc --init

Bu komut sana varsayılan ayarlarla dolu bir tsconfig.json dosyası oluşturur.

Bu dosya sayesinde:

• Hangi klasördeki dosyaların derleneceğini,
• Derleme sonucunun nereye yazılacağını,
• Yorumların silinip silinmeyeceğini,
• Hatalı dosyaların derlenip derlenmeyeceğini … gibi birçok şeyi kontrol edebilirsin.

outDir: Derlenen Dosyalar Nereye Gitsin?

Varsayılan olarak .ts dosyasını derlediğinde .js çıktısı aynı klasöre gelir. Ancak büyük projelerde bu karışıklığa neden olabilir.

Bu yüzden .ts dosyalarını src klasöründe, .js dosyalarını ise dist klasöründe tutmak daha düzenlidir.

Ayar:

"outDir": "./dist"

Artık derleme yaptığında çıktı dosyaları dist klasörüne gider.

removeComments: Yorumları Kaldırmak

Kod yazarken yorum satırları (// açıklama) eklemek iyidir. Ama uygulamanın çalışması için bu yorumlara gerek yoktur. Ayrıca yayına alınırken daha sade ve küçük dosyalar istenir.

Ayar:

"removeComments": true

Bu ayar aktifse, derleme sırasında tüm açıklama satırları silinir.

noEmitOnError: Hatalı Kod Derlenmesin

Varsayılan olarak TypeScript, içinde hata olan bir dosyayı bile derleyebilir. Ama bu, çalışmayan veya sorunlu bir js dosyasının oluşması demektir. Bunu engellemek için noEmitOnError ayarını aktif hale getirebilirsin.

Ayar:

"noEmitOnError": true

Bu durumda eğer .ts dosyanda hata varsa, TypeScript derleme işlemini tamamen iptal eder ve .js dosyası oluşturmaz. Bu, projeni hatasız tutmak için çok faydalıdır.

Örnek tsconfig.json Özeti

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "./dist",
    "removeComments": true,
    "noEmitOnError": true
  }
}

Bu ayarlar sayesinde:

• Modern JavaScript kodu üretirsin
• Derlenmiş dosyalar ayrı klasörde toplanır
• Yorumlar silinir
• Hatalı kodlar çevrilmez

Sonuç: Kodunu Yönet, Hatalardan Korun

TypeScript sadece bir dil değil, aynı zamanda düzenli çalışmayı teşvik eden bir sistemdir.

tsconfig.json dosyası sayesinde projeni baştan sona kontrol altında tutabilir, hata riskini azaltabilir ve ekip çalışmasına uygun bir yapı kurabilirsin.

Kod yazmak ne kadar önemliyse, onu derlemek ve doğru şekilde organize etmek de o kadar önemlidir.

Bu alışkanlıkları kazanmak, seni daha profesyonel bir yazılımcı yapacaktır.