Mengompilasi kode TypeScript (ASP.NET Core)

Artikel
10/24/2023

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 mengompilasi 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 proyek JavaScript Project System (JSPS), atau .esproj , gunakan paket npm alih-alih NuGet untuk menambahkan dukungan TypeScript.

Menambahkan dukungan TypeScript dengan NuGet

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

Jika Visual Studio diinstal, node.exe yang dibundel dengannya akan secara otomatis diambil dengan 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 Penjelajah Solusi (panel kanan). klik kanan node 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 node Dependensi pada Penjelajah Solusi. Referensi paket berikut ditambahkan ke file *.csproj Anda.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.7">
   <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 pengompilasi TypeScript.
Buka tsconfig.json dan perbarui untuk mengatur opsi pengompilasi yang Anda inginkan.

Berikut ini adalah contoh file tsconfig.json sederhana.
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
Dalam contoh ini:
- sertakan memberi tahu pengompilasi tempat menemukan file TypeScript (*.ts).
- opsi outDir menentukan folder output untuk file JavaScript biasa yang diterjemahkan oleh pengkompilasi TypeScript.
- Opsi sourceMap menunjukkan apakah pengompilasi 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 yang berikut ini:
```
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 mem-build.
Pilih Build > Solusi Build.

Meskipun aplikasi di-build 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 menemukan file *.js yang dihasilkan bersama dengan file *js.map yang dihasilkan.

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

Untuk contoh penggunaan gulp dengan Runner Tugas untuk mem-build 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 Visual Studio digunakan. 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:

mem-build folder

Dua file terletak di folder ini. Keduanya adalah titik masuk - untuk file target TypeScript utama dan file props 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 folder alat.
2. Microsoft.TypeScript.MSBuild.props
  
  File ini mengimpor Microsoft.TypeScript.Default.props dari folder alat dan mengatur properti yang menunjukkan bahwa build telah dimulai melalui NuGet.
folder tools

Versi paket sebelum 2.3 hanya berisi folder tsc. Microsoft.TypeScript.targets dan TypeScript.Tasks.dll 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 tersebut 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 yang bukan Windows.
3. tsc
  
  Folder ini berisi tsc.js, tsserver.js dan semua file dependensi yang diperlukan untuk menjalankannya sebagai skrip node.
  
  Catatan
  
  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 yang 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 menyertakannya secara terpisah dapat menyebabkan perilaku yang tidak diinginkan.

Klik kanan proyek dan pilih Batalkan Muatan 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 yang berikut ini:

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

Share via