Penyiapan Lingkungan

Memasang Node.js dan TypeScript, menginisialisasi tsconfig, serta memakai mode watch dan language server.

Daftar isi

Topik ini menyiapkan lingkungan kerja TypeScript secara lengkap, mulai dari Node.js dan npm, pemasangan compiler lewat npm, inisialisasi tsconfig.json, hingga program pertama yang dikompilasi dan dijalankan. Mode watch dan language server editor turut dibahas sebagai perkakas kerja sehari-hari. Setelah seluruh langkahnya diikuti, proyek TypeScript dapat dibuat dari nol pada mesin mana pun.

Memasang Node.js dan npm#

Node.js adalah runtime JavaScript yang berjalan di luar browser dan menjadi tempat paling umum untuk menjalankan program TypeScript hasil kompilasi. Pemasangannya tersedia di nodejs.org, dan versi LTS (long term support) disarankan karena menerima pemeliharaan lebih lama. Pemasang Node.js sekaligus memasang npm, yaitu pengelola paket yang menjadi cara resmi memasang compiler TypeScript.

bash

# memeriksa versi Node.js yang terpasang
node --version
# memeriksa versi npm yang terpasang
npm --version

text Keluaran

v24.22.2
11.19.1

Angka pada keluaran boleh berbeda antarmesin dan tidak menjadi masalah selama kedua perintah dikenali. Keluaran di atas menunjukkan Node.js versi 24 dengan npm versi 11, dan keduanya jauh melampaui kebutuhan minimal jalur ini. Apabila salah satu perintah tidak dikenal, pemasangan Node.js perlu diulang terlebih dahulu sebelum topik ini dilanjutkan.

npm sendiri bekerja dengan mengunduh paket dari registry resminya, lalu menaruhnya pada folder node_modules beserta catatan dependensinya. Mekanisme yang sama dipakai untuk memasang compiler TypeScript pada bagian selanjutnya. Selama kedua perintah pemeriksaan versi menghasilkan keluaran, fondasi lingkungan sudah siap.

Memasang TypeScript dengan npm#

Compiler TypeScript didistribusikan sebagai paket npm bernama typescript. Pemasangan dengan opsi -g bersifat global, artinya perintah tsc ditaruh pada PATH sehingga dapat dipanggil dari direktori mana pun. Pemasangan lokal per proyek juga lazim pada kerja tim agar seluruh anggota menggunakan versi yang sama, dan perbandingannya dirangkum pada tabel berikut.

Bentuk pemasangan	Perintah	Kapan dipilih
Global	`npm install -g typescript`	Alat latihan dan skrip pribadi pada satu mesin
Lokal per proyek	`npm install --save-dev typescript`	Proyek tim yang versinya perlu diseragamkan

Perintah pemasangan global seperti berikut.

bash

# tidak-dijalankan
# memasang compiler TypeScript secara global
npm install -g typescript

Setelah pemasangan selesai, compiler diverifikasi dengan perintah versi.

bash

# memeriksa versi compiler TypeScript yang terpasang
tsc --version

text Keluaran

Version 7.0.2

Keluaran tersebut menyebut versi compiler, bukan versi Node.js, karena keduanya diperbarui secara terpisah. Versi 7.0.2 pada contoh ini berasal dari generasi baru compiler TypeScript yang ditulis ulang dengan bahasa Go, dan perilaku bahasanya dirancang agar konsisten dengan generasi 5.x yang populer di produksi. Selama versi yang tercetak adalah 5.0 atau lebih baru, seluruh materi jalur ini dapat diikuti tanpa penyesuaian.

Selain pemasangan global, npm menyediakan npx untuk menjalankan paket tanpa memasangnya terlebih dahulu. Perintah npx tsc pada proyek yang menyimpan TypeScript sebagai dependensi lokal akan memanggil versi milik proyek itu. Bentuk semacam ini kelak lazim dijumpai pada skrip build proyek nyata.

Menginisialisasi konfigurasi dengan tsc –init#

Proyek TypeScript ditandai oleh satu berkas bernama tsconfig.json yang menampung seluruh pengaturan compiler. Perintah tsc –init adalah cara baku membuatnya, dan hasilnya berupa berkas konfigurasi lengkap dengan komentar penjelasan pada setiap opsi. Contoh berikut menjalankan perintah itu di dalam folder terpisah agar direktori kerja tetap bersih, sementara pada proyek sungguhan berkas ini diletakkan di akar proyek.

bash

# menghapus sisa percobaan agar contoh dapat diulang dari awal
rm -rf contoh-proyek
# membuat folder proyek terpisah
mkdir contoh-proyek
# bekerja di dalam folder proyek tersebut
cd contoh-proyek
# menghasilkan tsconfig.json bawaan
tsc --init
# memastikan berkas konfigurasi sudah ada
ls
# kembali ke direktori kerja sebelumnya
cd ..

text Keluaran

Created a new tsconfig.json

You can learn more at https://aka.ms/tsconfig
tsconfig.json

Perintah tsc –init mencetak ringkasan singkat diikuti nama berkas yang dibuat. Isi tsconfig.json bawaan berupa opsi aktif yang dipisahkan komentar panjang, dan cuplikan berikut menunjukkan bagian yang sering disentuh.

json Cuplikan tsconfig.json hasil tsc --init

{
  "compilerOptions": {
    "module": "nodenext",
    "target": "esnext",
    "sourceMap": true,
    "strict": true
  }
}

Opsi module menentukan bentuk modul keluaran, sedangkan target menentukan versi JavaScript sasaran hasil kompilasi. Opsi strict mengaktifkan keluarga pemeriksaan ketat yang menjadi standar proyek modern dan digunakan secara konsisten di sepanjang jalur ini. Opsi sourceMap membuat berkas peta (source map) yang menghubungkan kode hasil kompilasi dengan sumbernya saat debug. Komentar pada berkas lengkapnya menjelaskan puluhan opsi lain dan layak dibaca sekali pada kunjungan pertama.

Menjalankan program pertama#

Program pertama berupa penghitung luas persegi sederhana yang memuat fungsi beranotasi dan satu pemanggilan cetak. Simpan berkas berikut pada direktori kerja.

ts program.ts

function luasPersegi(sisi: number): number {
  return sisi * sisi;
}

console.log("Luas persegi bersisi 5:", luasPersegi(5));

text Keluaran

Luas persegi bersisi 5: 25

Jalur klasiknya berupa kompilasi terlebih dahulu, kemudian eksekusi hasilnya dengan Node.js.

bash

# mengompilasi program.ts menjadi program.js
tsc program.ts
# menjalankan hasil kompilasi dengan Node.js
node program.js

text Keluaran

Luas persegi bersisi 5: 25

Kedua jalur menghasilkan keluaran yang sama karena programnya sama, hanya cara menjalankannya yang berbeda. Berkas program.js kini berada di sebelah sumbernya dan dapat dijalankan berulang tanpa memanggil tsc lagi. Perubahan pada program.ts baru terlihat setelah kompilasi diulang, dan kebutuhan itulah yang dijawab oleh mode watch pada bagian akhir topik.

Sebelum melanjutkan, periksa kepatuhan tipe program tanpa menghasilkan berkas apa pun.

bash

# memeriksa tipe tanpa menghasilkan berkas keluaran
tsc --noEmit program.ts

Perintah di atas berakhir tanpa pesan apa pun, dan ketiadaan keluaran inilah tanda pemeriksaan lolos. Tidak ada berkas baru yang dibuat, sehingga opsi –noEmit cocok untuk pemeriksaan cepat sebelum kode diserahkan ke repositori. Periksalah program setiap kali selesai menyunting, karena pemeriksaan semacam ini berlangsung dalam hitungan detik. Bila ditemukan ketidakcocokan, tsc menampilkan pesan error dengan pola yang sama seperti pada pembahasan compiler, lengkap dengan berkas dan posisinya. Bentuk perintah yang sama kelak menjadi gerbang pemeriksaan pada otomatisasi proyek.

Mode watch#

Mode watch membuat tsc tetap hidup sebagai proses jangka panjang yang memantau berkas sumber. Setiap kali berkas tersimpan, tsc mengompilasi ulang dan langsung melaporkan hasil pemeriksaannya, sehingga siklus edit, simpan, dan periksa berlangsung tanpa perintah berulang. Siklus manual berupa menyunting, memanggil tsc, lalu membaca hasilnya terasa lambat ketika dilakukan puluhan kali sehari. Perintahnya berupa tsc diikuti opsi –watch dan nama berkas sumber yang dipantau. Mode ini hanya mengompilasi ulang, dan tidak pernah menjalankan program hasil kompilasinya.

bash

# tidak-dijalankan
# mode watch memantau berkas sumber dan mengompilasi ulang secara otomatis
tsc program.ts --watch

Apabila perintah di atas dijalankan, terminal menampilkan hasil kompilasi awal lalu menunggu tanpa kembali ke prompt. Ketika berkas disimpan, tsc mendeteksi perubahan dalam waktu singkat lalu mencetak ulang ringkasan hasilnya, lengkap dengan pesan error bila suntingan memuat ketidakcocokan. Prosesnya baru berakhir setelah dihentikan dengan menekan Ctrl+C. Karena tidak pernah berhenti dengan sendirinya, contoh di atas sengaja tidak disertai keluaran.

Language server di editor#

Language server adalah program yang menjalankan mesin pemeriksaan TypeScript di dalam editor, dan implementasi resminya bernama tsserver. Dengan server ini, editor menampilkan garis bergerigi pada error tipe sebelum berkas disimpan, menampilkan tipe saat kursor diarahkan ke kode, serta menawarkan pelengkapan otomatis yang disarikan dari anotasi. Umpan balik yang sama yang sebelumnya diperoleh lewat tsc kini muncul dalam hitungan milidetik saat mengetik.

Editor modern seperti Visual Studio Code menyertakan dukungan TypeScript sejak pemasangan pertama, sedangkan editor lain memperolehnya melalui pengaya. Dua fitur yang layak dicoba lebih dahulu adalah perbaikan cepat (quick fix), yaitu saran suntingan otomatis pada titik error, dan penggantian nama yang aman di seluruh berkas. Keberadaan language server inilah yang membuat anotasi tipe terasa seperti alat bantu langsung, alih-alih pemeriksaan yang menunggu langkah kompilasi.

Keluaran language server tidak dapat direkam sebagai teks terminal karena umpan baliknya berbentuk tampilan editor. Cara memeriksanya cukup dengan menyalin berkas yang memuat ketidakcocokan tipe dari contoh pada modul ini, lalu mengamati penanda yang muncul. Apabila penanda tidak muncul, pastikan ekstensi berkasnya .ts dan dukungan TypeScript pada editor tersebut aktif.

Kesalahan umum#

Tiga kekeliruan berikut sering ditemui saat penyiapan lingkungan, dan semuanya terdeteksi cepat lewat pesan yang muncul di terminal.

tsc: command not found setelah pemasangan. Penyebabnya berupa terminal yang masih memakai PATH lama atau pemasangan global yang gagal. Perbaikannya berupa membuka terminal baru, mengulangi npm install -g typescript, atau memanggil npx tsc pada proyek yang memasang TypeScript sebagai dependensi pengembangan.
tsconfig.json tersebar di beberapa direktori. Setiap direktori yang memuat tsconfig.json menjadi akar proyeknya sendiri, sehingga pemeriksaan terpecah dan hasilnya membingungkan, terutama ketika dua konfigurasi menetapkan aturan berbeda. Perbaikannya berupa satu tsconfig.json pada akar proyek, sedangkan subdirektori dibiarkan tanpa konfigurasi.
Menyertakan nama berkas eksplisit pada direktori yang sudah memuat tsconfig.json. TypeScript 7 menolak pemanggilan itu dengan error TS5112 karena berkas eksplisit dan konfigurasi proyek tidak boleh bercampur. Perbaikannya berupa memilih salah satu jalur, yaitu pemeriksaan berkas tunggal tanpa konfigurasi atau pemeriksaan proyek penuh melalui tsconfig.json yang dipanggil tanpa nama berkas.

Ringkasan#

Node.js dan npm dipasang lebih dahulu, lalu TypeScript dipasang sebagai paket npm global agar tsc tersedia di PATH.
tsc –init menghasilkan tsconfig.json dengan opsi bawaan seperti module, target, dan strict yang langsung aktif.
Program dijalankan melalui kompilasi klasik berupa tsc program.ts diikuti node program.js, atau diperiksa ringkas dengan tsc --noEmit.
Mode watch menjaga tsc tetap hidup untuk kompilasi ulang otomatis, sedangkan language server menyajikan pemeriksaan yang sama di dalam editor.

Referensi#

Downloading and installing Node.js and npm — npm — Panduan resmi npm untuk memasang Node.js dan npm pada berbagai sistem operasi.
Running TypeScript — Node.js — Dokumentasi Node.js tentang menjalankan berkas TypeScript secara langsung melalui penghapusan tipe.
tsconfig Reference — Microsoft — Rujukan lengkap opsi tsconfig.json yang dihasilkan oleh tsc –init.