TypeScript kodunu derleme (ASP.NET Core)

Makale
10/24/2023

ASP.NET Core projelerinize TypeScript desteği eklemek için TypeScript NuGet paketini kullanın. Visual Studio 2019'dan başlayarak, TypeScript SDK'sı yerine NuGet paketini kullanmanız önerilir. TypeScript NuGet paketi, farklı platformlar ve ortamlar arasında daha fazla taşınabilirlik sağlar.

ASP.NET Core projeleri için, NuGet paketinin yaygın kullanımlarından biri TypeScript'i .NET Core CLI kullanarak derlemektir. .NET senaryolarında NuGet paketi tercih edilen seçenektir ve ve dotnet publishgibi dotnet build .NET Core CLI komutlarını kullanarak TypeScript derlemesini etkinleştirmenin tek yoludur. Ayrıca ASP.NET Core ve TypeScript ile MSBuild tümleştirmesi için NuGet paketini seçin.

Önemli

JavaScript Proje Sistemi (JSPS) veya .esproj projelerini temel alan projeler için, TypeScript desteği eklemek için NuGet yerine npm paketini kullanın.

NuGet ile TypeScript desteği ekleme

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

Visual Studio yüklüyse, ile birlikte gelen node.exe, Visual Studio tarafından otomatik olarak alınır. Node.js yüklü değilse Node.js web sitesinden LTS sürümünü yüklemenizi öneririz.

Visual Studio'da ASP.NET Core projenizi açın.
Çözüm Gezgini(sağ bölme) içinde. proje düğümüne sağ tıklayın ve NuGet Paketlerini Yönet'i seçin. Gözat sekmesinde Microsoft.TypeScript.MSBuild için arama yapın ve yükle'ye tıklayarak paketi yükleyin.

Visual Studio, NuGet paketini Çözüm Gezgini Bağımlılıklar düğümü altına ekler. *.csproj dosyanıza aşağıdaki paket başvurusu eklenir.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.7">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```
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.
tsconfig.json dosyasını açın ve istediğiniz derleyici seçeneklerini ayarlamak için güncelleştirin.

Aşağıda basit bir tsconfig.json dosyası örneği verilmiştir.
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "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

Projenize TypeScript (.ts) veya TypeScript JSX (.tsx) dosyaları ekleyin ve ardından TypeScript kodu ekleyin. Basit bir TypeScript örneği için aşağıdakileri kullanın:
```
let message: string = 'Hello World';
console.log(message);
```
SDK olmayan eski bir stil projesi kullanıyorsanız, Derlemeden önce varsayılan içeri aktarmaları kaldırma başlığındaki yönergeleri izleyin.
Derleme Çözümü Oluştur'u > seçin.

Uygulamayı çalıştırdığınızda otomatik olarak derlenmiş olsa da, derleme işlemi sırasında gerçekleşen bir şeye göz atmak istiyoruz:

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.
Projeyi her kaydettiğinizde derlemek istiyorsanız tsconfig.json dosyasındaki compileOnSave seçeneğini kullanın.
```
{
   "compileOnSave":  true,
   "compilerOptions": {
   }
}
```

Uygulamanızı derlemek için Görev Çalıştırıcısı ile gulp kullanma örneği için bkz . ASP.NET Core ve TypeScript.

Visual Studio'nun Node.js sürümünü veya beklediğiniz sürümden farklı bir üçüncü taraf aracını kullandığı sorunlarla karşılaşırsanız, Visual Studio'nun kullanacağı yolu ayarlamanız gerekebilir. Araçlar Seçenekleri'ni> seçin. Projeler ve çözümler'in altında Web Paketi Yönetimi>Dış Web Araçları'nı seçin.

Uygulamayı çalıştırma

F5 tuşuna basın veya pencerenin üst kısmındaki Başlangıç düğmesini seçin.

NuGet paket yapısı ayrıntıları

Microsoft.TypeScript.MSBuild.nupkg iki ana klasör içerir:

derleme klasörü

Bu klasörde iki dosya bulunur. Her ikisi de giriş noktalarıdır - sırasıyla ana TypeScript hedef dosyası ve props dosyası için.
1. Microsoft.TypeScript.MSBuild.targets
  
  Bu dosya, Araçlar klasöründen Microsoft.TypeScript.targets içeri aktarmadan önce TypeScript.Tasks.dll yolu gibi çalışma zamanı platformunu belirten değişkenleri ayarlar.
2. Microsoft.TypeScript.MSBuild.props
  
  Bu dosya, Araçlar klasöründen Microsoft.TypeScript.Default.props dosyasını içeri aktarır ve derlemenin NuGet aracılığıyla başlatıldığını belirten özellikleri ayarlar.
araçlar klasörü

2.3 öncesi paket sürümleri yalnızca bir tsc klasörü içerir. Microsoft.TypeScript.targets ve TypeScript.Tasks.dll kök düzeyinde bulunur.

2.3 ve sonraki paket sürümlerinde kök düzeyi ve Microsoft.TypeScript.Default.propsiçerirMicrosoft.TypeScript.targets. Bu dosyalar hakkında daha fazla bilgi için bkz . MSBuild Yapılandırması.

Ayrıca, klasör üç alt klasör içerir:
1. net45
  
  Bu klasör ve bağlı olduğu diğer DLL'leri içerir TypeScript.Tasks.dll . Bir Windows platformunda proje oluştururken, MSBuild bu klasörden DLL'leri kullanır.
2. netstandard1.3
  
  Bu klasör, Windows olmayan bir makinede proje oluştururken kullanılan başka bir sürümünü TypeScript.Tasks.dlliçerir.
3. Tsc
  
  Bu klasör , tsserver.js ve düğüm betikleri olarak çalıştırmak için gereken tüm bağımlılık dosyalarını içerirtsc.js.
  
  Not
  
  Visual Studio yüklüyse NuGet paketi, Visual Studio ile birlikte gelen node.exe sürümünü otomatik olarak alır. Aksi takdirde, node.js makineye yüklenmelidir.
  
  3.1 öncesi sürümler derlemeyi çalıştırmak için yürütülebilir dosya tsc.exe içeriyordu. Sürüm 3.1'de yürütülebilir dosya kullanılarak node.exekaldırıldı.

Varsayılan içeri aktarmaları kaldırma

SDK stili olmayan biçimi kullanan eski ASP.NET Core projelerinde, bazı proje dosyası öğelerini kaldırmanız gerekebilir.

Bir proje için MSBuild desteği için NuGet paketini kullanıyorsanız, proje dosyası veya Microsoft.TypeScript.targetsiçeri aktarılmamalıdırMicrosoft.TypeScript.Default.props. Dosyalar NuGet paketi tarafından içeri aktarıldığından ayrı olarak dahil olmak istenmeyen davranışlara neden olabilir.

Projeye sağ tıklayın ve Projeyi Kaldır'ı seçin.
Projeye sağ tıklayın ve Proje dosya adını> düzenle'yi< seçin.

Proje dosyası açılır.

ve Microsoft.TypeScript.targetsbaşvurularını Microsoft.TypeScript.Default.props kaldırın.

Kaldırılacak içeri aktarmalar aşağıdakine benzer:

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

Aracılığıyla paylaş