Pada saat saya mempelajari bahasa pemograman baru, fokus utama saya adalah bagaimana caranya semudah mungkin menjalankan kode program dan melihat hasilnya. Saya cenderung menulis kode program dalam satu function besar. Ini bertentangan dengan fokus saya setelah mahir: bagaimana mengetahui cara kerja aplikasi tanpa membaca seluruh kode program dan bagaimana memperbaiki bagian tertentu yang bermasalah tanpa merusak yang lain. Untuk mencapai tujuan tersebut, saya perlu menerapkan konsep module. Saya bisa mengetahui cara kerja aplikasi secara garis besar dengan melihat komunikasi antar module. Untuk memperbaiki kesalahan atau mengembangkan fitur baru, saya bisa hanya fokus ke kode program di module yang bersangkutan. Pada awalnya, JavaScript tidak memiliki konsep module. Fokus utama JavaScript adalah kemudahan. Cukup menulis kode program di HTML dan buka di browser, maka kode program tersebut akan
dikerjakan. Ini lebih dari cukup untuk menambahkan animasi yang menarik di web. Akan tetapi, seiring waktu berlalu, JavaScript semakin sering dipakai untuk sesuatu yang lebih besar dan serius seperti single page application (SPA). Konsep module-pun mulai diperkenalkan secara tidak resmi seperti Asynchronous Module Definition (AMD), CommonJS, Node.js modules, SystemJS dan Universal Module Definition (UMD). ES6 pada akhirnya memperkenalkan keyword Dari teknik module non-resmi yang ada, Node.js modules (lebih tepatnya implementasi CommonJS oleh Node) adalah yang paling populer. Pada Node.js modules, terdapat 3 variabel yang dapat dipakai di kode program: Sebagai contoh, berikut ini adalah cuplikan kode program
Untuk memakai module di atas, saya bisa menggunakan kode program seperti berikut ini:
Lalu bagaimana dengan module di TypeScript? Sama seperti ES6, TypeScript menggunakan keyword Bagaimana caranya menggunakan Node.js modules di kode program TypeScript? Sebagai contoh, saya sudah menambahkan dependency
Walaupun kode program di atas bisa berjalan dengan baik, sesungguhnya ia melanggar standar ECMAScript.
Agar program dapat kembali bekerja, saya perlu mengubahnya menjadi seperti berikut ini:
Kode program di atas menggunakan default import yang merupakan bagian dari ES6. Tujuan dari default import adalah untuk mendapatkan default export. Pada ES6, default export dilakukan dengan menggunakan Contoh lainnnya, saya bisa mengganti kode program seperti berikut ini:
menjadi seperti:
Pada kode program di atas, kedua import di atas sama-sama valid karena apa yang di-export oleh Sebagai alternatif, saya juga bisa menggunakan syntax yang hanya berlaku di TypeScript, seperti:
Dengan asumsi bahwa ES6 akan menjadi standar di masa depan, saya lebih memilih mengaktifkan |