Menggunakan Typescript dengan Node.js dan Express

Kebanyakan framework—khususnya front end, seperti nuxt dan angular—sudah menyediakan opsi untuk menggunakan typescript ketika proses instalasi awal.

Tapi, apa kabar dengan back end?. Bagaimana jika kita ingin membuat server Express yang berjalan di lingkungan Node, namun lebih memilih menggunakan Typescript karena fitur-fitur tambahannya.

Mau tidak mau, harus setup sendiri dong. Nah, pada kesempatan kali ini, kita akan membahas tentang cara setup Typescript dengan Node.js dan Express.

Persiapan

Node.js + Typescript + Express = 🤩

Sebelum lanjut, pastikan bahwa beberapa program berikut sudah ada di komputer kalian.

• node
• npm / yarn

Jika belum silahkan pergi ke laman guide npm.

Untuk memastikan node dan package manager sudah terinstall silahkan jalankan command berikut.

Mengecek Node:

$ node -v
v14.16.0

Mengecek Package manager (npm):

$ npm -v
7.15.0

Jika keluar keterangan versi seperti contoh diatas maka silahkan lanjut ke langkah berikutnya.

Inisialisasi Proyek Node

Buka terminal masing-masing lalu buat folder baru untuk proyek yang akan kita buat.

mkdir typenode && cd typenode

Sipp, selanjutnya kita inisialisasi file package.json dengan menggunakan npm

npm init -y

Selanjutnya adalah membuat script sederhana untuk menjalankan server express. Silahkan buat file main.js dan ketikkan kode berikut di code editor kesayangan kalian—copas aja biar cepet 😏.

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 menjalankan script tersebut, kita perlu menambahkan dependensi Express terlebih dahulu agar servernya bisa jalan.

# dengan npm
npm install express

# dengan yarn
yarn add express

Kalau sudah, sekarang saatnya eksekusi server yang sudah kita buat.

node .

JIka tidak ada kesalahan maka akan keluar output seperti ini.

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

Sipp, server kita sudah jadi. Kalian bisa buka browser dan pergi ke http://localhost:8080 dan lihat hasilnya.

Selanjutnya kita akan mulai proses persiapan typescript-nya.

Menambahkan Typescript pada Proyek Node.js

Lanjut… Untuk menggunakan Typescript, kita perlu menginstall 2 dependensi lagi yaitu:

• typescript: Library utama yang digunakan untuk mengkompilasi kode typescript menjadi javascript yang valid.
• ts-node: Library untuk menjalankan langsung kode Typescript pada lingkungan node.js (tanpa proses kompilasi secara eksplisit)

Untuk menginstallnya jalankan perintah berikut dalam terminal:

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

# dengan yarn
yarn add -D typescript ts-node

Flag --save-dev (pada npm) dan -D (pada yarn) digunakan untuk menambahkan dependency terkait kedalam entri **devDependencies** di package.json

Kalau sudah terinstall semua, sekarang kita lanjut membuat konfigurasi compiler typescript.

Untuk melakukannya silahkan buat file baru dengan nama tsconfig.json, lalu isi dengan konfigurasi berikut ini.

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

Sedikit penjelasan tentang konfigurasi typescript tersebut:

• module: Format yang digunakan sebagai standar struktur kode javascript yang telah dikompilasi. Jika kalian akan membuat REST API atau kode server maka disarankan menggunakan commonjs
• target: Target versi Javascript hasil kompilasi
• outDir: Folder tempat semua kode javascript hasil kompilasi akan ditempatkan
• rootDir: Folder tempat menuliskan semua kode Typescript.
• baseUrl: Direktori root yang digunakan ketika menggunakan non relative path

Untuk informasi lebih lanjut tentang konfigurasi typescript bisa dibaca di https://www.typescriptlang.org/tsconfig

Selanjutnya kita perlu menambahkan beberapa script pada package.json agar bisa menjalankan kode Typescript dengan ts-node dan mengkompilasi semuanya menjadi Javascript dengan tsc.

{
  "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 dan Node

Siipp, tinggal langkah terakhir.

Tapi, sebelum ketik-ketik kode kita perlu menginstall 2 lagi dependensi.

• @types/node: Definisi tipe untuk Node.js
• @types/express: Definisi tipe untuk Express

Instalasi:

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

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

Dependensi ini berfungsi untuk menambahkan definisi tipe data—atau objek?—standar. Karena Typescript punya fitur static typing sehingga kita perlu menuliskan tipe data pada setiap objek yang dibuat.

Jika kalian menggunakan Visual Studio Code sebagai kode editor, dependensi ini juga akan menambahkan code completion dan fitur IntelliSense yang lain. Mantap kan 😎

Terakhir sebelum ketik-ketik kode, kita perlu membuat folder baru bernama src sebagai wadah untuk semua kode Typescript yang akan dibuat.

mkdir src

Selanjutnya kita perlu memindahkan file main.js yang sebelumnya kita buat, kedalam folder src ini. Sekaligus mengubah ekstensinya menjadi .ts (ekstensi file Typescript).

# dengan bash di linux
mv main.js src/main.ts

Sehingga sekarang struktur file-nya seperti ini.

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

Sekarang kita hanya perlu mengubah sedikit script yang ada pada file main.ts agar mengikuti aturan penulisan Typescript.

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();

Sampai disini, server sederhana kita seharusnya sudah dapat dijalankan tanpa ada kendala. Untuk menjalankan server express ketikkan perintah berikut pada terminal.

npm run dev

Jika semua benar, maka akan keluar output sama seperti yang sebelumnya.

Siip sampai di sini, persiapan Typescript-nya sudah selesai. Ingat untuk selalu menempatkan semua file Typescript pada folder src karena ini merupakan rootDir yang sudah dikonfigurasi.

Kompilasi Typescript menjadi Javascript

Setelah koding-koding ceria dengan Typescript, langkah terakhir sebelum masuk ke ranah produksi adalah proses kompilasi menjadi file Javascript.

Karena jika tidak di-compile, kemungkinan akan terjadi masalah yang tidak diinginkan. Terutama masalah performa. Ya karena Node.js dirancang untuk menjalankan script Javascript, bukan Typescript.

Untuk melakukan kompilasi silahkan jalankan perintah berikut di terminal:

npm run build

Nantinya akan muncul sebuah folder baru bernama build yang berisi main.js. Kurang lebih kalau kalian buka isinya 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();

Itu adalah file Javascript hasil kompilasi dari file Typescript yang kita buat.

Dapat dilihat, semua deklarasi konstanta yang kita buat pada file Typescript berubah menjadi deklarasi variable, selain itu arrow function juga berubah menjadi anonymus function.

Ini karena, pada file konfigurasi (tsconfig.json) kita menggunakan target es5, yang belum mendukung sintaks tersebut. Jika ingin, kalian dapat mengubahnya menjadi versi es6 atau yang lebih tinggi.

Sekarang, untuk menjalankan langsung file Javascript-nya silahkan jalankan perintah berikut:

npm run serve

TL;DR

Untuk kalian yang mungkin malas membaca seluruh tulisan ini—upss—tapi entah bagaimana bisa scroll sampai di sini. Silahkan, kalian bisa melihat file akhir, fix, tingal copas di github.

Kalau sudah di copas tinggal jalankan perintah “npm i” di terminal, maka selesai.

NB: package-lock.json tidak perlu di copas juga.

Selamat ber-coding-ria 😁