Panduan Awal untuk TypeScript - tsconfig.json

Hai sana, bintang coding masa depan! ? Hari ini, kita akan memulai perjalanan menarik ke dunia TypeScript dan temannya yang setia, berkas tsconfig.json. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan menjadi panduan ramah Anda, dan kita akan menyelesaikan ini bersama, langkah demi langkah.

Apa Itu tsconfig.json?

Sebelum kita mendalam, mari bicarakan apa sebenarnya tsconfig.json. Bayangkan Anda sedang membangun sebuah rumah (proyek TypeScript Anda). Berkas tsconfig.json adalah seperti rancangan bangunan untuk rumah Anda. Itu memberitahu TypeScript bagaimana Anda ingin proyek Anda dibangun, fitur mana yang Anda ingin gunakan, dan seberapa ketat Anda ingin aturan-aturannya.

Struktur Dasar Berkas tsconfig.json

Sekarang, mari kita lihat struktur dasar berkas tsconfig.json. Itu ditulis dalam format JSON, yang adalah cara untuk mengatur data yang mudah dipahami oleh manusia dan komputer.

Ini adalah contoh sederhana:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Berpikirkan ini:

1. Keseluruhan berkas diwrapping dalam kurung kurawal {}.
2. Didalamnya, kita memiliki bagian-bagian seperti compilerOptions, include, dan exclude.
3. Setiap bagian mengandung pengaturan khusus.

CompilerOptions

Bagian compilerOptions adalah tempat dimana magik terjadi. Itu seperti memberitahu chef (kompilator TypeScript) bagaimana Anda ingin makanannya (kode Anda) dipersiapkan. Mari kita lihat beberapa opsi umum:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

Mari menjelaskan setiap satu ini:

• target: Ini memberitahu TypeScript versi JavaScript mana yang akan dikompilasi. "es5" didukung luas oleh browser.
• module: Ini menentukan sistem modul mana yang akan digunakan. "commonjs" biasanya digunakan untuk proyek Node.js.
• strict: Ketika diatur ke true, itu mengaktifkan sebuah set opsi pemeriksaan tipe yang ketat.
• outDir: Ini adalah tempat dimana TypeScript akan menempatkan berkas JavaScript yang dikompilasi.
• rootDir: Ini adalah tempat dimana TypeScript harus mencari berkas sumber Anda.
• sourceMap: Ketika true, itu menghasilkan berkas source map, yang membantu debugging.

Include dan Exclude

Bagian include dan exclude memberitahu TypeScript tentang berkas mana yang akan dikompilasi dan yang akan diabaikan:

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

• include: Ini memberitahu TypeScript untuk mengkompilasi semua berkas di dalam folder src dan subfoldernya.
• exclude: Ini memberitahu TypeScript untuk mengabaikan folder node_modules dan semua berkas yang berakhir dengan .spec.ts (biasanya digunakan untuk berkas tes).

Skenario dan Konfigurasi Umum

Sekarang kita mengerti dasar-dasar, mari kita lihat beberapa skenario umum yang Anda mungkin temui dan bagaimana mengonfigurasi tsconfig.json untuk mereka.

Skenario 1: Proyek React

Jika Anda sedang bekerja di proyek React, Anda mungkin ingin konfigurasi seperti ini:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Konfigurasi ini dioptimalkan untuk pengembangan React. Itu memungkinkan Anda untuk menggunakan JSX, mengaktifkan pemeriksaan tipe yang ketat, dan menyiapkan pengaturan modul untuk struktur proyek React biasa.

Skenario 2: Proyek Backend Node.js

Untuk proyek backend Node.js, Anda mungkin menggunakan konfigurasi seperti ini:

{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

Konfigurasi ini cocok untuk proyek backend Node.js. Itu mengkompilasi ke versi JavaScript yang lebih baru (ES2018), menggunakan modul CommonJS, dan menyiapkan direktori masuk dan keluar.

Opsi tsconfig.json yang Berguna

Berikut adalah tabel dari beberapa opsi tsconfig.json yang Anda mungkin ingin gunakan:

Opsi	Deskripsi
noImplicitAny	Buat kesalahan pada ekspresi dan deklarasi dengan jenis 'any' yang implisit
strictNullChecks	Aktifkan pemeriksaan null yang ketat
strictFunctionTypes	Aktifkan pemeriksaan jenis fungsi yang ketat
strictBindCallApply	Aktifkan 'bind', 'call', dan 'apply' yang ketat pada fungsi
noUnusedLocals	Laporkan kesalahan pada variabel lokal yang tidak digunakan
noUnusedParameters	Laporkan kesalahan pada parameter yang tidak digunakan
noImplicitReturns	Laporkan kesalahan saat tidak semua jalur kode dalam fungsi mengembalikan nilai
noFallthroughCasesInSwitch	Laporkan kesalahan untuk kasus fallthrough dalam pernyataan switch

Ingat, Anda selalu dapat merujuk ke dokumentasi resmi TypeScript untuk daftar lengkap opsi dan deskripsi mereka.

Kesimpulan

Dan itu adalah dia, murid coding saya! Kita telah berpergian melalui negeri tsconfig.json, dari struktur dasar hingga skenario umum dan opsi yang berguna. Ingat, tsconfig.json adalah seperti pisau Swiss Army untuk proyek TypeScript Anda - itu sangat multifungsi dan dapat dikonfigurasi untuk memenuhi kebutuhan khusus Anda.

Buatlah eksperimen dengan berbagai konfigurasi saat Anda terus mengembangkan TypeScript. Setiap proyek mungkin memerlukan seting yang sedikit berbeda, dan itu baik! Semakin Anda bermain dengan tsconfig.json, semakin Anda akan merasakan kekuatannya.

Terus coding, terus belajar, dan terutama, bersenang-senang! Sampai jumpa lagi, semoga jenis Anda kuat dan kesalahan Anda sedikit. Selamat belajar TypeScript! ??‍??‍?

Credits: Image by storyset