- Konu sahibi
- #1
TypeScript kodunu JavaScript’e çevirmek için TypeScript derleyicisi
Önce Node.js ve npm’nin kurulu olduğu bir terminal açın. Projenizin kök klasöründe TypeScript’i geliştirme bağımlılığı olarak kurun:
Ardından aynı klasörde örneğin
Buradaki
Proje kökünde
Bu ayarda kaynak TypeScript dosyaları
Derlemeyi başlatmak için proje kökünde şu komutu çalıştırın:
Hata yoksa beklenen sonuç
Terminalde
Küçük bir dosyayı proje ayarı olmadan da çevirebilirsiniz:
Bu kullanımda seçenekler yalnızca komut için geçerlidir. Birden fazla dosya, modül, kaynak haritası veya farklı ortam ayarı olan projelerde
Derleme başarılıysa
Derleme sırasında hata alırsanız önce terminalde belirtilen dosya ve satır numarasına gidin.
Bazı projelerde
En temel akış şudur: kaynakları
tsc kullanılır. Proje klasöründe tsconfig.json oluşturup npx tsc komutunu çalıştırdığınızda .ts dosyalarındaki tür açıklamaları kaldırılır ve çalıştırılabilir .js dosyaları üretilir. Çıktıyı ayrı bir klasöre almak için outDir kullanın; derleme hatalarının JavaScript üretmesini engellemek istiyorsanız noEmitOnError seçeneğini açın.Derleyiciyi kurup ilk JavaScript dosyasını üretme
Önce Node.js ve npm’nin kurulu olduğu bir terminal açın. Projenizin kök klasöründe TypeScript’i geliştirme bağımlılığı olarak kurun:
Kod:
npm install --save-dev typescript
Ardından aynı klasörde örneğin
src/merhaba.ts adlı bir dosya oluşturun:
Kod:
function selamla(isim: string): string {
return `Merhaba, ${isim}!`;
}
console.log(selamla("Ayşe"));
Buradaki
string türleri TypeScript’e aittir. JavaScript çalışma zamanında bu tür açıklamaları bulunmadığı için derleyici bunları kaldırır ve geriye çalıştırılabilir JavaScript bırakır. TypeScript dosyaları tarayıcıda veya JavaScript çalışma zamanında doğrudan çalıştırılamaz; önce JavaScript’e dönüştürülmeleri gerekir.Çıktıyı ayrı bir klasöre almak
Proje kökünde
tsconfig.json dosyası oluşturun:
JSON:
{
"compilerOptions": {
"target": "ES2020",
"module": "CommonJS",
"rootDir": "src",
"outDir": "dist",
"strict": true,
"noEmitOnError": true
},
"include": ["src/**/*.ts"]
}
Bu ayarda kaynak TypeScript dosyaları
src altında, üretilen JavaScript dosyaları ise dist altında tutulur. rootDir kaynak kökünü, outDir çıktı klasörünü belirtir; klasör yapısı çıktı içinde korunur. noEmitOnError: true ise tür denetimi hatası varken yeni JavaScript dosyası üretmez.Derlemeyi başlatmak için proje kökünde şu komutu çalıştırın:
Kod:
npx tsc
Hata yoksa beklenen sonuç
dist/merhaba.js dosyasının oluşmasıdır. Dosyanın içeriği kullanılan target ve module ayarlarına göre değişebilir; ancak isim: string gibi tür bilgileri çıktıda yer almaz. Çalıştırmak için Node.js kullanıyorsanız şu komutu verebilirsiniz:
Kod:
node dist/merhaba.js
Terminalde
Merhaba, Ayşe! görünür. Bu çıktı, derlemenin ve dosyanın çalıştırılmasının başarılı olduğunu gösterir; TypeScript kodunuzun bütün iş kurallarını doğru uyguladığını tek başına kanıtlamaz.Komut satırında tek dosya dönüştürme
Küçük bir dosyayı proje ayarı olmadan da çevirebilirsiniz:
Kod:
npx tsc src/merhaba.ts --target ES2020 --module CommonJS --outDir dist
Bu kullanımda seçenekler yalnızca komut için geçerlidir. Birden fazla dosya, modül, kaynak haritası veya farklı ortam ayarı olan projelerde
tsconfig.json kullanmak daha güvenlidir; böylece her derlemede aynı ayarlar uygulanır. tsc komutu, proje kökünde geçerli bir tsconfig.json bulduğunda bu yapılandırmayı kullanır.Derleme sonucunu nasıl yorumlamalısınız?
Derleme başarılıysa
dist klasöründeki JavaScript dosyalarını uygulamanızın çalıştırma ortamına verirsiniz. Tarayıcı projesinde bu dosyalar genellikle HTML’ye veya bir paketleyici tarafından oluşturulan son pakete bağlanır; Node.js projesinde ise giriş dosyası node ile çalıştırılır.Derleme sırasında hata alırsanız önce terminalde belirtilen dosya ve satır numarasına gidin.
noEmitOnError: true kullanıldığı için hata varken dist altında yeni veya güncel çıktı görmemeniz beklenen davranıştır. Tür uyuşmazlığını, eksik modülü veya yanlış dosya yolunu düzelttikten sonra npx tsc komutunu yeniden çalıştırın. Eski bir .js dosyasının klasörde kalması, son derlemenin başarılı olduğu anlamına gelmez; dosyanın değişiklik zamanını ve derleme çıktısındaki hataları birlikte kontrol edin.noEmitOnError kapalıysa TypeScript bazı tür hatalarına rağmen JavaScript üretebilir. Bu dosyanın oluşması, kodun güvenli veya doğru olduğu anlamına gelmez; yalnızca derleyicinin çıktı üretmeyi durdurmadığını gösterir. Dağıtıma alınan derlemelerde hatalı çıktının kullanılmasını önlemek için noEmitOnError: true tercih edilebilir.TypeScript’i çalıştırmak ile JavaScript’e çevirmek aynı şey değildir
Bazı projelerde
tsconfig.json içinde noEmit: true bulunur. Bu ayar JavaScript dosyası üretmez; TypeScript yalnızca tür denetimi veya editör desteği için kullanılır. Dönüştürme işini Babel, SWC ya da başka bir araç yapıyorsa bu yapılandırma bilinçli olabilir. Kendi başınıza tsc ile çıktı almak istiyorsanız noEmit ayarının etkin olmadığını kontrol edin.En temel akış şudur: kaynakları
src altında tutun, ayarları tsconfig.json içine yazın, npx tsc ile derleyin, oluşan dist JavaScript dosyasını hedef ortamda çalıştırın ve dağıtımdan önce terminalde hata kalmadığını doğrulayın.