Aracılığıyla paylaş

npm kullanarak TypeScript kodunu dönüştürme

JavaScript Proje Sistemi (JSPS)veya .esprojtemelinde 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.

Önemli

ASP.NET Core projelerde TypeScript desteği eklemek için npm yerine NuGet paketini kullanın.

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 () yüklemeniz yeterlidir.

  2. Projeniz henüz dahil değilse, TypeScript npm paketiniyükleyin.

    Çözüm Gezgini (sağ bölme) bölümünden proje kökünde package.json 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.

    Paket yüklemesinin ilerleme durumunu görmek için Çıktı penceresinde npm seçeneğini işaretleyin. Yüklü paket, Çözüm Gezgini 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'i JavaScript'e çeviren TypeScript derleyicisi tsc seçeneklerini 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 olan tsc 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'da, 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"
}

  3. Uygulama URL'si veya çalışma zamanı komutları gibi derleme ve dağıtım seçeneklerini yapılandırmanız gerekiyorsa, Çözüm Gezgini'da proje düğümüne sağ tıklayın ve Properties öğesini seçin.

    Uyarı

    Üçüncü taraf araçları yapılandırırken, JavaScript Proje Sistemi (JSPS) veya .esproj kullanan projeler, AraçSeçenekleriProjeleri ve çözümleriWeb Paketi YönetimiDış 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 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

İşlemleri tamamladıktan sonra uygulamayı ç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çlara yönelik görevleri otomatikleştirmeye yardımcı olmak için Visual Studio'de 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

  • Last updated on