Bagikan melalui

Mengompilasi kode TypeScript (Node.js)

  • Artikel

Gunakan paket npm TypeScript untuk menambahkan dukungan TypeScript ke proyek berdasarkan JavaScript Project System (JSPS), atau .esproj. Mulai dari Visual Studio 2019, disarankan agar Anda menggunakan paket npm alih-alih TypeScript SDK. Paket typeScript npm menyediakan portabilitas yang lebih besar di berbagai platform dan lingkungan.

Penting

Untuk proyek ASP.NET Core, gunakan paket NuGet alih-alih npm untuk menambahkan dukungan TypeScript.

Menambahkan dukungan TypeScript menggunakan npm

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

  1. Ikuti petunjuk untuk menginstal beban kerja pengembangan Node.js dan runtime Node.js.

    Untuk integrasi Visual Studio sederhana, buat proyek Anda menggunakan salah satu templat Node.js TypeScript, seperti templat Blank Node.js Web Application. Jika tidak, gunakan templat JavaScript Node.js yang disertakan dengan Visual Studio dan ikuti instruksi di sini. Atau, gunakan proyek Buka Folder.

  2. Jika proyek Anda belum menyertakannya, instal paket npm TypeScript.

    Dari Penjelajah Solusi (panel kanan), buka package.json di akar proyek. Paket yang tercantum sesuai dengan paket di bawah simpul npm di Penjelajah Solusi. Untuk informasi selengkapnya, lihat Mengelola paket npm.

    Untuk proyek Node.js, Anda dapat menginstal paket npm TypeScript menggunakan baris perintah atau IDE. Untuk menginstal menggunakan IDE, klik kanan simpul npm di Penjelajah Solusi, pilih Pasang paket npm Baru, cari TypeScript, dan instal paket.

    Centang opsi npm di jendela Output untuk melihat kemajuan penginstalan paket. Paket yang diinstal muncul di bawah node npm di Penjelajah Solusi.

  3. Jika proyek Anda belum menyertakannya, tambahkan file tsconfig.json ke akar proyek Anda. Untuk menambahkan file, klik kanan node 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.

  4. 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": "dist"
  },
  "include": [
    "scripts/**/*"
  ]
}

    Dalam contoh ini:

    • sertakan memberi tahu pengompilasi tempat menemukan file TypeScript (*.ts).
    • Opsi outDir menentukan folder output untuk file JavaScript biasa yang ditranspilasi oleh pengompilasi 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

  1. Tambahkan file TypeScript (.ts) atau TypeScript JSX (.tsx) ke proyek Anda, lalu tambahkan kode TypeScript. Berikut ini contoh sederhana TypeScript:

    let message: string = 'Hello World';
console.log(message);

  2. Di package.json, tambahkan dukungan untuk perintah build dan clean Visual Studio menggunakan skrip berikut.

    "scripts": {
  "build": "tsc --build",
  "clean": "tsc --build --clean"
},

    Untuk membangun menggunakan alat pihak ketiga seperti webpack, Anda dapat menambahkan skrip build baris perintah ke file package.json Anda:

    "scripts": {
   "build": "webpack-cli app.tsx --config webpack-config.js"
}

    Untuk contoh penggunaan webpack dengan React dan file konfigurasi webpack, lihat Membuat aplikasi web dengan Node.js dan React.

    Untuk contoh penggunaan Vue.js dengan TypeScript, lihat Membuat aplikasi Vue.js.

  3. Jika Anda perlu mengonfigurasi opsi seperti halaman startup, jalur ke runtime Node.js, port aplikasi, atau argumen runtime, klik kanan simpul proyek di Penjelajah Solusi, dan pilih Properti.

    Catatan

    Saat mengonfigurasi alat pihak ketiga, Node.js proyek tidak menggunakan jalur yang dikonfigurasi di bawahProyek Opsi>Alat>dan solusi>Web Package Management>External Web Tools. Pengaturan ini digunakan untuk jenis proyek lainnya.

  4. Pilih Build > Solusi Build.

    Aplikasi ini di-build secara otomatis saat Anda menjalankannya. Namun, hal berikut mungkin 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.

Jalankan aplikasi

Untuk petunjuk menjalankan aplikasi setelah Anda mengompilasinya, lihat Membuat aplikasi Node.js dan Ekspres.

Mengotomatiskan tugas build

Anda dapat menggunakan Task Runner Explorer di Visual Studio untuk membantu mengotomatiskan tugas untuk alat pihak ketiga seperti npm dan webpack.

Konten terkait

Properti, React, Angular, Vue