TypeScript - tsconfig.json: Panduan untuk Pemula

Hai teman-teman, super bintang coding masa depan! ? Hari ini, kita akan mengemban perjalanan yang 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 yang ramah, dan kita akan menyelesaikan ini bersama, langkah demi langkah.

Apa itu tsconfig.json?

Sebelum kita mendalam, mari bicarakan apa sebenarnya tsconfig.json. Bayangkan Anda membangun sebuah rumah (proyek TypeScript Anda). Berkas tsconfig.json adalah seperti blueprint 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 dapat dimengerti oleh manusia dan komputer dengan mudah.

Ini adalah contoh sederhana:

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

mari kitauraikan ini:

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

CompilerOptions

Bagian compilerOptions adalah tempat dimana magik terjadi. Itu seperti memberitahu chef (kompiler 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 masing-masing:

• 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 sekumpulan opsi pemeriksaan tipe 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 untuk mengkompilasi berkas mana dan mengabaikan berkas mana:

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

• include: Ini memberitahu TypeScript untuk mengkompilasi semua berkas di 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 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 menggunakan JSX, mengaktifkan pemeriksaan tipe ketat, dan menyiapkan resolusi 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 masukan dan keluaran.

Opsi tsconfig.json yang Berguna

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

Opsi	Deskripsi
noImplicitAny	Buat kesalahan pada ekspresi dan deklarasi dengan jenis 'any' yang tersirat
strictNullChecks	Aktifkan pemeriksaan null ketat
strictFunctionTypes	Aktifkan pemeriksaan jenis fungsi ketat
strictBindCallApply	Aktifkan 'bind', 'call', dan 'apply' 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, murid coding saya! Kita telah mengemban perjalanan melalui negeri tsconfig.json, dari struktur dasarnya hingga skenario umum dan opsi yang berguna. Ingat, tsconfig.json adalah seperti pisau瑞士 Army knife untuk proyek TypeScript Anda - itu sangat multifungsi dan dapat dikustomisasi sesuai kebutuhan Anda.

Buat 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 merasa nyaman dengan kekuatannya.

Tetap mengoding, tetap belajar, dan terutama, bersenang-senang! Sampaijumpa lagi, semoga jenis Anda kuat dan kesalahan Anda sedikit. Selamat coding TypeScript! ??‍??‍?

Credits: Image by storyset