Mengkompilasi kode TypeScript (ASP.NET Core)

Gunakan paket TypeScript NuGet untuk menambahkan dukungan TypeScript ke proyek ASP.NET Core Anda. Mulai dari Visual Studio 2019, disarankan agar Anda menggunakan paket NuGet alih-alih TypeScript SDK. Paket TypeScript NuGet menyediakan portabilitas yang lebih besar di berbagai platform dan lingkungan.

Untuk proyek ASP.NET Core, salah satu penggunaan umum untuk paket NuGet adalah mengkompilasi TypeScript menggunakan .NET Core CLI. Dalam skenario .NET, paket NuGet adalah opsi pilihan, dan ini adalah satu-satunya cara untuk mengaktifkan kompilasi TypeScript menggunakan perintah .NET Core CLI seperti dotnet build dan dotnet publish. Selain itu, untuk integrasi MSBuild dengan ASP.NET Core dan TypeScript, pilih paket NuGet.

Penting

Untuk proyek berdasarkan JavaScript Project System (JSPS), atau proyek .esproj, gunakan paket npm alih-alih NuGet untuk menambahkan dukungan TypeScript.

Menambahkan dukungan TypeScript dengan NuGet

paket TypeScript NuGet menambahkan dukungan TypeScript. Saat paket NuGet untuk TypeScript 3.2 atau yang lebih tinggi diinstal ke dalam proyek Anda, versi layanan bahasa TypeScript yang sesuai akan dimuat di editor.

Jika Visual Studio diinstal, node.exe yang dibundel dengannya akan otomatis dikenali oleh Visual Studio. Jika Anda belum menginstal Node.js, kami sarankan Anda menginstal versi LTS dari situs web Node.js.

Buka proyek ASP.NET Core Anda di Visual Studio.
Di Solution Explorer (panel kanan). klik kanan simpul proyek dan pilih Kelola Paket NuGet. Di tab Telusuri, cari Microsoft.TypeScript.MSBuild, lalu klik Instal untuk menginstal paket.

Visual Studio menambahkan paket NuGet di bawah simpul Dependensi di Penjelajah Solusi. Referensi paket berikut ditambahkan ke file *.csproj Anda.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="5.8.3">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```
Klik kanan simpul proyek dan pilih Tambahkan > Item Baru. Pilih File Konfigurasi JSON TypeScript, lalu klik Tambahkan.

Jika Anda tidak melihat semua templat item, pilih Perlihatkan Semua Templat, lalu pilih templat item.

Visual Studio menambahkan file tsconfig.json ke akar proyek. Anda dapat menggunakan file ini untuk mengonfigurasi opsi untuk kompilator TypeScript.
Buka tsconfig.json dan perbarui untuk mengatur opsi pengkompilasi yang Anda inginkan.

Gunakan contoh berikut, yang menunjukkan file tsconfig.json sederhana.
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
Dalam contoh ini:
- menyertakan memberi tahu pengkompilasi tempat menemukan file TypeScript (*.ts).
- opsi outDir menentukan folder output untuk file JavaScript biasa yang ditranspilasi oleh compiler TypeScript.
- opsi menunjukkan apakah kompilator menghasilkan file sourceMap.
Konfigurasi sebelumnya hanya menyediakan pengenalan dasar untuk mengonfigurasi TypeScript. Untuk informasi tentang opsi lain, lihat tsconfig.json.

Membangun aplikasi

Tambahkan file TypeScript (.ts) atau TypeScript JSX (.tsx) ke proyek Anda, lalu tambahkan kode TypeScript. Untuk contoh sederhana TypeScript, gunakan kode berikut:
```
let message: string = 'Hello World';
console.log(message);
```
Jika Anda menggunakan proyek gaya non-SDK yang lebih lama, ikuti instruksi di Menghapus impor default sebelum membangun.
Pilih Build > Build Solution.

Meskipun aplikasi dibuat secara otomatis saat Anda menjalankannya, kami ingin melihat sesuatu yang terjadi selama proses build:

Jika Anda membuat peta sumber, buka folder yang ditentukan dalam opsi outDir , dan Anda akan menemukan file *.js yang dihasilkan bersama dengan file *js.map.

File sumber peta diperlukan untuk debugging.
Jika Anda ingin mengompilasi setiap kali Anda menyimpan proyek, gunakan opsi compileOnSave di tsconfig.json.
```
{
   "compileOnSave":  true,
   "compilerOptions": {
   }
}
```

Untuk contoh penggunaan gulp dengan Task Runner untuk membangun aplikasi Anda, lihat ASP.NET Core dan TypeScript.

Jika Anda mengalami masalah di mana Visual Studio menggunakan versi Node.js atau alat pihak ketiga yang berbeda dari versi yang Anda harapkan, Anda mungkin perlu mengatur jalur untuk digunakan Visual Studio. Pilih Alat>Opsi. Di bawah Proyek dan solusi, pilih Manajemen Paket Web>Alat Web Eksternal.

Jalankan aplikasi

Tekan F5 atau pilih tombol Mulai di bagian atas jendela.

Detail struktur paket NuGet

Microsoft.TypeScript.MSBuild.nupkg berisi dua folder utama:

folder build

Dua file terletak di folder ini. Keduanya adalah titik masuk - untuk file target TypeScript utama dan file alat peraga masing-masing.
1. Microsoft.TypeScript.MSBuild.targets
  
  File ini menetapkan variabel yang menentukan platform run-time, seperti jalur ke TypeScript.Tasks.dll, sebelum mengimpor Microsoft.TypeScript.targets dari alat folder.
2. Microsoft.TypeScript.MSBuild.props
  
  File ini mengimpor Microsoft.TypeScript.Default.props dari folder tools dan mengatur properti yang menunjukkan bahwa build telah dimulai melalui NuGet.
alat folder

Versi paket sebelum 2.3 hanya berisi folder tsc. dan TypeScript.Tasks.dll Microsoft.TypeScript.targets terletak di tingkat akar.

Dalam paket versi 2.3 dan yang lebih baru, tingkat akar berisi Microsoft.TypeScript.targets dan Microsoft.TypeScript.Default.props. Untuk detail selengkapnya tentang file-file ini, lihat Konfigurasi MSBuild.

Selain itu, folder berisi tiga subfolder:
1. net45
  
  Folder ini berisi TypeScript.Tasks.dll dan DLL lain yang bergantung padanya. Saat membangun proyek pada platform Windows, MSBuild menggunakan DLL dari folder ini.
2. netstandard1.3
  
  Folder ini berisi versi lain dari TypeScript.Tasks.dll, yang digunakan saat membangun proyek pada komputer non-Windows.
3. tsc
  
  Folder ini berisi tsc.js, tsserver.js dan semua file dependensi yang diperlukan untuk menjalankannya sebagai skrip simpul.
  
  Nota
  
  Jika Visual Studio diinstal, maka paket NuGet secara otomatis mengambil versi node.exe yang dibundel dengan Visual Studio. Jika tidak, Node.js harus diinstal pada komputer.
  
  Versi sebelum 3.1 berisi tsc.exe dapat dieksekusi untuk menjalankan kompilasi. Dalam versi 3.1, executable dihapus untuk menggunakan node.exe.

Menghapus impor default

Dalam proyek ASP.NET Core yang lebih lama yang menggunakan format gaya non-SDK, Anda mungkin perlu menghapus beberapa elemen file proyek.

Jika Anda menggunakan paket NuGet untuk dukungan MSBuild untuk proyek, file proyek tidak boleh mengimpor Microsoft.TypeScript.Default.props atau Microsoft.TypeScript.targets. File diimpor oleh paket NuGet, jadi termasuk file tersebut secara terpisah dapat menyebabkan perilaku yang tidak diinginkan.

Klik kanan proyek dan pilih Bongkar Proyek.
Klik kanan proyek dan pilih Edit nama file proyek <>.

File proyek terbuka.

Hapus referensi ke Microsoft.TypeScript.Default.props dan Microsoft.TypeScript.targets.

Impor yang akan dihapus terlihat mirip dengan XML berikut:

<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')" />

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-08-07