TypeScript dan tsconfig.json

Artikel ini menjelaskan tentang TypeScript dan tsconfig.json.

Dimulai dari peran dasar TypeScript, kami akan menjelaskan dengan contoh spesifik bagaimana tsconfig.json berfungsi dalam sebuah proyek.

YouTube Video

TypeScript dan tsconfig.json

TypeScript adalah 'JavaScript dengan tipe data.'. Namun, untuk memanfaatkan TypeScript secara efektif dalam proyek nyata, sangat penting untuk memahami tsconfig.json dengan benar dan mengonfigurasinya secara sengaja.

Mengapa kita membutuhkan TypeScript?

Pertama, alasan utama menggunakan TypeScript adalah 'kemampuan untuk menemukan kesalahan sebelum kode dijalankan.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Kode ini tidak akan menyebabkan error di JavaScript sampai saat dijalankan, tetapi di TypeScript akan menghasilkan error tipe pada saat kompilasi.

Deteksi dini ini sangat meningkatkan efisiensi dan kualitas pengembangan.

Bagaimana cara menjalankan TypeScript?

Pada prinsipnya, TypeScript tidak dapat dijalankan secara langsung. Anda perlu mengubahnya menjadi JavaScript menggunakan tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Dengan melakukan operasi ini, tsconfig.json akan dibuat, menyediakan berkas utama yang mendefinisikan perilaku proyek TypeScript.

Apa peran tsconfig.json?

tsconfig.json adalah file konfigurasi yang menentukan 'file apa saja,' 'dengan aturan apa,' dan 'bagaimana cara mengonversinya.'. Meskipun awalnya tampak rumit, hanya beberapa pengaturan yang benar-benar penting.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Dengan hanya pengaturan ini, pengembangan TypeScript yang modern dan aman bisa dilakukan.

target: Versi JavaScript yang akan dihasilkan

target menentukan tingkat spesifikasi dari JavaScript output.

1"target": "ES2020"

Dengan ini, TypeScript akan menghasilkan JavaScript setara dengan ES2020. Untuk lingkungan lama, pilih ES5; jika hanya untuk lingkungan terbaru, pilih ES2022, dll.

Saat memilih ESNext

1"target": "ESNext"

• ESNext menentukan untuk menghasilkan sintaks JavaScript terbaru yang tersedia sebagaimana adanya. TypeScript tidak mentranspilasi sintaksnya, dan menyerahkannya kepada lingkungan runtime seperti Node.js atau browser untuk menanganinya.

• Oleh karena itu, ESNext cocok digunakan jika targetnya hanyalah Node.js terbaru atau jika Anda menggunakan Babel atau bundler untuk transpile secara terpisah. Di sisi lain, jika lingkungan runtime tidak mendukung sintaks terbaru, ini dapat menyebabkan error saat dijalankan, jadi perlu berhati-hati.

module: Menentukan format modul

module menentukan format modul.

1"module": "ESNext"

• ESNext adalah standar di lingkungan frontend dan Node.js modern.
• Pilih "CommonJS" hanya jika Anda membutuhkan CommonJS.

strict: Memaksimalkan keamanan tipe

strict adalah tombol untuk memaksimalkan keamanan TypeScript.

1"strict": true

• Mengaktifkan ini akan mendeteksi tipe ambigu dan potensi bug secara menyeluruh.

mode strict dan implicit any

Ketika Anda mengaktifkan strict, TypeScript menganggap variabel yang tipenya tidak dapat disimpulkan sebagai error.

1function printValue(value) {
2	console.log(value);
3}

• Variabel value ini tidak memiliki informasi tipe saat deklarasi, sehingga TypeScript tidak dapat menentukan tipenya. Akibatnya, any digunakan secara implisit, yang akan menimbulkan peringatan (error) dalam mode strict.

1function printValue(value: number) {
2	console.log(value);
3}

• Dengan secara eksplisit menentukan tipenya seperti ini, TypeScript dapat memahami bahwa 'variabel ini hanya menangani angka.'. Di TypeScript, yang lebih penting adalah tipenya dapat ditentukan secara unik daripada tipenya bisa dihilangkan.

include/exclude: Mengatur file mana yang akan dikompilasi

Di tsconfig.json, Anda dapat menentukan file mana yang akan dimasukkan dan file mana yang akan dikecualikan dari kompilasi.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Dengan ini, hanya file di bawah src yang akan dikelola oleh TypeScript.
• node_modules yang ditentukan di exclude akan dikecualikan dari kompilasi meskipun berada di dalam path yang sudah didaftarkan di include.

outDir: Menentukan direktori output

Tentukan outDir untuk mengatur lokasi output build Anda.

1"outDir": "dist"

• Dengan ini, semua hasil kompilasi akan ditempatkan ke folder dist. Dalam praktiknya, memisahkan kode sumber dari hasil build adalah hal yang umum.

rootDir: Menentukan direktori sumber

rootDir menentukan direktori yang dianggap TypeScript sebagai akar dari kode sumber.

1"rootDir": "src"

• Pengaturan ini memungkinkan TypeScript mempertahankan struktur direktori berdasarkan src saat menghasilkan file. Sebagai contoh, src/index.ts akan menjadi dist/index.js.

• Struktur direktori yang ditentukan di rootDir akan disalin ke outDir.

esModuleInterop: Menjembatani CommonJS dan ES Modules

Selanjutnya, mari kita lihat esModuleInterop.

1"esModuleInterop": true

• Jika diaktifkan, Anda dapat menggunakan modul CommonJS dengan sintaks import secara aman.

1import fs from "fs";

• Pengaturan ini hampir wajib jika menggunakan Node.js.

noImplicitAny: Melarang penggunaan 'any' secara implisit

Memperkuat pemeriksaan tipe pada tsconfig.json juga penting.

1"noImplicitAny": true

• Dengan ini, Anda bisa melarang penggunaan tipe any secara implisit. Ini memungkinkan Anda untuk mendeteksi dengan pasti tempat Anda lupa menentukan tipe.

Konfigurasi untuk mendeteksi kode yang tidak terpakai

Pengaturan untuk mendeteksi kode tidak terpakai juga bermanfaat untuk meningkatkan kemudahan pemeliharaan.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Dengan ini, variabel dan argumen yang tidak diperlukan akan langsung ditandai dengan peringatan.

lib: Mendefinisikan API bawaan yang tersedia untuk digunakan

lib adalah pengaturan yang menentukan API standar yang dianggap ada oleh TypeScript.

1"lib": ["ES2020", "DOM"]

• Dengan pengaturan ini, tipe-tipe berikut menjadi tersedia:. Dengan ES2020, fitur-fitur modern seperti Promise, Map, dan Set menjadi tersedia. Dengan DOM, API browser seperti document, window, dan HTMLElement menjadi tersedia.

Pada frontend, sertakan DOM; untuk proyek khusus Node.js, hapus DOM untuk mencegah tipe global yang tidak diperlukan masuk.

moduleResolution: Aturan pencarian modul

moduleResolution menentukan bagaimana modul yang dijelaskan pada pernyataan import akan diresolusikan.

1"moduleResolution": "Node"

Dua opsi utama adalah sebagai berikut:.

• Jika Anda memilih Node, aturan resolusi modul Node.js yang digunakan.
• Classic adalah metode lama khusus TypeScript, namun sekarang jarang digunakan.

Dalam lingkungan yang menggunakan Node.js atau bundler, aman untuk secara eksplisit memilih Node.

tsconfig.json minimal yang siap digunakan di produksi

Berdasarkan apa yang telah kita bahas sejauh ini, tsconfig.json minimal yang siap produksi akan terlihat seperti ini:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Konfigurasi ini memberikan fondasi yang aman untuk proyek frontend maupun Node.js.

Ringkasan: tsconfig.json adalah 'buku aturan'

tsconfig.json bukan hanya file konfigurasi, tetapi juga 'buku aturan' untuk seluruh proyek. Dengan tsconfig.json, kebijakan penting seperti berikut didefinisikan secara jelas:.

• Tingkat keamanan tipe.
• Konvensi penulisan kode untuk tim Anda.
• Pencegahan bug di masa mendatang.

Dengan memahami tsconfig.json, Anda dapat tidak hanya menulis TypeScript, tapi juga merancang proyek agar penggunaan TypeScript tetap aman.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video