3 tahun berjalan menggunakan bahasa pemrograman javascript tak sedikit pengalaman yang bisa didapat untuk mempelajari bahasa pemrograman satu ini, aslinya saya mengetahui ini sejak tahun 2012 dimana saya masih sangat aktif melakukan blogging pada situs lama saya. Satu hal yang awalnya ketahui tentang javascript ialah bahasa pemrograman untuk membuat animasi bahkan memutar musik secara background di halaman web. Jika saya terbayang pada saat itu, saya hanya bisa tersenyum melihat perkembangannya sekarang.
Pada 3 tahun yang lalu saya bahasa ini diperkenalkan kembali oleh teman saya, dia mengatakan bahwa bahasa pemrograman ini bisa dapat bersaing dengan PHP dan benar saja saya pertama kali menggunakan bahasa pemrograman ini untuk belajar membuat backend menghasilkan sebuah blog yang bisa kalian lihat saat ini juga. Jika terbiasa menggunakan PHP mungkin kalian juga akan cepat terbiasa menggunakan javascript karena syntaxnya lumayan mirip hanya saja ini non - blocking sehingga mungkin akan ada penyesuaian.
Karena saya merupakan orang yang bisa bahasa pemrograman dari bahasa pascal dan vb net, saya berpikir ada kekurangan yang mungkin beberapa orang menganggap bahwa itu bukanlah masalah. Anggap saja seperti static typed, somehow banyak orang berdebat tentang hal ini karena dianggap tidak mempengaruhi cara kerja sebuah program. Akan tetapi di dunia nyata hal ini sangat dibutuhkan apalagi kalian memanage banyak modul dalam suatu aplikasi, terkadang dokumentasi berupa komentar juga tidak membantu sama sekali karena anda butuh untuk membuka file tersebut bahkan penggunaan JSDoc juga tidak begitu maksimal di kondisi tertentu.
Ini yang membuat saya galau sekali untuk lanjut mempelajari javascript, meskipun kadang saya tidak paham dengan ECMAScript versi ini dan itu ataupun tool - tool pendukung lainnya akan tetapi bloated tool ini kadang sangat tidak berguna di fase production. Selang beberapa waktu ketika ingin mencoba untuk memilih - milih sebuah framework yang cocok untuk membuat skripsi, saya hampir mencoba seluruh framework javascript yang ada dan akhirnya bertemu dengan salah satu framework terunik yang bernama NestJS.
Saya sempat membuat artikelnya pada blog ini, namun tidak saya lanjutkan karena waktu dalam membuat skripsi juga cukup cepat sehingga saya tidak punya waktu untuk mempelajarinya. Ada satu hal yang menarik dengan framework tersebut yaitu dia menggunakan TypeScript sebagai fondasi bahasa pemrogramannya sehingga saya tidak asing saat pertama kali melihatnya.
Apa itu TypeScript
Jika kalian sempat mencari - cari ke mesin pencari beberapa mengatakan bahwa typescript merupakan bahasa pemrograman superset sintak dari javascript, sehingga kalian dapat menyebut bahwa typescript merupakan javascript dengan sederet aturan yang sangat ketat. Saya selaku orang yang berangkat belajar pemrograman dari bahasa pemrograman pascal sangat senang dengna ini, karena akan sedikit terbantu dengan adanya tipedata yang sangat strict sehingga tidak memancing saya untuk membaca keseluruhan program.
Typescript tidak merubah sifat javascript itu sendiri karena jika kalian mencoba untuk menyalahi aturan yang ada pada typescript dan mencompilenya dalam bentuk project yang sudah jadi secara paksa, kalian akan tetap mendapati pesan kesalahan undefined atau sejenisnya. Jadi bagi saya salah jika mengatakan bahwa typescript merupakan bahasa pemrograman baru yang berbeda dengan javascript, bahkan bagi saya typescript adalah bahasa pemrograman yang digunakan sebagai tool dalam melakukan pengembangan aplikasi yang berbasis javascript.
Fitur TypeScript
Pada typescript fitur - fitur yang tawarkan bisa dikatakan tidak begitu menarik bagi beberapa orang bahkan cenderung menyulitkan karena ada beberapa penambahan yang membuat beberapa orang tidak nyaman, meskipun begitu hal tersebut menjadi suatu fitur yang sangat dicari - cari apalagi jika kalian berangkat belajar bahasa pemrograman dari bahasa pascal, c++ maupun java.
Static Type Checking
Mari kita mulai dari salah satu fitur yang paling top di typescript karena inti dari adanya typescript adalah static type checking yang merupakan salah satu fitur yang digunakan untuk mengecek tipe pada setiap variable yang ada untuk mencegah terjadinya kesalahan, mari kita mulai dari javascript terlebih dahulu.
let variableKu = 1
variableKu = variableKu + '1'
console.log(variableKu)
Jika kalian jalankan kode tersebut maka kalian tidak akan menemukan error apapun, karena ketika kalian menjalankan kode tersebut secara otomatis variable yang berisi angka akan terconvert menjadi string dan akan menyatu (referensi: How does adding String with Integer work in JavaScript? [duplicate]).
Dengan menggunakan typescript hal ini akan dicegah untuk tidak terjadi, mari kita coba untuk melihat kodenya jika kita ubah menjadi typescript.
let variableKu: number = 1
variableKu = variableKu + '1'
console.log(variableKu)
Jika kalian jalankan kode tersebut maka kalian akan menemukan error pada kode editor ataupun IDE yang kalian gunakan akan tetapi kode tersebut masih dapat dijalankan dengan baik, hal itu terjadi karena typescript akan mentranspile kodenya ke javascript dan akhirnya kembali dijalankan sebagai javascript sehingga kode tersebut dapat berjalan meskipun IDE menunjukkan adanya pesan kesalahan.
Wow sepertinya ini tidak menyelesaikan masalah diproduction, mungkin saya bisa katakan iya karena javascript pada dasarnya tidak memiliki fitur ini sehingga kalian mungkin perlu menambahkan sesuatu seperti parseInt() atau sejenisnya.
Karena typescript menghadirkan static type checking, beberapa fitur pendukung agar penggunaan static type lebih mantap bertambah menjadi beberapa fitur seperti enum, interface, mixin dan lain sebagainya yang penulis mungkin lupa sebutkan atau belum jauh mengexplore.
Decorator
Bagi saya jika typescript hadir hanya dengan fitur static type checking, saya hanya beranggapan bahwa typescript hanyalah javascript yang cuman nambah tipe data didepan atau diakhirnya tapi sayangnya tidak. Di dunia java ini adalah hal yang biasa bahkan bagi untuk pengguna spring ecosystem, pada pemahaman versi saya decorator pada typescript akan bekerja sebelum sesuatu di eksekusi entah itu sesuatunya berupa variable, class ataupun method.
A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.
Itulah yang disebut pada situs dokumentasinya, mari kita coba untuk membuat contohnya terlebih dahulu :
type Consturctor = { new (...args: any[]): any };
function ControlGitu<T extends Consturctor>(BaseClass: T) {
return class extends BaseClass {
toString() {
return this['name'].toUpperCase()
}
};
}
function CheckDulu(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
const original = descriptor.value;
descriptor.value = function (...args: any[]) {
if(args[1] === true) {
if(args[2] === undefined) {
throw 'Kalau punya SIM ya harus tau umur toh'
} else if (args[2] < 17) {
throw 'Belom cukup umur'
}
}
const result = original.call(this, ...args);
return result;
}
}
@ControlGitu
class SebuahClass {
public name: string
public age?: number
constructor(name: string) {
this.name = name
}
@CheckDulu
public static buat(name: string, sim: boolean, age?: number) {
const instance = new SebuahClass(name)
instance.age = age
instance.name = name
return instance
}
public cetak() {
console.log(this.name)
}
}
Mari kita buat penjelasan sedikit tentang kode diatas :
- Function ControlGitu merupakan class decorator yang tugasnya untuk mengubah fungsi yang sudah ada yaitu
toString()agar hanya mereturn nama dari SebuahClass tanpa ngereturn semua variable yang ada di dalamnya. Disini kamu nggak bisa nambah function diluar object prototype, jadi kamu cuman bisa ngubah aja fungsi yang sudah ada. - Function CheckDulu merupakan class decorator yang tugasnya untuk ngecek isi value parameter yang ada di method yang mau dipanggil, jadi sebelum static method buat dijalanin dia ngecek dulu apakah argumen dengan indeks kesekian sudah sesuai dengan kondisi atau tidak. Kalau sesuai ya kita throw sebuah error karena yang kita tangkep kalau yang memenuhi syarat berarti nggak boleh jalan, jadi kalau nggak sesuai syarat berarti boleh jalan sampe fungsinya di panggil.
Catatan penting disini decorator bukanlah sebuah fungsi yang digunakan untuk mengubah atau menambah sesuatu yang ada disebuah class ataupun object, decoratorpun nggak 100% static typing karena hampir keseluruhannya bertipe data any sehingga tipe datanya pasti bisa beraneka ragam. Harap dimaklumi juga karena ini masih experimental, tapi kadang ini bermanfaat untuk membuat semacam middleware sebelum sebuah method dieksekusi secara penuh.
Mendukung 100% Javascript
Jika kalian menggunakan javascript pada project typescript hal itu bukanlah sebuah masalah karena typescript merupakan salah satu tool yang bersifat opsional, tidak memaksa kecuali jika kalian mengaturnya pada file bernama tsconfig.json.
Ini yang membuat saya tertarik menggunakan typescript ketimbang kompetitor sejenisnya seperti CoffeScript atau PureScript, kedua bahasa superset ini justru gaya penulisannya sangat jauh dari javascript sehingga kalian pun perlu mempelajari dari dasar sebelum bisa menggunakannya.
Selain itu ketika typescript mendukung penuh javascript maka secara tidak langsung pengembang juga diberi waktu untuk beradaptasi menggunakan typescript, sedikit demi sedikit merefaktor seluruh base kode yang digunakan agar seluruh variable yang ada bisa ditentukan tipedata nya.
Kapan Menggunakan TypeScript ?
Pertanyaan terpenting yang biasa saya dengar yaitu kapan saat yang tepat menggunakan typescript, terkadang saya jawab ketika kamu siap maka kamu bisa menggunakannya. Baik untuk mengerjakan frontend atau backend saya rasa typescript sangatlah cocok untuk kedua lingkungan tersebut, karena dari beberapa sumber menyebutkan bahwa bug yang biasa terjadi karena bahasa javascript bisa dideteksi oleh typescript sebelum proyek itu benar - benar bisa dijalankan pada fase production.
Jika kalian masih baru dalam atau baru terjun dunia pembuatan aplikasi, setidaknya pelajari terlebih dahulu bahasa pemrograman javascript. Ini adalah bagian fundamental yang setidaknya harus dilewati, karena beberapa hal teknis mengenai javascript masih sangat relevan pada typescript sehingga hal ini perlu dipersiapkan dengan baik.
Nah setelah ilmu dasar javascript kalian sudah cukup, kalian tidak perlu lagi menunggu untuk mendapatkan sebuah big project pada sebuah tim untuk mempelajari typescript karena hampir seluruh perusahaan yang dulunya menggunakan javascript akhirnya menyarankan beberapa pengembangnya untuk mempelajari typescript. Ini bukan masalah pada dynamic typing yang ada pada javascript, namun terletak dari bagaimana sebuah proyek dapat berjalan tanpa cekcok terlebih dahulu dengan urusan tipedata yang dihasilkan dan yang akan digunakan.
Sumber Belajar
Sebagai penunjang pembelajaran typescript, saya akan melampirkan beberapa sumber belajar yang pernah saya kunjungi beberapa waktu lalu dalam mempelajari typescript ini.
- Tutorial TypeScript by Nusendra.com
- Belajar TypeScript by Programmer Zaman Now
- TypeScript Basic By Fireship
Refference : Typescript Handbook Decorator A Complete Guide to TypeScript Decorators Why TypeScript ?