Pengaturan Lingkungan TypeScript

Hai sana, bakal bintang coding masa depan! Saya sangat senang menjadi panduanmu dalam perjalanan menarik ke dunia TypeScript. Sebagai seseorang yang telah mengajar pemrograman selama tahun-tahun, saya bisa katakan bahwa pengaturan lingkungan pengembanganmu adalah seperti menyiapkan dapur sebelum memasak makanan lezat. Mungkin itu bukan bagian yang paling menarik, tapi itu sangat penting untuk pengalaman yang mulus dan menyenangkan. Jadi, mari kita lipatkan lengan dan mulai!

TypeScript - Environment Setup

Pengaturan Lingkungan Lokal

Sebelum kita mendalam ke hal-hal kecil TypeScript, kita perlu mengatur lingkungan lokal kita. Pahami ini sebagai menciptakan ruang kerja pemrogramanmu – sebuah sudut nyaman tempat kamu akan menghabiskan banyak waktu menciptakan program yang menakjubkan.

Instalasi Node.js

Hal pertama yang harus kita lakukan adalah menginstal Node.js. "Tunggu dulu," mungkin kamu bertanya, "kita bukan sedang belajar TypeScript?" Well, kamu sungguh benar! Namun, Node.js adalah seperti tetangga ramah yang TypeScript bergantung padanya untuk banyak hal, termasuk menjalankan compiler TypeScript kita.

Ikuti langkah-langkah berikut untuk menginstal Node.js:

  1. Kunjungi situs web resmi Node.js (https://nodejs.org/).
  2. Unduh versi yang direkomendasikan untuk sebagian besar pengguna.
  3. Jalankan penginstal dan ikuti petunjuknya.
  4. Setelah terinstal, buka terminal atau command prompt.
  5. Ketik node -v dan tekan Enter untuk memverifikasi instalasi.

Jika kamu melihat nomor versi,恭喜 (congratulations)! Kamu telah berhasil menginstal Node.js. Jika tidak, jangan khawatir – kita semua pernah melalui itu. Periksa lagi langkah-langkah instalasi atau minta bantuan.

Sekarang kita punya Node.js, mari kita instal TypeScript:

  1. Buka terminal atau command prompt.
  2. Ketik perintah berikut dan tekan Enter:
npm install -g typescript

Perintah ini memberitahu npm (Node Package Manager) untuk menginstal TypeScript secara global di sistemmu. Setelah selesai, kamu bisa memverifikasi instalasi dengan mengetik:

tsc -v

Jika kamu melihat nomor versi, kamu siap!

dukungan IDE

Sekarang kita memiliki alat utama terinstal, itu waktunya untuk memilih ruang kerjamu – Integrated Development Environment (IDE). Pahami IDE sebagai pisau Swiss andalanmu untuk pemrograman. Itu tempat kamu akan menulis, debug, dan menjalankan kode TypeScriptmu.

Visual Studio Code

IDEmu pribadi favorit (dan yang saya merekomendasikan kepada semua muridmu) adalah Visual Studio Code (VS Code). Itu gratis, kuat, dan memiliki dukungan yang bagus untuk TypeScript secara default.

Untuk mengatur VS Code:

  1. Kunjungi situs web VS Code (https://code.visualstudio.com/).
  2. Unduh dan instal versi untuk sistem operasimu.
  3. Setelah terinstal, buka VS Code.

VS Code datang dengan dukungan TypeScript bawaan, tapi mari kita pastikan itu menggunakan versi terinstal:

  1. Buat file baru dan simpan dengan ekstensi .ts (misalnya, hello.ts).
  2. Ketik kode berikut:
let message: string = "Hello, TypeScript!";
console.log(message);
  1. Tekan Ctrl + Shift + B (atau Cmd + Shift + B di Mac) untuk membuka menu Build Task.
  2. Pilih "tsc: build - tsconfig.json".
  3. Jika diminta untuk membuat file tsconfig.json, pilih "Yes".

Ini akan membuat file tsconfig.json di folder proyekmu, yang memberitahu TypeScript bagaimana mengkompilasi kodemu. Kamu bisa menyesuaikan file ini nanti saat kamu menjadi lebih familiar dengan TypeScript.

Brackets

Meskipun VS Code adalah pilihan teratas saya, beberapa murid saya memilih Brackets, khususnya mereka yang datang dari latar belakang desain web. Brackets ringan dan fokus pada teknologi web.

Untuk mengatur Brackets untuk TypeScript:

  1. Unduh dan instal Brackets dari situs web resmi (http://brackets.io/).
  2. Buka Brackets dan pergi ke File > Extension Manager.
  3. Cari "TypeScript" dan instal ekstensi "Brackets TypeScript".
  4. Restart Brackets setelah instalasi.

Sekarang kamu bisa membuat file .ts dan mulai mengoding dalam TypeScript!

Metode dan Alat yang Berguna

Berikut adalah tabel dari beberapa metode dan alat yang akan kamu temui saat memulai perjalanan TypeScriptmu:

Metode/Alat Deskripsi Contoh
tsc Perintah compiler TypeScript tsc hello.ts mengkompilasi hello.ts ke hello.js
tsc --watch Menonton perubahan file dan mengkompilasi secara otomatis tsc --watch hello.ts
npm init Menginisialisasi proyek Node.js baru Jalankan npm init di folder proyekmu
tsconfig.json File konfigurasi untuk kompilasi TypeScript Tentukan opsi compiler dan pengaturan proyek
console.log() Mencetak output ke konsol console.log("Hello, World!");
node Menjalankan file JavaScript node hello.js menjalankan file JS yang dikompilasi

Ingat, ini hanya dasar-dasar. Saat kamu maju, kamu akan menemukan banyak alat dan metode yang menarik!

Penutup

Uff! Kita telah menempuh banyak hal hari ini, dari menginstal Node.js hingga mengatur IDE. Mungkin itu terasa overwhelming pada awalnya, tapi percayalah, dengan latihan, ini akan menjadi kebiasaan.

Saya ingat saat pertama kali saya mulai coding, saya menghabiskan jam-jam mencoba mengatur lingkungan pengembangan dengan benar. Sekarang, itu begitu alami seperti membuat kopi pagi (yang, tentu saja, adalah bagian esensial dari setiap sesi pemrograman!).

Saat kita terus maju dalam perjalanan TypeScript kita, ingat bahwa setiap programmer yang hebat mulai tepat di tempat kamu sekarang. Kunci adalah untuk tetap curiga, terus mencoba, dan jangan takut untuk bertanya.

Dalam pelajaran berikutnya, kita akan menulis program TypeScript pertamamu dan menjelajahi beberapa fitur unik bahasa ini. Sampai saat itu, semoga codingmu menyenangkan, dan semoga tanda seru kamu selalu berada di tempat yang benar!

Credits: Image by storyset