☕ Belajar TypeScript Dengan TSdx

JAVASCRIPTTYPESCRIPTTSDX

TypeScript?

Sebenarnya saya agak malas harus memakai TypeScript karena menurut saya TypeScript atau saya sebut TS disini, sebenarnya sifatnya hanyalah sebagai temporary safe guard. Dari website TypeScript, statemen yang sering di tonjolkan adalah

TypeScript - JavaScript that scales.

Saya gak terlalu setuju dengan statemen resmi tersebut karena menurut saya TypeScript ya TypeScript BUKANLAH JavaScript artinya TS lebih cocok dikatakan sebagai bahasa pemrograman baru daripada “JavaScript tapi dengan Type”. Sepertinya statemen tersebut hanyalah trik marketing supaya pengembang JavaScript bisa melirik ke TS.

Meskipun TS dibilang adalah superset JavaScript artinya TS mempunyai kompatibilitas yg tinggi dimana anda bisa memakai kode atau pustaka JavaScript sepenuhnya di TS tetapi tidak sebaliknya (kecuali tentu saja anda sudah mengkompilasi TS ke JS).

Bukankah TypeScript cocok untuk aplikasi berskala besar? jawabannya tergantung tetapi pertanyaan yang lebih penting adalah

Apakah penggunaan TS akan mengurangi bugs jika dibandingkan dengan memakai vanila JavaScript?

Menurut artikel yang saya baca seperti The JavaScript Tax pengurangan bugs jika memakai TS sebenarnya melibatkan banyak faktor dan tidak selalu signifikan dibandingkan dengan bugs yang disebabkan karena desain dari sistem yang akan dibuat.

Lalu mengapa banyak yang memakai TypeScript sekarang?

jawabannya menurut saya adalah secara teknis pengembangan memakai TS jauh lebih mudah karena dukungan fitur sama sebagaimana bahasa dengan Type lainnya seperti Java, C# dll, lebih lanjut ada baiknya anda membaca “Mengapa harus TypeScript?” pada link stackoverflow dibawah ini.

👉 Why TypeScript? - Stackoverflow


Semua Memakai TypeScript?!

Tidak semua proyek harus memakai TS menurut saya, sudah pasti ada banyak pertimbangan tertentu sebelum memutuskan untuk memakai TypeScript atau tidak.

Sebagai contoh, untuk proyek open source yg sedang saya kembangkan seperti kalenderjawa.com dimana dibutuhkan banyak kolaborator & dengan melihat ekosistem pengembang saat ini dimana kebanyakan memang banyak memakai TypeScript untuk produktifitas dan kemudahan maintenance, maka menurut saya sangat tepat untuk kedepannya nanti menulis kode proyek tersebut dengan memakai TypeScript yang saat ini memang masih ditulis memakai vanila JS + Facebook Flow.

TSdx

Ada banyak cara untuk mempelajari TypeScript, mau kompilasi melalui CLI ataupun automasi melalui webpack, mau memakai editor Notepad++, Visual Studio Code ataupun Visual Studio, pilihan tersebut sangat ditentukan oleh anda sendiri.

Seperti biasa saya memakai Visual Studio Code dan dari banyak cara mempelajari TypeScript saya memakai tool yang bernama TSdx.

“Zero-config CLI for TypeScript package development”

Pernyataan diatas memang benar, tanpa mengatur konfigurasi sama sekali kita bisa membuat paket pustaka dengan memakai TypeScript dan secara default dengan bantuan Rollup, TSdx akan menghasilkan pustaka yang dikompilasi menjadi standar CommonJS maupun standar Module ES6.

Sebagai catatan dukungan browser untuk Module ES6 ini sudah diatas 90%, lihat di CanIUse dan untuk Node.js sudah pada level Stabilitas-1 yaitu sejak versi Node.js 13.12.0, sehingga saran saya utamakan memakai Module ES6 untuk deployment pustaka yang akan anda buat.

typescript-dikode

Cara saya dalam mempelajari TypeScript memakai TSdx sebenarnya sangatlah mudah. Seperti saya tulis sebelumnya bahwa TSdx merupakan zero config tool sehingga untuk mempelajari TypeScript anda cukup fokus di koding tanpa memikirkan konfigurasi ataupun pengaturan untuk kompilasi TypeScript ke JavaScript.

Saya pikir cukup mudah untuk menulis konsep TypeScript didalam kode TypeScript yaitu kode dengan komen sebagai konsep plus ada kode testing untuk kode-kode tersebut. Sebagai contoh konsep enum bisa dituliskan ke file enum.js dan testing ada di file enum.test.js

enum.js

/**
 * Enum di TypeScript
 * 
 * Seperti halnya Boolean (true, false) di JavaScript, di 
 * TypeScript value yang sama bisa di buat dengan bantuan Enum.
 * 
 * Default value dari Enum member adalah numerik!
 * 
 * import { YesNo } from './enum'
 * 
 * assert.equal(YesNo.Yes, 0) // true
 * assert.equal.(YesNo,1 ) // true
 *
 */
export enum YesNo {
  Yes, // member 1
  No, // member2, trailing comma allows and ignored
}

enum.test.js

import { YesNo, NoYes } from '../src/enum';

describe('Enum default value test YesNo', () => {
  it('1', () => {
    expect(YesNo.No).toEqual(1);
  });
  it('0', () => {
    expect(YesNo.Yes).toEqual(0);
  });
});

Anda bisa melihat repositori work in progress yaitu typescript-dikode

Equan Pr.

Equan Pr. (@junwatu)