Bagikan melalui

Tutorial: Menambahkan TypeScript ke aplikasi ASP.NET Core yang ada di Visual Studio

  • Artikel

Dalam tutorial ini untuk pengembangan Visual Studio menggunakan ASP.NET Core dan TypeScript, Anda membuat aplikasi web sederhana, menambahkan beberapa kode TypeScript, lalu menjalankan aplikasi.

Di Visual Studio 2022 dan yang lebih baru, jika Anda ingin menggunakan Angular atau Vue dengan ASP.NET Core, disarankan agar Anda menggunakan templat ASP.NET Core Single Page Application (SPA) untuk membuat aplikasi ASP.NET Core dengan TypeScript. Untuk informasi selengkapnya, lihat tutorial Visual Studio untuk Angular atau Vue.

Jika Anda belum menginstal Visual Studio, buka halaman pengunduhan Visual Studio untuk menginstalnya secara gratis.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Membuat proyek ASP.NET Core
  • Menambahkan paket NuGet untuk dukungan TypeScript
  • Menambahkan beberapa kode TypeScript
  • Menjalankan aplikasi
  • Menambahkan pustaka pihak ketiga menggunakan npm

Prasyarat

Anda harus memasang Visual Studio dan beban kerja pengembangan web ASP.NET.

  • Jika Anda belum menginstal Visual Studio, buka halaman pengunduhan Visual Studio untuk menginstalnya secara gratis.

  • Jika Anda perlu menginstal beban kerja tetapi sudah memiliki Visual Studio, buka Alat>Dapatkan Alat dan Fitur... untuk membuka Penginstal Visual Studio. Pilih ASP.NET dan beban kerja pengembangan web, lalu pilih Ubah.

Membuat proyek MVC ASP.NET Core baru

Visual Studio mengelola file untuk satu aplikasi dalam proyek. Proyek ini mencakup kode sumber, sumber daya, dan file konfigurasi.

Catatan

Untuk memulai dengan proyek ASP.NET Core kosong dan menambahkan frontend TypeScript, lihat ASP.NET Core dengan TypeScript sebagai gantinya.

Dalam tutorial ini, Anda mulai dengan proyek sederhana yang berisi kode untuk aplikasi MVC ASP.NET Core.

  1. Buka Visual Studio. Jika jendela mulai tidak terbuka, pilih File>Mulai Jendela.

  2. Dari jendela awal, pilih Buat proyek baru.

  3. Pada jendela Buat proyek baru, masukkan aplikasi web di kotak pencarian. Selanjutnya, pilih C# sebagai bahasa.

    Setelah Anda menerapkan filter bahasa, pilih ASP.NET Core Web Application (Model-View-Controller), lalu pilih Berikutnya.

    Catatan

    Jika Anda tidak melihat templat proyek ASP.NET Core Web Application , Anda harus menambahkan beban kerja ASP.NET dan pengembangan web. Untuk instruksi terperinci, lihat Prasyarat.

  4. Di jendela Konfigurasikan proyek baru Anda, masukkan nama untuk proyek Anda di kotak Nama proyek. Kemudian, pilih Berikutnya.

  1. Pilih kerangka kerja target yang direkomendasikan (.NET 8.0 atau Dukungan jangka panjang), lalu pilih Buat.
  1. Di jendela Informasi tambahan, pastikan .NET 8.0 dipilih di menu dropdown Kerangka Kerja , lalu pilih Buat.

Visual Studio membuka proyek baru Anda.

Menambahkan beberapa kode

  1. Di Penjelajah Solusi (panel kanan), klik kanan simpul proyek dan pilih Kelola Paket NuGet untuk Solusi.

  2. Di tab Telusuri , cari Microsoft.TypeScript.MSBuild.

  3. Pilih Instal untuk menginstal paket.

    Add NuGet package

    Visual Studio menambahkan paket NuGet di bawah node Dependensi pada Penjelajah Solusi.

  4. Klik kanan simpul proyek dan pilih Tambahkan > Item Baru. Pilih File Konfigurasi JSON TypeScript, lalu pilih 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.

  5. Buka tsconfig.json dan ganti kode default dengan kode berikut:

    {
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}

    Opsi outDir menentukan folder output untuk file JavaScript biasa yang diterjemahkan pengkompilasi TypeScript.

    Konfigurasi ini menyediakan pengenalan dasar untuk menggunakan TypeScript. Dalam skenario lain, seperti saat menggunakan gulp atau Webpack, Anda mungkin menginginkan lokasi perantara yang berbeda untuk file JavaScript yang ditranspilasi alih-alih wwwroot/js. Lokasi tergantung pada alat dan preferensi konfigurasi Anda.

  6. Di Penjelajah Solusi, klik kanan simpul proyek dan pilih Tambahkan > Folder Baru. Gunakan skrip nama untuk folder baru.

  7. Klik kanan folder skrip dan pilih Tambahkan > Item Baru. Pilih File TypeScript, ketik nama app.ts untuk nama file, lalu pilih Tambahkan.

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

    Visual Studio menambahkan app.ts ke folder skrip.

  8. Buka app.ts dan tambahkan kode TypeScript berikut.

    function TSButton() {
   let name: string = "Fred";
   document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}

interface Person {
   firstName: string;
   lastName: string;
}

function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

    Visual Studio menyediakan dukungan IntelliSense untuk kode TypeScript Anda.

    Untuk mencoba fitur ini, hapus .lastName dari greeter fungsi , masukkan kembali periode (.), dan perhatikan pembaruan IntelliSense.

    View IntelliSense

    Pilih lastName untuk menambahkan nama belakang kembali ke kode.

  9. Buka folder Views/Home, lalu buka Index.cshtml.

  10. Tambahkan kode HTML berikut ke akhir file.

    <div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

  11. Buka folder Views/Shared, lalu buka _Layout.cshtml.

  12. Tambahkan referensi skrip berikut sebelum panggilan ke @RenderSectionAsync("Scripts", required: false):

    <script src="~/js/app.js"></script>

  13. Pilih Simpan File>Semua (Ctrl + Shift + S) untuk menyimpan perubahan Anda.

Membangun aplikasi

  1. Pilih Bangun > Solusi Build.

    Meskipun aplikasi di-build secara otomatis saat Anda menjalankannya, kami ingin melihat sesuatu yang terjadi selama proses build.

  2. Buka folder wwwroot/js untuk melihat dua file baru: app.js dan file peta sumber, app.js.map. Pengkompilasi TypeScript menghasilkan file-file ini.

    File peta sumber diperlukan untuk penelusuran kesalahan.

Jalankan aplikasi

  1. Tekan F5 (Debug>Mulai Debugging) untuk menjalankan aplikasi.

    Aplikasi terbuka di browser.

    Di jendela browser, Anda akan melihat judul Selamat Datang dan tombol Klik Saya .

    ASP.NET Core with TypeScript

  2. Pilih tombol untuk menampilkan pesan yang kami tentukan dalam file TypeScript.

Men-debug aplikasi

  1. Atur titik henti dalam fungsi greeter dengan app.ts mengeklik margin kiri di editor kode.

    Set a breakpoint

  2. Tekan F5 untuk menjalankan aplikasi.

    Anda mungkin perlu menanggapi pesan untuk mengaktifkan penelusuran kesalahan skrip.

    Catatan

    Chrome atau Edge diperlukan untuk penelusuran kesalahan skrip sisi klien.

  3. Saat halaman dimuat, tekan Klik Saya.

    Aplikasi menjeda di titik henti. Sekarang, Anda dapat memeriksa variabel dan menggunakan fitur debugger.

Menambahkan dukungan TypeScript untuk pustaka pihak ketiga

  1. Ikuti instruksi dalam manajemen paket npm untuk menambahkan package.json file ke proyek Anda. Tugas ini menambahkan dukungan npm ke proyek Anda.

    Catatan

    Untuk proyek ASP.NET Core, Anda juga dapat menggunakan Pengelola Pustaka atau yarn alih-alih npm untuk memasang file JavaScript dan CSS sisi klien.

  2. Dalam contoh ini, tambahkan file definisi TypeScript untuk jQuery ke proyek Anda. Sertakan kode berikut dalam file package.json Anda.

    "devDependencies": {
  "@types/jquery": "3.5.1"
}

    Kode ini menambahkan dukungan TypeScript untuk jQuery. Pustaka jQuery itu sendiri sudah disertakan dalam templat proyek MVC (lihat di bawah wwwroot/lib di Penjelajah Solusi). Jika Anda menggunakan templat yang berbeda, Anda mungkin perlu menyertakan paket npm jquery juga.

  3. Jika paket di Penjelajah Solusi tidak diinstal, klik kanan simpul npm dan pilih Pulihkan Paket.

    Catatan

    Dalam beberapa skenario, Penjelajah Solusi mungkin menunjukkan bahwa paket npm tidak sinkron dengan package.json karena masalah umum yang dijelaskan di sini. Misalnya, paket mungkin muncul sebagai tidak diinstal saat diinstal. Dalam kebanyakan kasus, Anda dapat memperbarui Penjelajah Solusi dengan menghapus package.json, menghidupkan ulang Visual Studio, dan menambahkan kembali file package.json seperti yang dijelaskan sebelumnya dalam artikel ini.

  4. Di Penjelajah Solusi, klik kanan folder skrip dan pilih Tambahkan>Item Baru.

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

  5. Pilih File TypeScript, ketik library.ts, dan pilih Tambahkan.

  6. Di library.ts, tambahkan kode berikut.

    var jqtest = {
  showMsg: function (): void {
     let v: any = jQuery.fn.jquery.toString();
     let content: any = $("#ts-example-2")[0].innerHTML;
     alert(content.toString() + " " + v + "!!");
     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
  }
};

jqtest.showMsg();

    Untuk kesederhanaan, kode ini menampilkan pesan menggunakan jQuery dan peringatan.

    Dengan definisi jenis TypeScript untuk jQuery ditambahkan, Anda mendapatkan dukungan IntelliSense pada objek jQuery saat Anda memasukkan titik (.) mengikuti objek jQuery, seperti yang ditunjukkan di sini.

    Screenshot that shows Intellisense results for the J Query example.

  7. Di _Layout.cshtml, perbarui referensi skrip untuk menyertakan library.js.

    <script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>

  8. Di Index.cshtml, tambahkan HTML berikut ke akhir file.

    <div>
  <p id="ts-example-2">jQuery version is:</p>
</div>

  9. Tekan F5 (Debug>Mulai Debugging) untuk menjalankan aplikasi.

    Aplikasi terbuka di browser.

    Pilih OK di pemberitahuan untuk melihat halaman yang diperbarui ke versi jQuery adalah: 3.3.1!!.

    Screenshot that shows the J Query example.

Langkah berikutnya

Anda mungkin ingin mempelajari detail selengkapnya tentang menggunakan TypeScript dengan ASP.NET Core. Jika tertarik dengan pemrograman Angular di Visual Studio, Anda dapat menggunakan ekstensi layanan bahasa Angular untuk Visual Studio.

ASP.NET Core dan TypeScript

Ekstensi layanan bahasa Angular