TypeScript kodunu derleme (Node.js)

JavaScript Proje Sistemi (JSPS) veya .esproj tabanlı projelere TypeScript desteği eklemek için TypeScript npm paketini kullanın. Visual Studio 2019'dan başlayarak, TypeScript SDK'sı yerine npm paketini kullanmanız önerilir. TypeScript npm paketi, farklı platformlar ve ortamlar arasında daha fazla taşınabilirlik sağlar.

npm kullanarak TypeScript desteği ekleme

TypeScript npm paketi TypeScript desteği ekler. TypeScript 2.1 veya üzeri için npm paketi projenize yüklendiğinde, TypeScript dil hizmetinin karşılık gelen sürümü düzenleyiciye yüklenir.

1. Node.js geliştirme iş yükünü ve Node.js çalışma zamanını yüklemek için yönergeleri izleyin.

   Basit bir Visual Studio tümleştirmesi için, Blank Node.js Web Uygulaması şablonu gibi Node.js TypeScript şablonlarından birini kullanarak projenizi oluşturun. Aksi halde, Visual Studio'da bulunan node.js JavaScript şablonundan birini kullanın ve buradaki yönergeleri izleyin. Alternatif olarak, Klasör Aç projesini de kullanabilirsiniz.

2. Projeniz henüz dahil değilse TypeScript npm paketini yükleyin.

   Çözüm Gezgini (sağ bölme) bölümünden proje kökünde package.json dosyasını açın. Listelenen paketler, Çözüm Gezgini npm düğümü altındaki paketlere karşılık gelir. Daha fazla bilgi için bkz . Npm paketlerini yönetme.

   Node.js projesi için, komut satırını veya IDE'yi kullanarak TypeScript npm paketini yükleyebilirsiniz. IDE kullanarak yüklemek için, Çözüm Gezgini'da npm düğümüne sağ tıklayın, Yeni npm paketini yükle'yi seçin, TypeScript'i arayın ve paketi yükleyin.

   Paket yüklemesinin ilerleme durumunu görmek için Çıkış penceresindeki npm seçeneğini işaretleyin. Yüklü paket, Çözüm Gezgini'daki npm düğümü altında gösterilir.

3. Projeniz henüz bunu içermiyorsa, proje köküne bir tsconfig.json dosyası ekleyin. Dosyayı eklemek için proje düğümüne sağ tıklayın ve Yeni Öğe Ekle'yi > seçin. TypeScript JSON Yapılandırma Dosyası'nı seçin ve ekle'ye tıklayın.

   Tüm öğe şablonlarını görmüyorsanız, Tüm Şablonları Göster'i ve ardından öğe şablonunu seçin.

   Visual Studio, tsconfig.json dosyasını proje köküne ekler. TypeScript derleyicisi seçeneklerini yapılandırmak için bu dosyayı kullanabilirsiniz.

4. tsconfig.json dosyasını açın ve istediğiniz derleyici seçeneklerini ayarlamak için güncelleştirin.

   Basit bir tsconfig.json dosyası örneği aşağıda verilmiştir.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   Bu örnekte:

   • include, derleyiciye TypeScript (*.ts) dosyalarını nerede bulacağını bildirir.
   • outDir seçeneği, TypeScript derleyicisi tarafından çevrilen düz JavaScript dosyalarının çıkış klasörünü belirtir.
   • sourceMap seçeneği, derleyicinin sourceMap dosyaları oluşturup oluşturmadığını gösterir.

   Önceki yapılandırma, TypeScript'i yapılandırmaya yalnızca temel bir giriş sağlar. Diğer seçenekler hakkında bilgi için bkz . tsconfig.json.

Uygulama oluşturma

1. Projenize TypeScript (.ts) veya TypeScript JSX (.tsx) dosyaları ekleyin ve ardından TypeScript kodu ekleyin. Basit bir TypeScript örneği aşağıda verilmiştir:

   let message: string = 'Hello World';
   console.log(message);
   

2. package.json dosyasında, aşağıdaki betikleri kullanarak Visual Studio derleme ve temizleme komutları için destek ekleyin.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Webpack gibi bir üçüncü taraf aracı kullanarak derlemek için package.json dosyanıza bir komut satırı derleme betiği ekleyebilirsiniz:

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

   Webpack'i React ve webpack yapılandırma dosyasıyla kullanma örneği için bkz . Node.js ve React ile web uygulaması oluşturma.

   Vue.js'yi TypeScript ile kullanma örneği için bkz . Vue.js uygulaması oluşturma.

3. Başlangıç sayfası, Node.js çalışma zamanı yolu, uygulama bağlantı noktası veya çalışma zamanı bağımsız değişkenleri gibi seçenekleri yapılandırmanız gerekiyorsa, Çözüm Gezgini proje düğümüne sağ tıklayın ve Özellikler'i seçin.

   Not

   Üçüncü taraf araçları yapılandırırken Node.js projeleri, Araç>Seçenekleri>Projeleri ve çözümleri>Web Paketi Yönetimi>Dış Web Araçları altında yapılandırılan yolları kullanmaz. Bu ayarlar diğer proje türleri için kullanılır.

4. Derleme Çözümü Oluştur'u > seçin.

   Uygulamayı çalıştırdığınızda uygulama otomatik olarak derılır. Ancak, derleme işlemi sırasında aşağıdakiler oluşabilir:

   Kaynak eşlemeler oluşturduysanız outDir seçeneğinde belirtilen klasörü açın ve oluşturulan *.js dosyalarını ve oluşturulan *js.map dosyalarını bulursunuz.

   Hata ayıklama için kaynak eşleme dosyaları gereklidir.

Uygulamayı çalıştırma

Uygulamayı derledikten sonra çalıştırma yönergeleri için bkz . Node.js ve Express uygulaması oluşturma.

Derleme görevlerini otomatikleştirme

npm ve webpack gibi üçüncü taraf araçlar için görevleri otomatikleştirmeye yardımcı olması için Visual Studio'da Görev Çalıştırıcı Gezgini'ni kullanabilirsiniz.

• NPM Görev Çalıştırıcısı - package.json dosyasında tanımlanan npm betikleri için destek ekler. İpliği destekler.
• Webpack Görev Çalıştırıcısı - Webpack için destek ekler.

İlgili içerik

Özellikler, React, Angular, Vue