Menggunakan TypeScript dengan Node.js dan Express

Kebanyakan framework front-end populer kayak Nuxt atau Angular biasanya udah otomatis menyediakan opsi buat pakai TypeScript pas kita pertama kali install.

Tapi, gimana ceritanya kalau di bagian back-end? Misalnya, kalian pengen bikin server menggunakan Express yang berjalan di atas Node.js, tapi lebih sreg pakai TypeScript biar kodenya lebih terstruktur dan minim bug.

Mau nggak mau, kita harus melakukan setup sendiri dari awal. Nah, di artikel kali ini, kita bakal kupas tuntas cara melakukan setup TypeScript bareng Node.js dan Express dengan cara yang santai dan gampang diikuti. Yuk, langsung aja kita mulai! 🚀

Persiapan

Node.js + TypeScript + Express = 🤩

Sebelum lanjut koding, pastikan dulu beberapa program ini udah terpasang di komputer kalian:

• Node.js
• npm atau yarn

Kalau belum punya, kalian bisa langsung mampir ke panduan install Node.js buat pasang dulu.

Biar makin yakin kalau semuanya udah terpasang dengan bener, coba jalankan perintah ini di terminal untuk mengecek versinya.

Mengecek versi Node.js:

$ node -v
v14.16.0

Mengecek versi npm:

$ npm -v
7.15.0

Kalau terminal udah menampilkan nomor versi kayak di atas, berarti kalian udah aman buat lanjut ke langkah berikutnya.

Inisialisasi Proyek Node.js

Pertama-tama, buka terminal kalian terus bikin folder baru khusus buat proyek ini, lalu langsung masuk ke dalamnya.

mkdir typenode && cd typenode

Setelah itu, kita inisialisasi file package.json menggunakan perintah npm init.

npm init -y

Sekarang, mari kita buat server sederhana menggunakan Express versi JavaScript biasa dulu buat memastikan semuanya berjalan normal. Buat sebuah file baru bernama main.js di dalam direktori utama proyek, lalu tulis kode berikut (boleh langsung disalin aja biar cepet, hehe):

const express = require("express");

function main(){
  const app = express();
  const port = 8080;

  // endpoint sederhana untuk menampilkan teks 'Hello Express Node.js'
  app.get("/", (req, res) => res.send("Hello Express Node.js"));

  // mulai server express
  app.listen(port, () => {
    console.log(`[server] server dimulai di http://localhost:${port} ⚡`);
  });
}

main();

Sebelum kodenya dijalankan, tentu kita harus memasang library express terlebih dahulu agar tidak terjadi error.

# dengan npm
npm install express

# dengan yarn
yarn add express

Setelah proses instalasi selesai, sekarang saatnya kita jalankan server tersebut.

node main.js

Jika sukses tanpa kendala, kalian bakal melihat pesan sukses di terminal kalian:

[server] server dimulai di http://localhost:8080 ⚡

Kalian bisa membuka browser kesayangan lalu kunjungi http://localhost:8080 buat melihat hasilnya langsung. Kalau udah muncul teksnya, selamat! Selanjutnya kita bakal mulai meracik bagian TypeScript-nya.

Menambahkan TypeScript ke Proyek

Untuk mulai menggunakan TypeScript, kita butuh dua dependensi utama tambahan:

• typescript: Ini adalah library inti yang bertugas mengubah (melakukan kompilasi) kode TypeScript menjadi kode JavaScript standar yang dipahami oleh Node.js.
• ts-node: Alat bantu yang super berguna agar kita bisa langsung menjalankan file TypeScript di lingkungan Node.js tanpa perlu melakukan kompilasi secara manual pas masa pengembangan (development).

Silakan jalankan perintah berikut di terminal buat memasang keduanya:

# dengan npm
npm install typescript ts-node --save-dev

# dengan yarn
yarn add -D typescript ts-node

Sebagai catatan, bendera --save-dev pada npm atau -D pada yarn digunakan untuk memasukkan dependensi ini ke bagian devDependencies di file package.json. Soalnya, kita cuma butuh tools ini pas masa development aja, nggak usah dibawa ke lingkungan production.

Setelah proses install selesai, kita perlu membuat file konfigurasi untuk compiler TypeScript-nya. Buatlah file bernama tsconfig.json di root directory proyek kalian, lalu isi dengan konfigurasi di bawah ini:

{
    "compilerOptions": {
        "module": "commonjs",
        "esModuleInterop": true,
        "target": "es5",
        "outDir": "build",
        "rootDir": "src",
        "baseUrl": ".",
        "strict": true
    }
}

Biar nggak bingung, ini sedikit penjelasan tentang opsi-opsi konfigurasi di atas:

• module: Menentukan format modul hasil kompilasi. Buat aplikasi server atau back-end, format commonjs adalah pilihan standar yang paling aman.
• target: Menentukan versi JavaScript keluaran hasil kompilasi. Di sini kita pilih es5 agar kompatibel dengan lingkungan runtime yang lebih lama.
• outDir: Folder tujuan untuk menampung file-file JavaScript hasil kompilasi. Kita arahkan ke folder build.
• rootDir: Folder utama tempat kita menyimpan semua file sumber TypeScript kita. Kita atur ke folder src.
• baseUrl: Path dasar yang digunakan buat menyelesaikan impor modul non-relative.

Untuk dokumentasi lengkap mengenai opsi konfigurasi lainnya, kalian bisa langsung meluncur ke dokumentasi resmi tsconfig.

Selanjutnya, kita perlu memperbarui bagian scripts di dalam file package.json agar mempermudah proses menjalankan dan membangun aplikasi. Ubah isinya menjadi seperti ini:

{
  "name": "typenode",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc",
    "serve": "node ./build/main.js",
    "dev": "ts-node ./src/main.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "typescript": "^4.3.2",
    "ts-node": "^10.0.0"
  }
}

Membuat Server dengan TypeScript

Langkah konfigurasi udah hampir selesai, nih! Tapi sebelum mulai memindahkan kode, kita butuh dua paket lagi yang berisi definisi tipe (type definitions):

• @types/node: Menyediakan definisi tipe untuk objek bawaan Node.js.
• @types/express: Menyediakan definisi tipe untuk Express.

Jalankan perintah ini di terminal buat memasangnya:

# dengan npm
npm install @types/node @types/express --save-dev

# dengan yarn
yarn add -D @types/node @types/express

Karena TypeScript menggunakan sistem tipe statis (static typing), paket-paket tipe ini penting banget biar compiler tahu tipe data apa saja yang sah digunakan pada tiap objek. Menariknya, kalau kalian pakai Visual Studio Code, paket tipe ini bakal mengaktifkan fitur code completion dan IntelliSense yang canggih banget. Menulis kode jadi lebih terbantu dan cepat! 😎

Sekarang, mari kita rapikan struktur direktori kita. Buat sebuah folder baru bernama src untuk menampung seluruh kode TypeScript yang akan kita buat.

mkdir src

Setelah foldernya dibuat, pindahkan file main.js yang kita buat tadi ke dalam folder src, lalu ubah ekstensinya menjadi main.ts.

mv main.js src/main.ts

Sekarang, struktur direktori proyek kalian bakal terlihat rapi kayak gini:

.
├── tsconfig.json
├── src
│   └── main.ts
├── node_modules
├── package.json
└── package-lock.json

Buka file src/main.ts di editor kalian, lalu ubah kodenya menggunakan sintaks TypeScript modern kayak di bawah ini:

import express from "express";

function main(){
  const app = express();
  const port = 8080;

  // endpoint sederhana untuk menampilkan teks 'Hello Express TS'
  app.get("/", (req, res) => res.send("Express + Typescript + NodeJS = 😍"));

  // mulai server express
  app.listen(port, () => {
    console.log(`[server] server dimulai di http://localhost:${port} ⚡`);
  });
}

main();

Nah, sekarang saatnya kita coba jalankan aplikasi TypeScript ini. Cukup jalankan perintah berikut di terminal:

npm run dev

Jika konfigurasinya udah bener, kalian bakal melihat output sukses yang sama seperti sebelumnya. Sekarang server kalian udah berjalan lancar menggunakan TypeScript di latar belakang! Ingat ya, ke depannya selalu simpan file baru kalian di dalam folder src.

Kompilasi TypeScript ke JavaScript

Setelah asyik koding pakai TypeScript, ada satu langkah penting sebelum kalian mempublikasikan aplikasi ini ke lingkungan produksi (production), yaitu kompilasi.

Node.js secara bawaan nggak bisa menjalankan file TypeScript secara langsung. Makanya kita perlu mengubah semua file di folder src menjadi kode JavaScript biasa agar kinerjanya tetap cepat dan optimal.

Untuk melakukan proses kompilasi ini, jalankan perintah:

npm run build

Setelah perintah selesai berjalan, kalian bakal menemukan folder baru bernama build yang berisi file main.js. Isi file hasil kompilasi tersebut bakal terlihat seperti ini:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var express_1 = __importDefault(require("express"));
function main() {
    var app = express_1.default();
    var port = 8080;
    // endpoint sederhana untuk menampilkan teks
    app.get("/", function (req, res) { return res.send("Express + Typescript + NodeJS = 😍"); });
    // mulai server express
    app.listen(port, function () {
        console.log("[server] server dimulai di http://localhost:" + port + " ⚡");
    });
}
main();

Bisa kalian lihat, semua sintaks modern kayak arrow functions telah diubah menjadi fungsi biasa (anonymous function) dan variabel diubah menjadi var. Hal ini dikarenakan target compiler kita atur ke es5 di file tsconfig.json. Kalau kalian pengen hasil yang lebih modern, kalian bisa mengubah nilai target tersebut ke es6 atau versi yang lebih baru.

Terakhir, buat menjalankan kode versi production yang udah dicompile tadi, jalankan perintah berikut:

npm run serve

Versi Cepat (TL;DR)

Buat kalian yang lagi buru-buru atau pengen langsung melihat hasil jadinya tanpa perlu mengetik satu-satu dari awal, tenang aja. Kalian bisa langsung clone atau salin kode lengkapnya dari repositori GitHub.

Setelah disalin, kalian tinggal jalankan perintah npm install di terminal komputer kalian buat memasang semua dependensinya, dan proyek pun siap dijalankan!

Catatan kecil, file package-lock.json nggak perlu ikut disalin ya.

Selamat mencoba dan bereksperimen dengan TypeScript! Semoga sukses kodingnya! 😁