Cara Menyiapkan Proyek Node dengan Typescript

Pengantar

Node adalah lingkungan run-time yang memungkinkan penulisan JavaScript di pihak server. Ini telah banyak digunakan sejak dirilis tahun 2011. Menulis JavaScript di pihak server dapat menjadi hal yang menantang seiring berkembangnya basis kode karena sifat bahasa JavaScript; dinamis dan bertipe lemah.

Para pengembang yang memilih JavaScript dari bahasa lain sering mengeluhkan kekurangan tipe statis kuat, di sinilah TypeScript hadir menjembatani kesenjangan itu.

TypeScript adalah super-set bertipe (opsional) dari JavaScript yang dapat membantu membangun dan mengelola proyek JavaScript berskala besar. Ini dapat dianggap sebagai JavaScript dengan fitur tambahan, seperti tipe statis kuat, kompilasi, dan pemrograman berorientasi objek.

Berikut ini beberapa manfaat menggunakan TypeScript:

1. Tipe statis opsional.
2. Tipe interferensi.
3. Kemampuan untuk menggunakan Antarmuka.

Dalam tutorial ini, Anda akan menyiapkan proyek Node dengan TypeScript. Anda akan membangun aplikasi Express menggunakan TypeScript dan menerjemahkannya menjadi kode JavaScript yang rapi dan andal.

Prasyarat

Sebelum memulai panduan ini, Node.js sudah harus terinstal di mesin Anda. Anda dapat melakukannya dengan mengikuti panduan Cara Menginstal Node.js dan Membuat Lingkungan Pengembangan Lokal bagi sistem operasi Anda.

Langkah 1 — Inisialisasi Proyek npm

Untuk memulai, buat folder baru bernama node_project dan pindah ke direktori itu.

mkdir node_project
cd node_project

Selanjutnya, inisialisasi sebagai proyek npm:

npm init

Setelah menjalankan init npm, Anda perlu memberikan informasi tentang proyek Anda kepada npm. Jika Anda lebih suka membiarkan npm mengasumsikan asali yang wajar, Anda dapat menambahkan bendera y untuk melewatkan prompt informasi tambahan:

npm init -y

Karena kini ruang proyek sudah disiapkan, Anda siap untuk melanjutkan ke instalasi dependensi yang diperlukan.

Langkah 2 — Menginstal Dependensi

Dengan proyek npm kosong yang telah diinisialisasi, langkah selanjutnya adalah menginstal dependensi yang diperlukan untuk menjalankan TypeScript.

Jalankan perintah berikut dari direktori proyek Anda untuk menginstal dependensi:

npm install -D typescript@3.3.3
npm install -D tslint@5.12.1

Bendera -D adalah pintasan untuk: --save-dev. Anda dapat mempelajari lebih lanjut tentang bendera ini dalam dokumentasi npmjs.

Sekarang, saatnya menginstal kerangka kerja Express:

npm install -S express@4.16.4
npm install -D @types/express@4.16.1

Perintah kedua menginstal beberapa tipe Express untuk dukungan TypeScript. Tipe dalam TypeScript adalah berkas, biasanya dengan ekstensi .d.ts. Berkas digunakan untuk memberikan informasi tentang API kepada tipe, dalam hal ini adalah kerangka kerja Express.

Paket ini diperlukan karena TypeScript dan Express adalah paket independen. Tanpa paket @types/express, TypeScript tidak dapat mengetahui tipe kelas Express.

Langkah 3 — Mengonfigurasi TypeScript

Di bagian ini, Anda akan menyiapkan TypeScript dan mengonfigurasi proses lint untuk TypeScript. TypeScript menggunakan berkas bernama tsconfig.json untuk mengonfigurasi opsi pengompilasi proyek. Buat berkas tsconfig.json di root direktori proyek dan tempelkan dalam cuplikan kode berikut:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

Mari kita tinjau beberapa hal pokok dalam cuplikan JSON di atas:

• module: Menentukan metode pembuatan kode modul. Node menggunakan commonjs.
• target: Menentukan tingkat bahasa keluaran.
• moduleResolution: Ini membantu pengompilasi mengetahui apa yang dirujuk oleh impor. Nilai node menirukan mekanisme resolusi modul Node.
• outDir: Ini adalah lokasi untuk keluaran berkas .js setelah penerjemahan. Dalam tutorial ini, Anda akan menyimpannya sebagai dist.

Alternatif untuk membuat dan mengisi berkas tsconfig.json adalah dengan menjalankan perintah berikut:

tsc --init

Perintah ini akan menghasilkan berkas tsconfig.json yang telah diberi komentar dengan baik.

Untuk mempelajari lebih lanjut berbagai opsi nilai kunci yang tersedia, dokumentasi TypeScript resmi memberikan penjelasan tentang setiap opsi.

Sekarang Anda dapat mengonfigurasi proses lint TypeScript untuk proyek. Dalam terminal yang sedang berjalan di root direktori proyek Anda, tempat tutorial ini dibuat sebagai node_project, jalankan perintah berikut untuk menghasilkan berkas tslint.json:

./node_modules/.bin/tslint --init

Buka berkas tslint.json yang baru dihasilkan dan tambahkan aturan no-console yang sesuai:

{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}

Secara asali, linter di TypeScript mencegah penggunaan awakutu dengan pernyataan console, sehingga perlu secara eksplisit memberi tahu linter untuk mencabut aturan no-console asali.

Langkah 4 — Memperbarui Berkas package.json

Pada titik ini dalam tutorial, Anda dapat menjalankan fungsi dalam terminal satu per satu, atau membuat npm script untuk menjalankannya.

Dalam langkah ini, Anda akan membuat skrip start yang akan mengompilasi dan menerjemahkan kode TypeScript, kemudian menjalankan app.js yang dihasilkan.

Buka berkas package.json dan perbarui sebagaimana mestinya:

{
  "name": "node-with-ts",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.16.1",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}

Dalam cuplikan di atas, Anda memperbarui jalur main dan menambahkan perintah start ke bagian skrip. Bila memperhatikan perintah start, Anda akan melihat bahwa perintah tsc pertama adalah berjalan, kemudian perintah node. Ini akan mengompilasi kemudian menjalankan keluaran yang dihasilkan dengan node.

Perintah tsc memberi tahu TypeScript untuk mengompilasi aplikasi dan menempatkan keluaran .js yang dihasilkan dalam direktori outDir yang ditentukan karena telah diatur dalam berkas tsconfig.json.

Langkah 5 — Membuat dan Menjalankan Server Express Dasar

Karena TypeScript dan linter telah dikonfigurasi, saatnya membangun Server Express Node.

Pertama-tama, buat folder src di root direktori proyek Anda:

mkdir src

Kemudian, buat berkas bernama app.ts di dalamnya:

touch src/app.ts

Sehingga struktur folder akan terlihat seperti ini:

├── node_modules/
├── src/
  ├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json

Buka berkas app.ts dengan editor teks pilihan Anda dan tempelkan dalam cuplikan kode berikut:

import express from 'express';

const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});

Kode di atas membuat Server Node yang mendengarkan permintaan di porta 3000. Jalankan aplikasi menggunakan perintah berikut:

npm start

Jika berhasil dijalankan, pesan akan dicatat ke terminal:

Output
server is listening on 3000

Sekarang, Anda dapat mengunjungi http://localhost:3000 di peramban Anda dan seharusnya melihat pesan:

Output
The sedulous hyena ate the antelope!

Buka berkas dist/app.js dan Anda akan menemukan versi kode TypeScript yang telah diterjemahkan:

"use strict";

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
    res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
    if (err) {
        return console.error(err);
    }
    return console.log(`server is listening on ${port}`);
});

//# sourceMappingURL=app.js.map

Saat ini, Anda berhasil menyiapkan proyek Node menggunakan TypeScript.

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari alasan TypeScript berguna untuk penulisan kode JavaScript yang andal. Anda juga telah mempelajari beberapa manfaat menggunakan TypeScript.

Terakhir, Anda telah menyiapkan proyek Node dengan kerangka kerja Express, kemudian mengompilasi dan menjalankan proyek dengan TypeScript.