Typescript, Javascript dengan Gaya

Javascript merupakan salah satu bahasa pemrograman paling populer di dunia. Bisa digunakan di server maupun client secara bersamaan menjadi salah satu faktor utamanya.

Gaya penulisan dinamis alias dynamic typing menjadi keunggulan bahasa yang satu ini. Sebab, programmer bisa lebih ekspresif tanpa perlu pusing memikirkan tipe data.

Tetapi keunggulan tersebut bisa jadi menjengkelkan ketika kode yang kita tulis sudah semakin kompleks. Kode yang sangat banyak jika tidak teliti bisa berakibat runtime error, salah satunya ini.

Uncaught TypeError: Cannot read properties of undefined (reading 'val')
    at :1:5

Pada saat seperti ini, fitur static typing dan type checking akan sangat berguna. Oleh karena itulah, hadir Typescript sebagai alternatif dari Javascript dengan sedikit gaya 😎.

Tentang Typescript

Typescript merupakan superset dari Javascript. Bahasa ini adalah Javascript namun dengan tambahan fitur, utamanya optional static typing, type checking, class, dan interface.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

~ typescriptlang.org

Kode Typescript yang kita tulis nantinya akan dikompilasi menjadi Javascript, karena baik browser maupun Node hanya mengerti Javascript, bukan Typescript.

Bahkan, kita dapat menulis kode Javascript pada Typescript, namun tidak berlaku sebaliknya.

Fitur utama Typescript adalah menambahkan type pada Javascript. Simpelnya, type atau tipe data adalah properti yang harus menempel pada setiap data yang kita buat.

Baik itu variable, function, parameter, dan lain sebagainya. Tanpa type, kode Typescript akan menjadi Javascript biasa.

Kenapa Pakai Typescript?

Kalau ditanya kapan dan kenapa pakai Typescript? Jawabannya ada di diri masing-masing. Tergantung preferensi dan kebutuhan.

Tapi secara umum, Typescript biasa digunakan pada kode program yang dirancang untuk terus mengembang. Untuk proyek yang relatif kecil, mungkin menggunakan Javascript biasa sudah cukup.

Beberapa web framework populer seperti Angular, Vue(v3), Nuxt (v3 *beta), dan NestJS juga dibuat dengan Typescript. Salah satu alasannya adalah sistem static type yang membantu mengurangi runtime error.

Selain itu, pengembangan sisi back-end (server) pada lingkungan NodeJS juga sudah lumrah menggunakan Typescript. Bahkan, ada Deno yang mendukung Typescript secara native.

Alasan lain kenapa pakai Typescript? Berikut ini ada beberapa.

• Self Documented Code — Pemberian type pada setiap data meningkatkan keterbacaan kode. Terutama ketika menulis fungsi dengan parameter.
• Compile dulu, Cek, Baru Jalan — Kode Typescript harus dikompilasi menjadi Javascript terlebih dahulu. Pada proses ini kemungkinan error akan dikeluarkan, sehingga bisa langsung diperbaiki. Good bye Runtime Error 👋
• Functional Programming Bisa — Sama seperti Javascript, Typescript juga mendukung functional programming.
• Berorientasi Objek (OOP) — Abstraction, encapsulation, inheritance, polimorphism semua ada di Typescript tanpa hack-hack lagi.
• Menghidupkan fitur IDE/Code Editor — Ini yang penting. Code completion, suggestion, error checking, dan Intellisense yang "kebanyakan" tidak didukung di Javascript biasa.
• Developer Experience — Pengalaman menggunakan Typescript (menurut saya) jauh lebih "wah" ketimbang dengan Javascript biasa. Compiler dan IDE setia mengingatkan, intellisense aktif, ditambah kode bebas runtime error itu benar benar mengesankan.

Dari Javascript ke Typescript

Kode Javascript bisa jadi membingungkan ketika pertama kali dibaca. Ini karena penulisan dinamisnya, kecuali kita benar-benar jago dalam penamaan — karena dari pengalaman pribadi, memberi nama itu sulit.

Coba saja perhatikan kode berikut.

function add(a, b){
    return a + b;
}

function fullName(firstName, lastName){
    return firstName + " " + lastName;
}

Kita punya 2 fungsi di situ, keduanya sama-sama menerima 2 parameter tetapi berbeda tujuan. Katakanlah fungsi add untuk menjumlahkan 2 angka, dan fullName untuk menggabungkan nama depan dan belakang.

Nah, sekarang coba kita panggil 2 fungsi tersebut.

function add(a, b){
    return a + b;
}

function fullName(firstName, lastName){
    return firstName + " " + lastName;
}

console.log(add(2, 4));                  // output 6
console.log(add("inva", "sikode"));      // output invasikode
console.log(fullName("inva", "sikode")); // output inva sikode
console.log(fullName(2, 4));             // output 24

Walaupun kita melakukan "penyalahgunaan" fungsi pada kode tersebut (add("inva", "sikode") dan fullName(2, 4)), tapi Javascript tetap mengijinkannya. Karena mau bagaimanapun kode tersebut tetap valid.

Kode seperti ini sering membuat bingung. Apalagi ketika ada nama fungsi yang ambigu.

Dengan Typescript, masalah tersebut bisa teratasi. Walaupun tidak semua masalah, paling tidak kita bisa memberi tahu jenis data apa yang dapat diterima oleh fungsi.

Sekarang kita coba ubah 2 fungsi tersebut dengan sintaks Typescript.

function add(a: number, b: number): number{
    return a + b;
}

function fullName(firstName: string, lastName: string): string{
    return firstName + " " + lastName;
}

Cukup menambahkan tipe data, lalu mengganti ekstensi file dari .js ke .ts, maka kode Typescript kita sudah jadi.

Sekarang kita coba panggil fungsi tersebut persis seperti sebelumnya.

function add(a: number, b: number): number{
    return a + b;
}

function fullName(firstName: string, lastName: string): string{
    return firstName + " " + lastName;
}

console.log(add(2, 4));                  // output 6
console.log(add("inva", "sikode"));      // error
console.log(fullName("inva", "sikode")); // output inva sikode
console.log(fullName(2, 4));             // error

Kalau di-compile, kode tersebut pasti error. Bahkan sebelum kita jalankan kemungkinan IDE / Code Editor kita akan marah-marah.

Argument of type 'string' is not assignable to parameter of type 'number'.
Argument of type 'number' is not assignable to parameter of type 'string'.

Nah, sekarang mau tidak mau kita harus menggunakan fungsi sebagaimana mestinya. Dengan begitu kode yang kita tulis tidak akan membingungkan. Selain itu, peringatan yang diberikan oleh compiler (atau IDE) juga bisa meminimalisir adanya bug pada proyek yang kita buat.

Bagaimana? Tertarik mencoba Typescript untuk proyek selanjutnya? Langsung saja sambang ke websitenya di typescriptlang.org

Selamat berkoding ria 👋