Frontend Academy · Pelajaran

Mengompilasi TS dan tsconfig.json

Jalankan tsc untuk mengompilasi TypeScript, lalu konfigurasikan compiler dengan opsi tsconfig.json seperti strict, target, dan outDir.

Mengompilasi TS dan tsconfig.json adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Memasang Kompilator TypeScript

Pasang TypeScript sebagai dependensi pengembangan. CLI tsc mengompilasi berkas TypeScript. Dengan Vite atau Next.js, bundel menangani kompilasi—tetapi tsc tetap digunakan untuk pemeriksaan tipe.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Menginisialisasi tsconfig.json

Jalankan npx tsc --init untuk membuat tsconfig.json dengan semua opsi yang diberi komentar dan nilai bawaan yang sesuai. Berkas ini menjadi satu-satunya konfigurasi untuk kompilator TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

Struktur tsconfig.json

Bagian utamanya adalah: compilerOptions (perilaku kompilator), include (berkas yang dikompilasi), dan exclude (berkas yang dilewati).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

target — Versi JavaScript Keluaran

target menentukan versi JavaScript yang dikeluarkan tsc. Gunakan ES2022 atau ESNext untuk lingkungan modern. Gunakan ES5 untuk kompatibilitas maksimum, meskipun biasanya hal ini ditangani oleh Babel.

module — Sistem Modul

module mengatur format modul keluaran. Gunakan CommonJS untuk Node.js. Gunakan ESNext atau ES2022 untuk bundel (Vite, webpack). Gunakan NodeNext untuk Node.js modern dengan type:module dalam package.json.

strict — Opsi Pemeriksaan Ketat

"strict": true mengaktifkan kumpulan pemeriksaan ketat: strictNullChecks, noImplicitAny, strictFunctionTypes, dan lainnya. Selalu aktifkan opsi ini untuk proyek baru—opsi ini menemukan paling banyak kesalahan.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — Menghilangkan Kesalahan Null

Jika strictNullChecks diaktifkan, null dan undefined tidak dapat ditetapkan ke tipe lain kecuali disertakan secara eksplisit dalam tipe gabungan. Opsi ini memaksa Anda menangani kasus null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir dan rootDir

outDir menentukan lokasi penempatan berkas JS yang telah dikompilasi. rootDir menetapkan akar berkas TypeScript sumber. Keduanya mencerminkan struktur sumber di dalam dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

paths — Alias Modul

Konfigurasikan alias jalur dengan opsi paths dan baseUrl. Opsi ini memungkinkan Anda mengimpor @/components/Button alih-alih ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Mode Pantau dan Hanya Pemeriksaan Tipe

tsc --watch mengompilasi ulang saat terjadi perubahan pada berkas. tsc --noEmit menjalankan pemeriksaan tipe tanpa menghasilkan berkas—berguna dalam CI untuk memvalidasi tipe tanpa menggandakan tugas bundel.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Memperluas tsconfig.json

Gunakan extends untuk mewarisi konfigurasi dasar. Konfigurasi dasar bersama, seperti @tsconfig/strictest, menyediakan praktik terbaik dari komunitas.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

Pemeriksaan Singkat

Opsi tsconfig mana yang mengaktifkan seluruh rangkaian pemeriksaan tipe ketat?

Ringkasan: tsconfig.json

tsc mengompilasi TypeScript menjadi JavaScript. tsconfig.json mengatur target (versi ES keluaran), module (sistem modul), outDir, strict, dan paths. strict: true menemukan paling banyak kesalahan. Gunakan --noEmit dalam CI untuk pemeriksaan tipe murni. Perluas konfigurasi dasar komunitas untuk menerapkan praktik terbaik.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengompilasi TS dan tsconfig.json” gratis?

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

Apa yang akan aku pelajari di “Mengompilasi TS dan tsconfig.json”?

Jalankan tsc untuk mengompilasi TypeScript, lalu konfigurasikan compiler dengan opsi tsconfig.json seperti strict, target, dan outDir. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 4 dari 4.

Berapa lama pelajaran “Mengompilasi TS dan tsconfig.json” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

Mengapa TypeScript: Tipe Menangkap Bug saat Kompilasi
Tipe Primitif, Union, dan Alias Tipe
Interface dan Tipe Object
Mengompilasi TS dan tsconfig.json

← Kembali ke Frontend Academy