Pendahuluan Belajar Typescript

Sebenarnya saya penasaran kepada teman-teman yang sedang baca artikel ini. Kenapa sih tertarik pakai Typescript? Apa karena pekerjaan? Ingin sekedar belajar saja? atau udah mulai kurang puas dengan Javascript? 😆

Apapun alasan kalian, semoga kita selalu konsisten belajar ya…

Sebelum kita mulai belajar Typescript ada beberapa poin pada artikel ini:

• Apa itu Typescript?
• Mengapa pilih Typescript?
• Menggunakan Typescript untuk Pertama Kali

Apa itu Typescript?

Berikut adalah kutipan dari website resmi typescript di https://www.typescriptlang.org/ mengenai bahasa ini.

“TypeScript is JavaScript with syntax for types. TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.”

Typescript merupakan open-source project yang dikembangkan oleh Microsoft pada tahun 2012. Typescript adalah bahasa pemrograman Javascript dengan sintaks yang Strongly Typed. Berbeda dengan bahasa Javascript yang Dynamicaly Typed yang kita bisa bebas mendefinisikan ulang variabel dengan tipe data apapun secara bebas.

Dan yang perlu kita ketahui, bahwa Typescript ini adalah bahasa yang perlu melewati proses compile terlebih dahulu. Hasil compile adalah berupa kode Javascript dengan output yang bisa diatur juga secara manual melalui file konfigurasi Typescript.

Mengapa pilih Typescript?

Saya dulu juga merasa heran dengan para programmer yang mereka lebih memilih Typescript daripada langsung menggunakan Javascript. Ada beberapa poin yang saya dulu tidak menggunakan Typescript, itu karena:

• Tidak luwes Ini karena Typescript menggunakan Static Typing. Sehingga saya pikir saya tidak bisa menulis program dengan lebih dinamis seperti pada Javascript
• Perlu proses compile Saya membayangkan untuk membuat program simpel dengan Javascript saya perlu melalui tahapan lagi hanya sekedar untuk mencapai hal yang sama. Ditambah setup dan konfigurasi diawal yang berlebihan.
• Dukungan package Typescript Saya dulu berpikir bagaimana jadinya program yang sudah dibuat dengan Javascript dapat bekerja dengan baik ketika saya memutuskan untuk menulis program dengan bahasa Typescript? Apakah ada keterbatasan dalam komunitas? Sehingga implementasinya bisa, tapi sulit? Itulah beberapa poin yang saya enggan menggunakan Typescript (awalnya). Tapi ada beberapa poin yang menjadi pertimbangan besar untuk saya berani menggunakannya.

Adapun beberapa poin itu adalah:

• Terpaksa Betul, saya terpaksa karena pekerjaan. Mungkin kamu yang belum baca artikel saya tentang Kenapa Saya Pilih Typescript, Meskipun Gak Jago-jago Amat? bisa baca nanti.
• Dukungan Kompatibilitas Typescript yang Baik Ternyata, sudah banyak package yang secara built-in sudah ada Typescript declarations-nya ataupun kita perlu install lagi secara terpisah.
• Backward Compatibility Dengan typescript, saya bisa mengatur versi Javascript yang akan keluar setelah proses compile. Ini sangat memudahkan sekali untuk membuat program yang mampu berjalan baik di semua pengguna dengan banyak varian browser atau runtime. Saya bisa selalu mengikuti perkembangan dan fitur dalam suatu bahasa pemrograman tanpa khawatir masalah ini.
• Well Documented Jika kode program kita dituliskan sesuai rekomendasi komunitas Typescript, program yang dibuat akan predictable. Variabel tidak secara aneh berubah nilai dari tipe yang sudah disepakati. Penggunaan fungsi, variabel akan jauh lebih mudah. Error juga akan kita ketahui lebih awal sebelum kita menjalankan program kita ke browser atau runtime seperti node.
• Dukungan OOP yang lebih matang Fitur-fitur OOP di Typescript lebih lengkap dan matang daripada di Javascript. Typescript memiliki fitur seperti, abstract class & method, access modifier, interface, readonly property, parameter properties, inheritance dan lain-lain.
• Mudah untuk Refactor Hal yang harus dihindari saat refactor adalah membuat bug baru. Bug baru biasanya bisa terjadi karena kesalahan kita, contohnya menghapus variabel yang nyatanya itu masih terpakai, rename fungsi tidak lengkap dan lain-lain. Dengan typescript itu semua bisa diminimalisir sebelum program kita jalan saat proses runtime.

Menggunakan Typescript untuk Pertama Kali

Via Playground

Kamu bisa langsung coba-coba typescript tanpa perlu setup dan bisa mencobanya langsung di situs https://www.typescriptlang.org/play/. Menurut saya ini adalah situs yang cocok untuk mulai belajar dan memperkenalkan typescript. Kalian bisa ganti-ganti versi typescript, mengedit TS Config, melihat output JS langsung dan masih banyak lagi.

Via Instalasi

Pada cara instalasi typescript disini ini, kita akan menginstal Typescript di lokal komputer kita. Untuk menginstal Typescript, kita perlu Node JS dan Node Package Manager (NPM). Untuk NPM biasanya sudah sepaket saat kita instal Node JS. Bagi teman-teman yang belum install Node JS, bisa lihat tahapan instalasinya pada tutorial Instalasi Node JS dengan NVM.

Instalasi Typescript menggunakan NPM ada dua tipe:

• Global
• Local

Global artinya kita menginstal melalui NPM global instal agar dapat berjalan secara global di proyek komputer kita. Kalau Local artinya kita menginstal per proyek / direktori aplikasi.

Tahapan Instalasi Typescript di Global NPM

Jalankan perintah: npm i -g typescript

Verifikasi instalasi sudah berhasil dengan perintah: tsc -v

Tahapan Instalasi Typescript di Local NPM (Per Direktori / Proyek)

Buat direktori dengan perintah: mkdir first-typescript

Masuk ke direktori dengan perintah: cd first-typescript

Lakukan inisiasi proyek baru dengan perintah: npm init -y

Instal Typescript ke devDependecies dengan perintah: npm i typescript --save-dev

Verifikasi instalasi dengan perintah: npx tsc -v

Kita mennginstal di devDepdencies karena typescript hanya kita butuhkan di proses development saja. Pada lingkungan production, kita hanya membutuhkan hasil compile yaitu berupa file Javascript.

Kalau diperhatikan, instalasi di local atau di global memiliki perbedaan di cara menjalankan Typescript Compiler (tsc). Jika di local, kita menggunakan perintah npx tsc -v tapi kalau di global kita menggunakan tsc -v.

npx adalah alat yang disediakan bersama NPM yang terinstal yang memungkinkan kita dapat menjalankan suatu package yang diinstal secara langsung ketika tidak diinstall di global.

Pada tutorial ini, kita akan melanjutkan membuat program typescript dengan instalasi typescript per direktori (Lokal).

Membuat Program Typescript Pertama

Di tutorial ini kita akan membuat program typescript sederhana. Pada demo ini, kita akan melihat bagaimana typescript dibuat, dicompile dan bisa kita jalankan.

Disini saya menggunakan VS Code untuk code editor yang akan dipakai. Kalian bisa ikut pakai ini juga untuk mempermudah mengikutinya.

Saya akan membuat file typescript dengan nama hello.ts di root direktori first-typescript. Dan sesuai namanya, kita akan coba buat program sakral Hello World dengan bahasa Typescript.

Pada file hello.ts buat kode typescript seperti ini:

let message = 'Hello, World!';
 
console.log(message);

Untuk menjalankannya di terminal console, kita perlu melakukan proses compile dengan perintah: npx tsc hello.ts

Jika kalian lihat, saya sudah memiliki file hasil compile hello.js yang dapat kita jalankan di Node JS dengan perintah: node hello.js

Inilah program typescript pertama kita.

Sekarang coba isi variabel message tadi dengan isi dengan tipe data selain string. Disini saya masukan number. Maka sebelum menjalankan program, kita sudah diberikan error seperti ini.

Pada keyword message, kita diperlihatkan garis merah untuk sebuah pesan error Type ‘number’ is not assignable to type ‘string’. Ini artinya kita tidak bisa masukan tipe data lain ke variabel message kecuali string. Hal ini akan membuat kita tahu tipe data dari suatu variabel untuk mencegah error saat runtime.

Menambahkan file tsconfig.json

Untuk menambahkan file tsconfig.json, kita dapat menggunakan perintah: npx tsc --init

Kita juga bisa membuat filenya manual secara langsung di direktori proyek kita dengan nama tsconfig.json.

tsconfig.json adalah file konfigurasi untuk TypeScript yang digunakan untuk mengatur pengaturan kompilasi TypeScript dalam sebuah proyek. File ini memberikan kontrol atas cara TypeScript dalam mengompilasi kode TypeScript menjadi JavaScript. Ada beberapa opsi pengaturan yang dapat dimasukkan, seperti target kompilasi untuk versi ecma keberapa, jenis module yang mau digunakan, outdir dan lain-lain.

Mungkin sekian aja untuk artikelnya, supa gak telalu panjang juga ya… Semoga bermanfaat.