Önceki

Sonraki

Alıştırma - TypeScript projesi ayarlama

Tamamlandı

Bu alıştırmada bir TypeScript projesi oluşturacaksınız. Ardından derleyiciyi çalıştırarak ve JavaScript dosyasının oluşturulduğunu doğrulayarak geliştirme ortamınızın doğru ayarlandığını onaylayacaksınız.

Visual Studio Code'da TypeScript projesi ayarlama

Bu adımda Visual Studio Code'da bir proje çalışma alanı oluşturacak ve projeyi başlatacaksınız.

1. Visual Studio Code'u açın.

2. Hoş Geldiniz bölmesinde Çalışma alanı klasörü ekle'yi seçin.

   

3. Yeni bir proje klasörü oluşturun ve ekle'yi seçin.

4. Sol bölmede Gezgin düğmesini seçin.

   

5. Gezgin bölmesinde Yeni Dosya simgesini seçin.

   

6. Modül 01 Alıştırması'nın altında module01.ts dosya adını yazın ve Enter tuşuna basın. TypeScript dosyası yeni bir kod düzenleyicisinde görüntülenir.

   

Tsconfig.json dosyası oluşturma

TypeScript kaynak kodunu derlerken TypeScript derleyicisi varsayılan davranışı uygular. Ancak TypeScript proje klasörünüzün köküne bir tsconfig.json dosyası ekleyerek TypeScript derleyici seçeneklerini değiştirebilirsiniz. Bu dosya, derleyici seçenekleri ve dahil edilmesi gereken dosyalar gibi TypeScript proje ayarlarını tanımlar.

TypeScript derleyicisinin seçeneğini kullanarak init varsayılan seçeneklere sahip bir tsconfig.json dosyası oluşturabilirsiniz.

1. Visual Studio Code'da, Terminal Yeni Terminal'i seçerek yeni bir Terminal> penceresi açın.

2. Komut istemine girin tsc --init.

   Yeni tsconfig.json dosyasının Gezgin bölmesine eklendiğine dikkat edin. Dosyayı görüntülemek için Gezgin bölmesini yenilemeniz gerekebilir.

3. Kod düzenleyicisinde tsconfig.json dosyasını açın. Çoğu açıklama satırı yapılan birçok seçenek olduğunu göreceksiniz. Etkinleştirilen her seçeneğin açıklamasını gözden geçirin.

4. tsconfig.json dosyasında hedef seçeneğini bulun ve olarak "ES2015"değiştirin.

5. Derleyicinin tüm JavaScript dosyalarını yeni bir klasöre kaydetmesi için tsconfig.json dosyasını güncelleştirin.

   a. Gezgin bölmesinde, projenizde build adlı yeni bir klasör oluşturun.
   b. tsconfig.json dosyasında seçeneğini bulunoutDir, açıklamayı kaldırın ve parametresini derle olarak ayarlayın.

6. tsconfig.json dosyasını kaydedin.

7. Komut istemine girin tsc. Bu komut tsconfig.json dosyasını okur ve proje seçeneklerini sıfırlar.

Bahşiş

tsconfig.json dosyası hakkında daha fazla bilgi edinmek için bkz. TSConfig Başvurusu.

TypeScript'i JavaScript'e derleme

Şimdi TypeScript dosyasına biraz JavaScript kodu ekleyip derleyelim.

1. Aşağıdaki JavaScript kodunu kopyalayıp module01.ts düzenleyicisine yapıştırın.

   function addNumbers(x, y) {
     return x + y;
   }
   console.log(addNumbers(3, 6));
   

   Kodu henüz derlememiş olsanız da Visual Studio Code'un yerleşik TypeScript desteğini kullanarak tür denetimi yaptığına dikkat edin. Daha önce olduğu gibi, işlevin iki parametresinde addNumbers tür hataları vardır.

   

2. TypeScript kodunu her parametre için bir tür belirtmek üzere güncelleştirin. değerini x ile x: numberdeğiştirin ve değerini ile y: numberdeğiştiriny.

3. TypeScript dosyasını kaydedin. TypeScript derleyicisi yalnızca dosyanın kaydedilmiş sürümünde çalışır.

4. Terminal komut isteminde tsc module01.ts girin. Derleyici hatasız çalıştırılmalıdır.

   Yeni bir JavaScript dosyası eklendiğine ancak Gezgin'deki derleme klasöründe olmadığına dikkat edin. Dosyayı görüntülemek için Gezgin bölmesini yenilemeniz gerekebilir. Komutu tek bir dosyada çalıştırdığınızdatsc, derleyici tsconfig.json dosyasını yoksayar.

5. Yapılandırma dosyasını yüklemek ve klasördeki tüm .ts dosyalarını derlemek için, dosya adı olmadan komutunu çalıştırın tsc . Bu komut derleme klasörüne .js dosyasını eklemelidir. Kök klasördeki ek .js dosyasını silmeyi unutmayın.

6. module01.js dosyasını açın ve ardından sağ üst kısmındaki Düzenleyiciyi Sağa Böl düğmesini seçerek yeni bir düzenleyici görünümü açın.

   Artık .ts ve .js dosyalarını yan yana görebilmeniz gerekir. .js dosyasının yeni tür ek açıklamalarını içermemesi dışında, bunların aynı olduğuna dikkat edin.

7. Terminal komut istemine girin node ./build/module01.js. Bu komut JavaScript'i çalıştırır ve sonucu konsol günlüğünde görüntüler.

HTML dosyası ekleme

Son adım olarak, JavaScript kodunu çalıştırıp test edebilmeniz için projeye bir HTML dosyası ekleyin.

1. Gezgin'de Yeni Dosya düğmesini seçin.

2. module01.html dosya adını yazın ve Enter tuşuna basın. HTML dosyası yeni bir kod düzenleyicisinde görünür.

3. Aşağıdaki HTML'yi kopyalayıp düzenleyiciye yapıştırın ve dosyayı kaydedin.

   <!DOCTYPE html>
   <html lang="en" dir="ltr">
   <head>
      <meta charset="UTF-8">
      <title>Test JavaScript</title>
   </head>
   <body>
      <h1>Test JavaScript</h1>
      <p id="date"></p>
      <p>This page calls the script module01.js and is used for testing.</p>
      <script src="./build/module01.js"></script>
   </body>
   </html>
   

4. Gezgin'de module01.html dosyasına sağ tıklayın ve Ardından Varsayılan Tarayıcıda Aç'ı seçin.

5. Tarayıcınız için geliştirici araçlarını etkinleştirin ve TypeScript'te kodlamaya başlamaya hazırsınız!

Alıştırma çözümü

Tamamlanmış Visual Studio Code çalışma alanını GitHub kod deposundan indirebilirsiniz. Çözümü çalıştırmak için önce makinenize aşağıdaki yazılımı yüklemeniz gerekir:

• Visual Studio Code (veya istediğiniz IDE)
• Düğüm Paket Yöneticisi (npm)
• TypeScript Derleyicisi (tsc)

En iyi sonuçlar için ortamınızı ayarlama ve bu modüldeki TypeScript derleyicisini kullanma yönergelerini izleyin. Ortamınızı ayarladıktan sonra, TypeScript öğrenme yolunu kullanarak JavaScript uygulamaları derleme bölümünde laboratuvar kurulumlarından veya çözüm dosyalarından herhangi birini çalıştırabilirsiniz.

Devam et