Salvo

Salvo

WFN Üye
Konular
1,759
Mesajlar
1,781
Çözüm
0
Ticaret Puanı
0
Üyelik
6 Ay 17 Gün
Konum
İstanbul
Web Sitesi
Yok
Alanı
Belirtmemiş
1/1
Konu sahibi
JavaScript projesine TypeScript eklemek için proje dizinine TypeScript paketini kurun, bir tsconfig.json dosyası oluşturun ve dosyaları ihtiyaç duydukça .ts uzantısına taşıyın. Mevcut JavaScript dosyalarıyla yeni TypeScript dosyaları bir arada bulunabilir. Tip kontrolü ile kodu çalıştırmak ayrı işlemlerdir: Projenizin kullandığı derleme veya çalıştırma aracının da TypeScript dosyalarını işlemesi gerekir.

Paketi kurun ve projeyi yapılandırın​

Aşağıdaki yol, bilgisayarınızda Node.js ve npm kurulu olduğunu ve proje kökünde package.json bulunduğunu varsayar. Terminali bu dizinde açıp TypeScript'i geliştirme bağımlılığı olarak yükleyin:

Bash: 
npm install --save-dev typescript

Kurulumdan sonra proje kökünde tsconfig.json yoksa oluşturup aşağıdaki başlangıç ayarlarını kaydedin. Projenizde zaten bir TypeScript yapılandırması varsa onu değiştirmeden önce mevcut ayarları inceleyin; dosyanın tamamını bu örnekle değiştirmeyin.

JSON: 
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "noEmit": true,
    "strict": true
  },
  "include": ["src/**/*"]
}

Bu örnek, kaynak dosyaların src klasöründe olduğunu varsayar. Farklı bir klasör kullanıyorsanız include yolunu ona göre değiştirin. allowJs, JavaScript dosyalarının projeye dahil edilmesini sağlar; checkJs: false ise bu dosyalarda genel hata denetimini başlangıçta açmaz. JavaScript dosyalarını da denetlemek istediğinizde bu ayarı true yapabilir veya önce seçtiğiniz bir JavaScript dosyasının ilk satırına // @ts-check ekleyebilirsiniz.

strict daha sıkı tip denetimlerini açar. Mevcut kodda çok sayıda hata çıkarsa geçiş sırasında geçici olarak kapatıp dosyaları düzelttikçe yeniden açabilirsiniz. noEmit ise bu yapılandırmayla yapılan kontrolün JavaScript çıktısı üretmesini engeller; mevcut kaynak dosyalar değiştirilmez.

Bir dosyayla geçişi deneyin​

Yeni bir dosyada denemek için src/ornek.ts oluşturun ve şunu kaydedin:

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

console.log(topla(2, 3));

Proje kökünde şu komutu çalıştırın:

Bash: 
npx tsc --noEmit

Komut hata göstermeden tamamlanırsa yapılandırmanın kapsadığı dosyalarda bildirilen bir tip hatası yoktur. Bu, programın çalıştırıldığını veya çalışma zamanında hata oluşmayacağını kanıtlamaz. Kontrolü sınamak için örnekteki ikinci sayıyı geçici olarak "3" yapın: number beklenen yere metin verildiği için tip hatası görmelisiniz. Değeri tekrar 3 yapıp kontrolü yineleyin.

Mevcut bir dosyayı taşırken de önce küçük bir .js dosyasını .ts olarak yeniden adlandırın; çıkan hataları ilgili değişkenlerin ve fonksiyonların tiplerini açıklayarak veya gerçekten hatalı kodu düzelterek giderin. JSX içeren dosyalar için .tsx kullanılır; bunun için projenin JSX ayarlarının ve derleme aracının uygun biçimde yapılandırılması gerekir. İçe aktarma yollarını ve uygulamanın giriş dosyasını da kullandığınız araçla uyumlu olacak şekilde güncelleyin.

Kodu çalıştırma ve sorunları giderme​

Yukarıdaki proje yapılandırması yalnızca tip kontrolü yapar. Mevcut araç zinciriniz TypeScript'i dönüştürüyorsa kendi geliştirme veya derleme komutunuzu kullanın; desteklemiyorsa kullandığınız aracın TypeScript yapılandırmasını eklemeniz gerekir. Yalnızca yukarıdaki bağımsız örneğin JavaScript çıktısını görmek için şu komutları çalıştırabilirsiniz:

Bash: 
npx tsc src/ornek.ts --outDir ornek-cikti
node ornek-cikti/ornek.js

Bu örnekte terminalde 5 görünmesi beklenir. Dosya adı verilerek çalıştırılan bu derleme, proje tsconfig.json ayarlarını kullanmaz; gerçek uygulamanın modül ve derleme ayarlarının yerine geçmez. Üretilen ornek-cikti klasörünü denemeden sonra silebilirsiniz.

npx tsc --noEmit kaynak dosyası bulamadığını bildirirse include yolunu ve komutun proje kökünde çalıştırıldığını kontrol edin. Bir paket için tip bildirimi bulunamadığında önce paketin kendi tiplerini sağlayıp sağlamadığını, ardından uygun bir @types paketi bulunup bulunmadığını inceleyin. Modül veya JSX hatalarında ise dosya uzantılarını ve TypeScript ayarlarını projenin gerçek çalıştırma ve derleme ortamıyla karşılaştırın.

Tip kontrolünü tekrar edilebilir yapmak için package.json içindeki mevcut scripts nesnesine "typecheck": "tsc --noEmit" ekleyip kaydedebilirsiniz. Bundan sonra proje kökünde npm run typecheck aynı kontrolü çalıştırır; mevcut script'leri silmeyin.
 
Moderatör tarafında düzenlendi:

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)