TypeScript kodunu derleme (ASP.NET Core)

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 dotnet build ve dotnet publishgibi .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 projelerine dayalı projelerde 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, 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'nde (sağ bölme). proje düğümüne sağ tıklayın ve NuGet Paketlerini Yönet seçeneğiniseçin. Gözat sekmesinde Microsoft.TypeScript.MSBuildiçin arama yapın ve ardından paketi yüklemek için yükle düğmesine tıklayın.

NuGet paketi eklemeAdd NuGet package

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

Basit bir tsconfig.json dosyasını gösteren aşağıdaki örneği kullanın.
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
Bu örnekte:
- dahil derleyiciye TypeScript (*.ts) dosyalarını nerede bulacağını bildirir.
- Dir 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

Projenize TypeScript (.ts) veya TypeScript JSX (.tsx) dosyaları ekleyin ve ardından TypeScript kodu ekleyin. Basit bir TypeScript örneği için aşağıdaki kodu 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.
Seç > DerleÇözümü Derle

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.jsoniçinde 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çenekleriseçin. Projeler ve çözümleraltında, Web Paketi Yönetimi>Dış Web Araçları'ni seçin.

Uygulamayı çalıştırma

F5 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.dllyolu 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 içeri aktarır ve derlemenin NuGet aracılığıyla başlatıldığını gösteren ö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 Microsoft.TypeScript.targets ve Microsoft.TypeScript.Default.propsiçerir. Bu dosyalar hakkında daha fazla bilgi için bkz. MSBuild Yapılandırma.

Ayrıca, klasör üç alt klasör içerir:
1. net45
  
  Bu klasör, TypeScript.Tasks.dll ve bağımlı olduğu diğer DLL'leri içerir. 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 TypeScript.Tasks.dllsürümünü içerir.
3. tsc
  
  Bu klasör tsc.js, tsserver.js ve bunları düğüm betikleri olarak çalıştırmak için gereken tüm bağımlılık dosyalarını içerir.
  
  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 tsc.exe yürütülebilir dosya içeriyordu. Sürüm 3.1'de yürütülebilir dosya, yerine node.exekullanılmak üzere kaldırıldı.

Varsayılan içeri aktarmaları kaldır.

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

NuGet paketini bir proje için MSBuild desteği amacıyla kullanıyorsanız, proje dosyası Microsoft.TypeScript.Default.props veya Microsoft.TypeScript.targets'i içeri aktarmamalıdır. 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 Proje Kapatseçin.
Projeye sağ tıklayın ve <proje dosya adını>düzenle'yi seçin.

Proje dosyası açılır.

Microsoft.TypeScript.Default.props ve Microsoft.TypeScript.targetsreferanslarını kaldırın.

Kaldırılacak dışa alımlar aşağıdaki XML'ye 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')" />

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-08-07