0Pricing
TypeScript Academy · Pelajaran

Mengompilasi TypeScript ke JavaScript

Pahami compiler TypeScript dan output-nya.

Mengompilasi TypeScript ke JavaScript adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Selamat Datang

TypeScript tidak dapat dijalankan langsung di Node.js atau peramban. TypeScript harus dikompilasi menjadi JavaScript terlebih dahulu. Dalam pelajaran ini, Anda akan mempelajari cara kerja kompilator TypeScript.

Memasang Kompilator TypeScript

Pasang TypeScript sebagai dependensi pengembangan dalam proyek Anda. Perintah `tsc` tersedia dalam skrip lokal setelah pemasangan.
npm install --save-dev typescript
npx tsc --version

Kompilasi tsc Pertama Anda

Jalankan `tsc hello.ts` untuk mengompilasi satu berkas. Perintah tersebut menghasilkan `hello.js` di direktori yang sama, dengan semua tipe dihapus.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: Konfigurasi Proyek

Untuk proyek nyata, Anda memerlukan `tsconfig.json`. Jalankan `tsc --init` untuk membuatnya. Berkas ini mengatur sasaran, format modul, tingkat keketatan, direktori keluaran, dan lainnya.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Opsi Utama tsconfig

Bidang tsconfig yang paling penting adalah sasaran (keluaran versi ES), modul (sistem modul), outDir (folder keluaran), dan ketat (mengaktifkan semua pemeriksaan ketat).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Mode Pantau dengan tsc --watch

Jalankan `tsc --watch` untuk mengompilasi ulang secara otomatis setiap kali Anda menyimpan berkas TypeScript. Hal ini mempercepat siklus pengembangan.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: Memeriksa Tipe Tanpa Menghasilkan Berkas

Bendera `noEmit` menjalankan pemeriksa tipe tanpa menulis berkas keluaran apa pun. Fitur ini berguna dalam alur CI yang menggunakan penggabung seperti Vite atau esbuild untuk kompilasi sebenarnya.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Alternatif yang Lebih Cepat: ts-node dan tsx

Untuk pengembangan, Anda dapat menjalankan TypeScript secara langsung tanpa tahap kompilasi terpisah menggunakan `ts-node` atau alat `tsx` yang lebih cepat.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Peta Sumber untuk Penelusuran Kesalahan

Aktifkan `sourceMap: true` agar alat pengembang peramban dan alat penelusuran kesalahan Node.js dapat memetakan baris JS yang dikompilasi kembali ke sumber TypeScript asli Anda.
{ "compilerOptions": { "sourceMap": true } }

Berkas Deklarasi (.d.ts)

Dengan `declaration: true`, kompilator juga menghasilkan berkas `.d.ts`. Berkas ini memungkinkan proyek TypeScript lain menggunakan pustaka Anda dengan informasi tipe yang lengkap.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Kesalahan Kompilator Menghentikan Keluaran secara Bawaan

Secara bawaan, jika TypeScript Anda memiliki kesalahan tipe, `tsc` tetap menghasilkan JavaScript tetapi keluar dengan kode bukan nol. Gunakan `noEmitOnError: true` untuk menghentikan keluaran saat terjadi kesalahan.
{ "compilerOptions": { "noEmitOnError": true } }

Pemeriksaan Singkat

Apa yang dicapai dengan menjalankan `tsc --noEmit`?

Rangkuman

Kompilator TypeScript mengubah berkas .ts menjadi JavaScript. Konfigurasikan dengan tsconfig.json, gunakan --watch selama pengembangan, --noEmit hanya untuk pemeriksaan tipe, serta ts-node/tsx untuk menjalankan TypeScript secara langsung.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengompilasi TypeScript ke JavaScript” gratis?

Ya — teks lengkap “Mengompilasi TypeScript ke JavaScript” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Mengompilasi TypeScript ke JavaScript”?

Pahami compiler TypeScript dan output-nya. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Mengompilasi TypeScript ke JavaScript” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Titik Masalah JavaScript: Bug Runtime
  2. Tambahan TypeScript untuk JavaScript
  3. Mengompilasi TypeScript ke JavaScript
  4. Kapan Menggunakan TypeScript dalam Proyek Anda
← Kembali ke TypeScript Academy