Mengkompilasi kode TypeScript (Node.js)

Gunakan paket TypeScript npm 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 TypeScript npm menambahkan dukungan TypeScript. Ketika paket npm untuk TypeScript 2.1 atau yang lebih tinggi diinstal ke dalam proyek Anda, versi layanan bahasa TypeScript yang sesuai akan dimuat di editor.

1. Periksa apakah Anda perlu menginstal beban kerja pengembangan apa pun untuk Visual Studio atau runtime Node.js.

   Untuk proyek yang dibuat menggunakan JavaScript Project System (JSPS), atau .esproj, tidak diperlukan beban kerja tambahan. Anda hanya perlu menginstal npm (https://www.npmjs.com/), yang disertakan dengan Node.js.

   Untuk jenis proyek lama (.njsproj), Anda perlu menginstal beban kerja pengembangan Node.js dan runtime Node.js.

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 Instal paket npm baru, cari TypeScript, dan instal paket.

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

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

4. Buka tsconfig.json dan perbarui untuk mengatur opsi pengkompilasi yang Anda inginkan.

   Contoh file tsconfig.json sederhana berikut.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "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 pengkompilasi TypeScript.
   • opsi menunjukkan apakah pengkompilasi 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. Contoh sederhana TypeScript berikut:

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

2. Di package.json, tambahkan dukungan untuk perintah build dan clean di Visual Studio dengan 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"
   }
   

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 .

   Nota

   Saat mengonfigurasi alat pihak ketiga, proyek Node.js tidak menggunakan jalur yang dikonfigurasi di bawah Alat>Opsi>Proyek dan solusi>Manajemen Paket Web>Alat Web Eksternal. Pengaturan ini digunakan untuk jenis proyek lainnya.

4. Pilih opsi Build, lalu > Build Solution.

   Aplikasi ini dibuat 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 akan 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 mengkompilasinya, lihat Membuat aplikasi Node.js dan Express.

Mengotomatiskan tugas pembangunan

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

• NPM Task Runner - Menambahkan dukungan untuk skrip npm yang ditentukan dalam package.json. Mendukung benang.
• Webpack Task Runner - Menambahkan dukungan untuk webpack.

Konten terkait

Properti, React, Angular, Vue