Cara konfigurasi TypeScript dengan Node.js dan Express

Dalam artikel ini, kami akan membahas cara mudah pemula untuk menyiapkan TypeScript di aplikasi Express, memahami batasan dasar yang menyertainya.

Untuk memanfaatkan sepenuhnya tutorial ini, pastikan Anda memiliki yang berikut ini:

• Versi Node.js ≥ v12.x terpasang di lingkungan pengembangan lokal Anda
• Akses ke pengelola paket seperti npm atau Yarn
• Pengetahuan dasar tentang Node.js dan Express

Membuat package.json

Untuk membuat aplikasi dengan node js, hal pertama yang kita buat adalah package.json. Kita dapat membuat package.json dengan memanfaatkan npm.

mkdir node-express-typescript-example
cd node-express-typescript-example/
npm init --yes

Saat Anda menginisialisasi file package.json, flag –yes menggunakan pengaturan default yang telah Anda atur dari npm config. File package.json yang baru dibuat mungkin terlihat seperti kode berikut:

{
  "name": "express-typescript-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Membuat minimal server file dengan express.

Setelah membuat package.json, maka selanjutnya adalah kita mambuat server kecil dengan express.

npm install express dotenv

setelah kita melakukan instalasi express dan dotenv, kita buat file dengan nama server.js, lalu buat kode seperti berikut:

const express = require('express');
const dotenv = require('dotenv');

dotenv.config();

const app = express();
const port = process.env.PORT;

app.get('/', (req, res) => {
  res.send('Express + TypeScript Server Example 2023');
});

app.listen(port, () => {
  console.log(`[server]: Server is running at http://localhost:${port}`);
});

Package dotenv digunakan untuk mempermudah kita membuat membaca enviroment variable dari .env file yang ada di server root kita.

untuk .env file masukan port yang Anda inginkan:

PORT = 3000

setelah semua siap, coba kita jalankan server.js dengan perintah node server.js.

Express js server sekarang sudah berhasil dan jalan.

Install Express

Kita akan mulai dengan menginstal TypeScript sebagai dev depedencys. Bersamaan dengan itu, kita akan menginstal paket deklarasi @types untuk Express dan Node.js, yang menyediakan definisi tipe dalam bentuk file deklarasi.

File deklarasi adalah modul yang ditentukan sebelumnya yang menjelaskan bentuk nilai JavaScript, atau tipe yang ada, untuk kompiler TypeScript. Deklarasi tipe biasanya terdapat dalam file dengan ekstensi .d.ts. File deklarasi ini tersedia untuk semua package yang awalnya ditulis dalam JavaScript, bukan TypeScript.

Repositori DefinitifTyped GitHub mempertahankan definisi tipe TypeScript untuk digunakan langsung di Node.js dan proyek JavaScript lainnya, jadi Anda tidak perlu mendefinisikan tipe ini dari awal. Untuk menambahkan tipe ini atau file deklarasi yang terkait dengan pustaka atau modul tertentu, Anda harus mencari paket yang dimulai dengan namespace @types.

Buka jendela terminal dan instal paket yang dijelaskan di atas dengan perintah berikut:

npm i -D typescript @types/express @types/node

Flag -D, juga dikenal sebagai flag –dev, adalah spesifikasi bagi package manajer untuk menginstal package ini sebagai devDependencies.

Setelah pustaka ini diinstal, buka file package.json tempat Anda akan melihat objek devDependencies baru:

{
 "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.2.5",
    "typescript": "^5.1.3"
  }
}

Generate tsconfig.json

Sekarang, kami memiliki proyek TypeScript yang dikompilasi dengan beberapa opsi konfigurasi default. File tsconfig.json menyediakan opsi default ini dan juga memberi kita kemampuan untuk men-tweak atau menyesuaikan opsi kompiler.

Biasanya, file tsconfig.json berada di root proyek. Untuk membuatnya, kami akan menggunakan perintah:

npx tsc --init

setelah kita jalankan di terminal, maka akan terbentuk file tsconfig.json dengan defailt value configuration

target: es2016
module: commonjs
strict: true
esModuleInterop: true
skipLibCheck: true
forceConsistentCasingInFileNames: true

Jika Anda membuka file tsconfig.json, Anda akan melihat banyak opsi kompiler lain yang dikomentari. Di tsconfig.json, compilerOptions adalah hal wajib yang perlu ditentukan. Opsi yang digunakan dalam konfigurasi di atas adalah:

• target: Memungkinkan kita menentukan versi JavaScript target yang akan dihasilkan oleh kompiler
• module: Memungkinkan kita menggunakan pengelola modul dalam kode JavaScript yang dikompilasi. CommonJS didukung dan merupakan standar di Node.js
• strict: Opsi yang mengaktifkan opsi pemeriksaan tipe yang strict
• esModuleInterop: Memungkinkan kita mengkompilasi modul ES6 ke modul CommonJS
• skipLibCheck: jika di set ke true, skips type-checking dari default library di pendeklarasian variable
• forceConsistentCasingInFileNames: Jika set ke true, memungkinkan penamaan file sensitiv huruf besar-kecil

Salah satu opsi yang harus Anda aktifkan disebut outDir, yang menentukan lokasi keluaran setelah langkah kompilasi. Anda dapat mencari opsi ini di file tsconfig.json dan menghapus komentarnya.

Secara default, nilai opsi ini diatur ke direktori root. Ubah ke dist:

{
  "compilerOptions": {
    "outDir": "./dist"

    // sama dengan opsi sebelumnya
  }
}

Mengkonversi file server.js ke server.ts

langkah pertama rename file server.js menjadi server.ts, lalu ubah kode menjadi seperti berikut:

import express, { Express, Request, Response } from 'express';
import dotenv from 'dotenv';

dotenv.config();

const app: Express = express();
const port = process.env.PORT;

app.get('/', (req: Request, res: Response) => {
  res.send('Express + TypeScript Server Example');
});

app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

setelah itu coba jalankan kembale. dan berjalan dengan lancar.