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.
Catatan: TypeScript secara teknis adalah super-set JavaScript, yang berarti semua kode JavaScript adalah kode TypeScript yang valid.
Berikut ini beberapa manfaat menggunakan TypeScript:
- Tipe statis
opsional.
- Tipe interferensi.
- 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
- npm install -D
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
- npm install -D @types/
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:
tsconfig.json
{
"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:
tslint.json
{
"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:
package.json
{
"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:
src/app.ts
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:
dist/app.js
"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.