Transpilasi kode TypeScript menggunakan npm

Menambahkan dukungan TypeScript menggunakan npm

Tambahkan dukungan TypeScript dengan menggunakan paket npm TypeScript. Saat Anda menginstal paket npm ke dalam proyek Anda, editor memuat versi layanan bahasa TypeScript yang sesuai.

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.

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 dalam Penjelajah Solusi. Untuk informasi selengkapnya, lihat Mengelola paket npm.

   Periksa opsi npm di jendela Output untuk melihat kemajuan penginstalan paket. Paket yang diinstal muncul di bawah simpul npm dalam 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 untuk tsc, pengkompilasi TypeScript, yang menerjemahkan TypeScript ke JavaScript.

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 tsc, pengkompilasi 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

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 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"
   }
   

3. Jika Anda perlu mengonfigurasi opsi build dan penyebaran seperti URL aplikasi atau perintah runtime, klik kanan simpul proyek di Penjelajah Solusi, dan pilih Properti.

   Nota

   Saat mengonfigurasi alat pihak ketiga, proyek yang menggunakan JavaScript Project System (JSPS), atau .esproj, jangan gunakan jalur yang dikonfigurasi di bawah ProyekOpsi>Alat>dan solusi>Web Package Management>External Web Tools. 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.

   File peta sumber diperlukan untuk penelusuran kesalahan.

Jalankan aplikasi

Mengotomatiskan tugas pembangunan

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