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:
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.
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.
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.
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.
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.
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
.
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:
- Outputserver is listening on 3000
Sekarang, Anda dapat mengunjungi http://localhost:3000
di peramban Anda dan seharusnya melihat pesan:
- OutputThe 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.
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.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.