Salvo

Salvo

WFN Üye
Konular
1,725
Mesajlar
1,747
Çözüm
0
Ticaret Puanı
0
Üyelik
6 Ay 16 Gün
Konum
İstanbul
Web Sitesi
Yok
Alanı
Belirtmemiş
1/1
Konu sahibi
JavaScript dosyasını TypeScript’e dönüştürmek için dosyanın uzantısını .js yerine .ts yapmak yeterli değildir. Dosyayı önce TypeScript projesine dahil etmeli, derleyici ayarlarını yapmalı, JavaScript kodunu kademeli olarak türlendirmeli ve derleyicinin ürettiği hataları giderdikten sonra oluşan JavaScript çıktısını çalıştırmalısınız. Küçük dosyalarda doğrudan yeniden adlandırma işe yarayabilir; ancak tür tanımları, modül kullanımı ve yapılandırma gerektiren projelerde kontrollü geçiş daha güvenlidir.

Dönüştürmeye başlamadan önce​


Çalışan JavaScript dosyanızın bir yedeğini alın veya projeyi bir sürüm kontrol sistemine kaydedin. Dönüşüm sırasında yapılan değişikliklerin bir kısmı yalnızca tür bilgisi eklemekten ibaret olsa da, .ts dosyasında derleyicinin kabul etmediği JavaScript kullanımlarıyla karşılaşabilirsiniz.

Projenin hangi araçla çalıştığını da belirleyin. Node.js, tarayıcı, React, Vue veya başka bir yapı kullanmanız dönüşümün temel mantığını değiştirmez; ancak derlenmiş dosyanın nereye yazılacağı ve modüllerin nasıl yükleneceği bu yapıya göre değişebilir.

TypeScript kurulu değilse proje klasöründe aşağıdaki komutla geliştirme bağımlılığı olarak ekleyebilirsiniz:

Bash: 
npm install --save-dev typescript

Ardından TypeScript yapılandırma dosyasını oluşturun:

Bash: 
npx tsc --init

Bu komut proje klasöründe tsconfig.json dosyası oluşturur. Dosyadaki her seçenek her proje için aynı olmak zorunda değildir; önemli olan kaynak dosyalarınızın, çıktı klasörünüzün ve modül ayarlarınızın kullandığınız çalışma ortamına uymasıdır.

Tek bir JavaScript dosyasını dönüştürme​


Örneğin elinizde şu JavaScript dosyası olduğunu varsayalım:

JavaScript: 
function toplam(a, b) {
  return a + b;
}

const sonuc = toplam(10, 20);
console.log(sonuc);

Dosyayı hesap.js adıyla kaydettiyseniz, aynı dosyanın kopyasını oluşturup adını hesap.ts yapın. Ardından kodu hemen değiştirmek zorunda değilsiniz. Önce TypeScript derleyicisini çalıştırarak mevcut kodun hangi noktalarında sorun bulunduğunu görün:

Bash: 
npx tsc hesap.ts --noEmit

--noEmit seçeneği JavaScript çıktısı üretmeden yalnızca tür kontrolü yapılmasını sağlar. Komut hata vermeden tamamlanırsa bu, kodun TypeScript tarafından mevcut hâliyle kabul edildiğini gösterir; ancak kodun mantıksal olarak doğru çalıştığını veya bütün olası girdileri güvenli biçimde işlediğini kanıtlamaz.

Daha sonra parametre ve dönüş türlerini açıkça belirleyebilirsiniz:

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

const sonuc: number = toplam(10, 20);
console.log(sonuc);

Burada a ve b yalnızca sayısal değer kabul eder. Fonksiyonun dönüş değerinin de sayı olması beklenir. Örneğin toplam("10", 20) çağrısı artık derleme hatasına neden olur. Bu hata, JavaScript’te çalışabilecek her kullanımın TypeScript’te de güvenli olduğu anlamına gelmediğini gösterir; çağrıyı yapan kodu veya verinin türünü düzeltmeniz gerekir.

JavaScript kodunu türlendirme sırası​


Dosya yeniden adlandırıldıktan sonra bütün kodu tek seferde değiştirmek yerine, dışarıdan veri alan bölümlerden başlayın. Parametreler, fonksiyon dönüşleri, nesneler, diziler ve sınıf üyeleri genellikle en fazla belirsizliği oluşturan alanlardır.

Basit değişkenlerde TypeScript çoğu zaman türü başlangıç değerinden çıkarabilir:

Kod: 
const kullaniciSayisi = 12;       // number
const aktif = true;               // boolean
const kullaniciAdi = "Ayşe";      // string
const etiketler = ["yeni", "web"]; // string[]

Türün başlangıç değerinden doğru biçimde çıkarılamadığı veya dışarıdan gelen verinin sınırlandırılması gerektiği durumlarda açık tür yazın:

Kod: 
let durum: "bekliyor" | "tamamlandi" = "bekliyor";
let kimlik: number;
let roller: string[] = ["uye", "moderator"];

Bir nesnenin yapısını tanımlamak için type veya interface kullanabilirsiniz:

Kod: 
type Kullanici = {
  id: number;
  ad: string;
  eposta?: string;
  aktif: boolean;
};

function kullaniciyiGoster(kullanici: Kullanici): string {
  return kullanici.eposta
    ? `${kullanici.ad} - ${kullanici.eposta}`
    : kullanici.ad;
}

const kullanici: Kullanici = {
  id: 1,
  ad: "Ayşe",
  aktif: true
};

console.log(kullaniciyiGoster(kullanici));

Buradaki ? işareti eposta alanının isteğe bağlı olduğunu belirtir. Bu alanın her zaman mevcut olduğunu varsayarak doğrudan işlem yaparsanız TypeScript hata verebilir. Hatanın çözümü alanı kontrol etmek, varsayılan değer vermek veya veri modelini alanın zorunlu olacağı şekilde değiştirmektir.

Dışarıdan gelen JSON verisini doğrudan güvenilir bir tür olarak kabul etmeyin. as Kullanici biçimindeki tür dönüşümü yalnızca derleyiciye bir varsayım bildirir; verinin gerçekten bu yapıya sahip olduğunu denetlemez. API yanıtı, form verisi veya kullanıcı girdisi için çalışma zamanında doğrulama da gerekir.

JavaScript ve TypeScript dönüşüm yolları​


Dosyanın büyüklüğüne ve projedeki JavaScript miktarına göre geçiş yöntemi değişir. Aşağıdaki ayrım hangi yolu seçmeniz gerektiğini netleştirir.
DurumUygun yaklaşımDikkat edilmesi gereken nokta
Küçük ve bağımsız dosyaDosyayı .ts olarak yeniden adlandırıp hataları düzeltmekÇıktıyı çalıştırmadan önce derleme sonucunu kontrol edin
Birden çok JavaScript dosyasıDosyaları kademeli olarak dönüştürmekModül yolları ve ortak türler dosyalar arasında uyumlu olmalı
Büyük veya çalışan üretim projesiÖnce JavaScript ile birlikte çalıştırıp sonra dosyaları sırayla türlendirmekBütün projeyi tek seferde yeniden yazmak gereksiz risk oluşturabilir
Tarayıcı veya Node.js projesiMevcut derleme aracının TypeScript giriş dosyalarını desteklemesini sağlamakSadece tsc çalıştırmak, projenin paketleme ayarlarını kendiliğinden değiştirmez
Tablodaki son durum özellikle önemlidir. TypeScript kaynak kodunu JavaScript’e dönüştürür; ancak tarayıcının veya Node.js’in doğrudan TypeScript sözdizimini çalıştıracağını varsaymamalısınız. Projenizin çalışma akışında derleme adımı olmalı ve uygulama çalışırken hangi klasördeki JavaScript dosyalarının kullanıldığı belirlenmelidir.

Mevcut JavaScript projesini kademeli geçirmek​


Büyük bir projede bütün dosyaları aynı anda yeniden adlandırmak yerine, TypeScript’in JavaScript dosyalarıyla birlikte çalışmasına izin verecek bir geçiş planı uygulayabilirsiniz. Bunun için tsconfig.json içindeki seçenekleri projenizin ihtiyacına göre düzenleyin. Bazı projeler önce JavaScript dosyalarını TypeScript derleyicisiyle kontrol eder, daha sonra dosyaları tek tek .ts uzantısına geçirir.

Kademeli geçişte şu sırayı izleyin:
  1. Projenin mevcut derleme ve çalıştırma komutlarını kaydedin. Hangi klasörün kaynak, hangi klasörün çıktı olduğunu bilin.
  2. TypeScript’i projeye ekleyip tsconfig.json oluşturun.
  3. Önce bağımlılığı az, giriş ve çıkışları belirgin bir dosyayı seçin.
  4. Dosya uzantısını .ts yapın ve npx tsc --noEmit ile hataları listeleyin.
  5. Fonksiyon parametrelerini, dönüş türlerini ve nesne yapılarını türlendirin.
  6. Derleme başarılı olduktan sonra uygulamayı projenin kendi komutuyla çalıştırın.
  7. Davranış değişmediyse sonraki dosyaya geçin; değiştiyse önce dönüşüm yapılan dosyanın girdilerini ve çıktısını karşılaştırın.
Derleyici hatalarının tamamını any yazarak susturmak hızlı görünür, fakat bu yöntem tür güvenliğini zayıflatır. Bir değerin yapısı gerçekten bilinmiyorsa unknown kullanıp işlemden önce tür kontrolü yapmak daha güvenlidir:

Kod: 
function metniAl(deger: unknown): string {
  if (typeof deger === "string") {
    return deger;
  }

  return String(deger);
}

unknown kullanılan değer üzerinde tür kontrolü yapılmadan dizi veya nesne işlemleri uygulanamaz. Bu nedenle derleyici sizi eksik kontrolü tamamlamaya zorlar. any ise çoğu kontrolü devre dışı bırakır; bu yüzden yalnızca geçici ve sınırları bilinen durumlarda kullanılmalıdır.

Derleme ve sonucu kontrol etme​


Dönüştürdüğünüz dosyayı çalıştırmak için önce TypeScript’i JavaScript’e derleyin. Projedeki tsconfig.json ayarları kullanılıyorsa temel komut şöyledir:

Bash: 
npx tsc

Derleme başarılı olduğunda yapılandırmada belirtilen çıktı klasöründe JavaScript dosyaları oluşur. Uygulamanızı kaynak .ts dosyasıyla değil, projenizin çalışma ortamına uygun üretilmiş JavaScript dosyasıyla başlatmanız gerekir. Node.js için örnek olarak çıktı dosyasını şu şekilde çalıştırabilirsiniz:

Bash: 
node dist/hesap.js

Buradaki dist/hesap.js yolu örnektir; gerçek yol tsconfig.json içindeki çıktı ayarına ve projenizin klasör yapısına bağlıdır.

Sonucu değerlendirirken üç durumu birbirinden ayırın:
  • Derleme hatası varsa TypeScript kaynak kodunda hâlâ tür, modül veya yapılandırma sorunu vardır. Önce hata mesajındaki dosya, satır ve beklenen tür bilgisini okuyun; rastgele tür eklemek yerine o değerin gerçek kaynağını inceleyin.
  • Derleme başarılı fakat uygulama çalışmıyorsa sorun çalışma zamanında ortaya çıkıyor olabilir. Eksik ortam değişkenlerini, dosya yollarını, modül biçimini ve dış servisten gelen verinin gerçek yapısını kontrol edin.
  • Derleme ve çalıştırma başarılı fakat sonuç değişmişse dönüşüm sırasında yapılan tür eklemeleri veya modül değişiklikleri çalışma mantığını etkiliyor olabilir. Eski ve yeni çıktıyı aynı girdilerle karşılaştırın; özellikle undefined, boş değerler, sayı-metin dönüşümleri ve eşzamansız işlemleri inceleyin.
Başarılı derleme, yalnızca kodun TypeScript kurallarına uyduğunu gösterir. API’nin beklenen yanıtı verdiğini, kullanıcı girdilerinin güvenli olduğunu veya bütün çalışma zamanı hatalarının giderildiğini kanıtlamaz. Bu nedenle gerçek uygulama akışını da çalıştırın ve dışarıdan gelen değerler için ayrıca doğrulama yapın.

Sık karşılaşılan hatalar​


Sadece dosya uzantısını değiştirmek yeterli mi?​


Küçük ve basit bir dosyada yeterli olabilir; ancak bu işlem dosyaya otomatik olarak doğru türleri eklemez. TypeScript’in asıl yararı, fonksiyonların ve verilerin hangi yapıda olması gerektiğini denetlemesidir. Uzantıyı değiştirdikten sonra derleyici hatalarını inceleyip anlamlı türler eklemelisiniz.

TypeScript dosyası neden doğrudan tarayıcıda açılmıyor?​


Tarayıcılar genellikle TypeScript tür açıklamalarını çalıştırmaz. .ts dosyasının önce JavaScript’e derlenmesi veya kullandığınız geliştirme aracının bu derleme işlemini yapması gerekir. Uygulamanın çalıştırma komutunda kaynak dosyanın mı, derlenmiş dosyanın mı kullanıldığını kontrol edin.

Derleyici hatalarını gidermek için her yere any yazabilir miyim?​


Yazabilirsiniz; fakat any kullanıldığında TypeScript o değer üzerindeki birçok kontrolü bırakır. Bu nedenle hata kaybolsa bile tür güvenliği sağlanmış olmaz. Değerin yapısı belirsizse unknown kullanın, ardından typeof, Array.isArray veya uygun bir nesne kontrolüyle doğrulayın.

JavaScript’ten TypeScript’e geçince uygulamanın davranışı değişir mi?​


Tür açıklamaları tek başına çalışma zamanında davranışı değiştirmez; derleme sırasında kaldırılır. Ancak dönüşüm sırasında modül sistemi, varsayılan değerler, null kontrolleri veya sayı-metin işlemleri değiştirilirse davranış değişebilir. Bu yüzden yalnızca derlemenin başarılı olmasına değil, aynı girdilerle uygulamanın aynı çıktıyı üretmesine de bakın.

JavaScript ve TypeScript dosyalarını aynı projede tutabilir miyim?​


Kademeli geçişte bu yaklaşım kullanılabilir. Bunun için TypeScript yapılandırmasının JavaScript dosyalarıyla çalışma biçimini, giriş dosyalarını ve çıktı klasörünü projenize göre ayarlayın. Yeni dönüştürülen dosyayı önce bağımsız biçimde derleyip çalıştırın; ardından diğer modüllerin bu dosyayı doğru yoldan içe aktardığını kontrol edin.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)