TypeScript "hanyalah" JavaScript dengan typing. Yang singkatnya, jika kamu menulis kode JavaScript, berarti kamu menulis kode TypeScript tanpa typing. TypeScript menyebut dirinya sebagai "JavaScript that scales", karena memang project skala besar akan ribet bila tidak memiliki typing.

Sebelum kita beranjak lebih jauh, sebagai informasi, JavaScript adalah bahasa program yang dynamic, dan juga duck typing dan weak.

Yang maksudnya, kita tidak peduli dengan "type" nya, melainkan kita peduli dengan apa yang bisa dikerjakannya. Mari kita bandingkan dengan bahasa program lain yang sama-sama dynamic, namun strong.

Contoh diatas menggunakan Ruby dan Python yang sama-sama dynamic sebagai pebanding. Lihat contoh yang JavaScript, JS tetap melakukan "apa yang bisa dia lakukan", yakni menampilkan karakter 2 dan nomor 2 (jadinya "22").

Beda dengan Ruby & Python yang malah menjadi error, karena kita tidak mengubah nomor tersebut menjadi string secara eksplisit.

Tidak heran mengapa seringkali kita melakukan type checking seperti:

if (typeof something !== 'something') {
  // throw error here
}

Agar kita mendapatkan keluaran yang sesuai dengan ekspektasi kita. Kadang juga kita melakukan melakukan "konversi" secara paksa, misal seperti kode ini:

const isThisStringOrNumber = ~~value

Yang mana akan mengubah menjadi 0 bila bukan nomor (NaN), selainnya, bila nilai value tersebut adalah string "21", maka nilai dari isThisStringOrNumber tersebut menjadi nomor 21.

Oke, sekarang dimana letak "programmer enggak beneran" nya?

coding coding coding

Setiap orang bisa menulis kode, namun tidak semua bisa melakukan programming. Nulis kode itu gampang, bisa copas dari stackoverflow, bisa nyontek kode orang lain, dsb. Misal contoh:

function doSomething() {
  return new Promise((resolve, reject) => {
    return (Date.now() + '').includes(Math.floor(Math.random() * 21) + '')
      ? resolve('Some value')
      : reject('Some random error')
  })
}

doSomething()
  .then(message => console.log(message))
  .catch(err => console.error(err))

Kamu tau enggak "nilai keluaran" dari method doSomething itu apa? Dengan menggunakan typing, kita dipaksa untuk "benar-benar" paham akan kode yang kita tulis.

Apakah nilai keluarannya adalah Promise? Jika iya, Promise tersebut memiliki tipe apa untuk nilainya?

Mari kita lihat versi TypeScript nya:

function doSomething(): Promise<string> {
  return new Promise((resolve, reject) => {
    return (Date.now() + '').includes(Math.floor(Math.random() * 21) + '')
      ? resolve('Some value')
      : reject('Some random error')
  })
}

doSomething()
  .then(message => console.log(message))
  .catch(err => console.error(err))

Yang mana tidak terlalu beda kan kodenya? Tapi apa yang perlu gue fokuskan terhadap kode diatas?

  1. Gue secara eksplisit ngasih tau nilai keluaran dari method doSomething
  2. Jika method doSomething tidak memiliki nilai keluaran bertipe string, maka akan error
  3. Hey method includes hanya bisa digunakan oleh string, dan parameter nya juga harus bernilai string. Bagaimana saya bisa tau hah?

Itu contoh sederhana saja, mungkin di project beneran kita akan berurusan dengan tipe data yang lebih kompleks dari primitif. Selain untuk mengurangi kemungkinan terjadinya runtime error, menggunakan typing juga bisa untuk membuat lebih produktif terlebih dengan adanya static analysis yang biasanya menyediakan "auto complete" juga sesuai type nya.

Selengkapnya bisa baca diutas ini.

Anggap kita sudah tertarik untuk menggunakan typing di JavaScript, sebagai info, TypeScript bukanlah satu-satunya bahasa yang memiliki "typing" dan di "compile" menjadi JavaScript, ada Elm; Reason, dsb. Karena yang paling populer adalah TypeScript, so here we are.

Compiler

Entah menggunakan TypeScript ataupun JavaScript biasa (yang katanya ehm modern), kita akan berurusan dengan compiler. Atau transpiler. Apapun itu.

Banyak tugas yang bisa dilakukan oleh compiler, yang intinya, compiler adalah sebuah program yang melakukan transformasi terhadap kode menjadi kode lain.

Misal, Babel mengubah kode ES-something menjadi kode JavaScript yang bisa dipahami browser, Svelte & Vue menggunakan FrameworkNameScript mereka ke kode JavaScript yang bisa dipahami browser, Rustc mengubah kode Rust menjadi kode binary yang bisa dipahami oleh target compile nya (platform), dsb.

Untuk TypeScript itu sendiri, compiler nya bertugas untuk melakukan pemeriksaan typing plus mengubah kode TypeScript menjadi JavaScript. Ini contohnya:

Contoh diatas hanyalah untuk kompilasi "murni" melakukan transformasi dari file TypeScript menjadi JavaScript. Compiler untuk TypeScript bernama tsc yang bisa di-install baik di local project ataupun global dengan cara:

yarn global add tsc

Maka kamu bisa langsung menggunakan program tsc di terminal kamu.

Type apa saja yang ada di TS?

Semua yang ada di JS. Dari tipe data primitif, Promise (thenable), sampai Interface buatanmu sendiri. Jika kamu memang "tau" tentang JavaScript, maka seharusnya kamu tau dengan TypeScript.

Tidak ada tipe data spesial/ekslusif yang ada di TypeScript, karena pada dasarnya TypeScript hanyalah JavaScript yang memiliki typing.

Jika kamu masih bingung dengan menggunakan TypeScript di project kamu, kayaknya harus fikirin lagi deh kamu benar-benar sudah mengerti JavaScript atau belum :))

Karena, well, JavaScript enggak semudah yang dibayangkan. Dan mungkin kamu belum mengetahui JavaScript.

Build tool what?

Build tool bukan hanya Webpack seperti yang kamu ketahui, meskipun pada dasarnya Webpack hanyalah module bundler. Build tool adalah kumpulan workflow yang ada di project kamu yang bukan berada di runtime.

Alur-alur seperti:

  • Jika di development environment...
  • Lacak file mana saja yang berubah
  • Bila ada yang berubah, compile
  • Lalu buat file source map nya
  • Jika di build environment...
  • Compile file-file yang ada
  • Buat versi optimized + minified nya
  • Obfuscate code in case you are working on so-enterprise-proprietary-confidental work
  • Dan sebagainya

Nah, build tools itulah seorang aktor yang melakukan alur tersebut.

Jika kamu belum terbiasa dengan terminal (dan pastinya compiler), mulailah biasakan. Karena beginilah cara membuat software, setiap orang yang membuat software pasti memiliki build/compile time meskipun hasil dari software tersebut bukanlah binary.

Enggak kayak bahasa program sebelah yang–skip. Dilarang menjelek-jelekan bahasa program lain, oke?

...GAK ADA BUILD TIME.

JavaScript murni juga gak ada build time deng.

Ya, kamu harus berurusan dengan build tools. Jangan bikin aplikasi yang gak ada build/compile time nya.

Where is the tutorial???

Gak ada, sedih.

Tulisan ini cuma pengen ngasih gambaran tentang bagaimana membuat aplikasi web dari sudut pandang berbeda. Enggak bermaksud untuk memperibet cara membuat aplikasi web, jika kamu sudah terbiasa dengan workflow yang sebelumnya, yaudah.

Ganti ke workflow yang sekarang, pakai TypeScript.

Haha bercanda deng, terserah lu pada aja dah.

Penggunaan Typing–dalam konteks ini TypeScript– cocok untuk project yang sudah memiliki fondasi kuat, project yang siap dibawa ke skala manapun, project yang melibatkan banyak developer, dll.

Kamu akan merasakan manfaat-manfaat yang ditawarkan oleh TypeScript setelah....

Menggunakan TypeScript?

Sekian, terima kasih.

Dan jangan lupa, setiap bahasa program pasti memiliki kekurangan dan kelebihannya masing. Dan TypeScript banyak kelebihannya daripada JavaScript murni karena pada dasarnya TypeScript adalah pelengkap dari kekurangan yang ada di JavaScript.

Dan ya, TypeScript nambahin keribetan. Tp gpp, mending ribet diawal terus enak di yang akan datang daripada sebaliknya.