TypeScript kodunu derleme (Node.js)

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. Visual Studio veya Node.js çalışma zamanı için herhangi bir geliştirme iş yükü yüklemeniz gerekip gerekmediğini denetleyin.

   JavaScript Proje Sistemi (JSPS) veya .esprojkullanılarak oluşturulan projeler için ek iş yükü gerekmez. yalnızca Node.jsile birlikte gelen npm (https://www.npmjs.com/) yüklemeniz yeterlidir.

   Eski proje türü (.njsproj) için Node.js geliştirme iş yükünü ve Node.js çalışma zamanını yüklemeniz gerekir.

   Node.jsile birlikte gelen Node.js geliştirme iş yükünü ve npm ' yi (https://www.npmjs.com/) yüklemek için yönergeleri izleyin.

   Basit bir Visual Studio tümleştirmesi için, Boş 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 paketiniyükleyin.

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

   bir 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'nde npm düğümüne sağ tıklayın, Yeni npm paketini yükleseçin, TypeScriptaraması yapın ve paketi yükleyin.

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

3. Projeniz henüz bu dosyayı içermiyorsa, proje köküne bir tsconfig.json dosyası ekleyin. Dosyayı eklemek için proje düğümüne sağ tıklayın ve Ekle > Yeni Öğeseçeneğini seçin. TypeScript JSON Yapılandırma Dosyasıseçin ve Ekleöğesine tıklayın.

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

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

4. İstediğiniz derleyici seçeneklerini ayarlamak için tsconfig.json açın ve 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:

   • dahil 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.

Uygulamayı oluştur

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'de, 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 ile web uygulaması oluşturma ve React.

   TypeScript ile Vue.js kullanma örneği için Vue.js uygulama oluşturmabölümüne bakın.

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'nde proje düğümüne sağ tıklayın ve Özelliklerseçeneğini belirleyin.

   Not

   Üçüncü taraf araçları yapılandırırken, Node.js projeler Web Paket YönetimiDış Web AraçlarıProjeler ve çözümlerAraçlarıSeçenekleri altında yapılandırılan yolları kullanmaz. Bu ayarlar diğer proje türleri için kullanılır.

4. Derleme > Derleme Çözümüseçin.

   Uygulamayı çalıştırdığınızda uygulama otomatik olarak derlenir. 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 haritası dosyaları gereklidir.

Uygulamayı çalıştırma

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.jsoniçinde tanımlanan npm betikleri için destek ekler. İplik desteği sunar.
• Webpack Görev Çalıştırıcısı - Webpack için destek ekler.

İlgili içerik

Özellikleri, React, Angular, Vue