Menggunakan Babel dengan TypeScript

Babel vs tsc untuk TypeScript

Ketika membuat proyek JavaScript modern, anda mungkin bertanya pada dirimu sendiri, apa cara yang benar untuk mengkonversi berkas-berkas dari TypeScript ke JavaScript.

Sering kali jawabannya adalah “tergantung”, atau “seseorang mungkin telah memutuskan untukmu” bergantung pada proyeknya. Jika anda membangun proyekmu dengan framework yang sudah ada, seperti tsdx, Angular, NestJS atau framework apapun yang disebutkan di Getting Started.

Namun, heuristic yang berguna bisa jadi:

• Apakah keluaran dari build-mu sebagian besar sama seperti berkas-berkas yang di-input-kan? Jika iya, maka gunakan tsc
• Apakah anda butuh build pipeline dengan output yang memiliki beberapa potensi? Jika iya, maka gunakan babel untuk transpiling dan tsc untuk pemeriksaan tipe

Babel untuk transpiling, tsc untuk tipe

Ini adalah pola umum untuk proyek dengan infrastruktur build yang ada, yang mungkin telah ditransfer dari kode JavaScript ke TypeScript.

Teknik ini adalah pendekatan hybrid, menggunakan preset-typescript Babel untuk menghasilkan berkas-berkas JS mu, dan kemudian menggunakan TypeScript untuk pemeriksaan tipe dan pembuatan berkas .d.ts

Dengan menggunakan dukungan Babel untuk TypeScript, anda mendapatkan kemampuan untuk bekerja pada pipeline build yang sudah ada dan lebih seperti memiliki JS yang lebih cepat, karena Babel tidak melakukan pemeriksaan tipe pada kodemu

Pemeriksaan Tipe dan menghasilkan berkas d.ts

Kelemahan menggunakan Babel adalah Anda tidak mendapatkan pemeriksaan tipe selama transisi dari TS ke JS. Ini berarti bahwa kesalahan tipe yang Anda lewatkan di editor-mu dapat menyusup ke dalam kode saat fase produksi.

Selain itu, Babel tidak dapat membuat berkas .d.ts untuk TypeScript-mu yang dapat mempersulit pengerjaan proyekmu jika itu adalah sebuah pustaka.

Untuk mengatasi hal tersebut, Anda perlu melakukan set up perintah untuk memeriksa tipe pada proyekmu menggunakan TSC. Ini seperti menduplikasi beberapa konfigurasi babel menjadi sesuai dengan tsconfig.json](/tconfig) dan memastikan bahwa flags ini aktif:

"compilerOptions": {
  // Memastikan bahwa berkas-berkas .d.ts dibuat oleh tsc, bukan berkas .js
  "declaration": true,
  "emitDeclarationOnly": true,
  // Memastikan bahwa Babel secara aman dapat men-transpile berkas-berkas di proyek TypeScript
  "isolatedModules": true
}

Informasi lebih lanjut mengenai flags tersebut:

• isolatedModules
• declaration, emitDeclarationOnly