TypeScript adalah bahasa pemrograman yang diketik dengan kuat yang memperluas kemampuan JavaScript. Ia menawarkan serangkaian fitur untuk membantu Anda mengembangkan aplikasi yang skalabel dengan Node.js dan Express.

Salah satu keuntungan penting dari skrip ketikan kelebihan JavaScript adalah ia menyediakan kelas tipe, membuatnya lebih mudah untuk menulis kode yang lebih mudah diprediksi dan dipelihara. Selain itu, TypeScript menawarkan keamanan tipe, memastikan kode Anda bebas dari kesalahan runtime dan mempermudah pendeteksian kelemahan di awal pengembangan. Bahasa ini juga dilengkapi dengan alat pemfaktoran ulang dan pelengkapan otomatis, yang meningkatkan pengalaman pengembang.

Lebih-lebih lagi, Node.js dan Ekspres memberikan kinerja luar biasa untuk aplikasi skala apa pun. Menggunakan kelas di TypeScript juga membantu pengorganisasian dan struktur, yang selanjutnya membantu skalabilitas. Dengan alat ini, Anda dapat membangun aplikasi yang kuat dan skalabel untuk menangani permintaan yang terus meningkat.

Artikel ini menunjukkan pengaturan aplikasi Express menggunakan TypeScript dengan satu titik akhir. Kemudian, ini menjelaskan cara men-deploy aplikasi Anda Hosting aplikasi Kinsta.

Cara membuat server Ekspres

Untuk mengikuti tutorial ini, pastikan Anda memilikinya Node.js dan npm diinstal pada komputer Anda. Untuk menyiapkan server Ekspres:

  1. Buat direktori menggunakan kode di bawah ini:
    mkdir sample_app && cd sample_app
  2. Inisialisasi aplikasi Node.js di direktori dengan menjalankan perintah ini:
    npm init -y

    Itu -y bendera dalam perintah menerima perintah default saat membuat a paket.json file diisi dengan kode berikut:

    { 
      "name": "sample_app",
      "version": "1.0.0",
      "description": "", 
      "main": "index.js", 
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1" 
      }, 
      "keywords": [], 
      "author": "", 
      "license": "ISC" 
    }
  3. Selanjutnya, instal express untuk menambahkan fungsionalitas penting dan dotenv untuk variabel lingkungan manajemen di direktori yang baru saja Anda buat dengan menjalankan perintah ini:
    npm i express dotenv
  4. Membuat .env file di root sampel_aplikasi direktori dan isi dengan variabel di bawah ini.
    PORT=3000
  5. Buat aplikasi ekspres yang merespons dengan a Hello World teks saat pengguna berkunjung http://localhost:3000.
    const express = require("express");
    const dotenv = require("dotenv");
    
    // configures dotenv to work in your application
    dotenv.config();
    const app = express();
    
    const PORT = process.env.PORT;
    
    app.get("/", (request, response) => { 
      response.status(200).send("Hello World");
    }); 
    
    app.listen(PORT, () => { 
      console.log("Server running at PORT: ", PORT); 
    }).on("error", (error) => {
      // gracefully handle error
      throw new Error(error.message);
    })

    dotenv.config() mengisi lingkungan proses aplikasi Node Anda (process.env) dengan variabel yang ditentukan dalam a .env mengajukan.

  6. Mulai aplikasi Node.js Anda dengan menjalankan perintah ini:
    node index.js

    Periksa apakah aplikasi berfungsi dengan mengunjungi http://localhost:3000 di browser Anda. Anda harus mendapatkan respons serupa dengan ini.

    Halo Dunia di http:localhost:3000.

Aktifkan TypeScript di aplikasi Express

Ikuti langkah-langkah di bawah ini untuk menggunakan TypeScript dalam aplikasi Express:

  1. Instal TypeScript dengan menjalankan perintah ini:
    npm i -D typescript

    Itu -D opsi memungkinkan npm untuk menginstal paket sebagai dependensi dev. Anda dapat menggunakan paket yang Anda instal dengan opsi ini dalam tahap pengembangan.

  2. Salah satu kekuatan komunitas TypeScript adalah Repositori GitHub yang Diketik Pasti. Ini menyimpan dokumentasi definisi tipe untuk berbagai paket npm. Pengguna dapat dengan cepat mengintegrasikan paket npm ke dalam proyek mereka tanpa mengkhawatirkan kesulitan terkait tipe hanya dengan menginstal definisi tipe untuk paket tersebut dengan npm. DefinitelyTyped adalah alat yang sangat diperlukan bagi pengembang TypeScript. Ini memungkinkan mereka untuk menulis kode yang lebih bersih dan efisien serta mengurangi kemungkinan kesalahan. Anda menginstal definisi tipe keduanya express Dan dotenv dengan menjalankan perintah ini:
    npm install -D @types/express @types/dotenv
  3. Untuk menginisialisasi TypeScript, jalankan perintah ini.
    npx tsc --init

    Yang dihasilkan tsconfig.json file menunjukkan direktori root aplikasi TypeScript Anda. Ini memberikan opsi konfigurasi untuk menentukan cara kerja kompiler TypeScript. Ini mencakup serangkaian config opsi dinonaktifkan atau diaktifkan, dengan komentar yang menjelaskan setiap opsi.

  4. Tambahkan sebuah outDir properti ke config objek untuk menentukan direktori keluaran.
    {
      "compilerOptions": {
        // …
        "outDir": "./dist"
        // …
      }
    }

Cara membuat server TypeScript

Untuk membuat server TypeScript, ubah .js ekstensi ke .ts dan perbarui kode dengan definisi tipe ini:

import express, { Request, Response } from "express";
import dotenv from "dotenv";

// configures dotenv to work in your application
dotenv.config();
const app = express();

const PORT = process.env.PORT;

app.get("/", (request: Request, response: Response) => { 
  response.status(200).send("Hello World");
}); 

app.listen(PORT, () => { 
  console.log("Server running at PORT: ", PORT); 
}).on("error", (error) => {
  // gracefully handle error
  throw new Error(error.message);
});

Untuk menggunakan paket kompiler dan mengkompilasi file TypeScript ke dalamnya JavaScriptjalankan perintah di bawah ini di direktori root aplikasi Anda.

npx tsc

Kemudian mulai aplikasi Anda dengan menjalankan perintah.

node dist/index.js

Mengunjungi http://localhost:3000 di browser Anda akan memberikan respons “Halo Dunia”.

Cara menyebarkan server TypeScript Anda ke Kinsta

Sekarang, Anda siap untuk menyebarkan aplikasi Anda ke web. Anda dapat menyebarkan aplikasi Anda ke banyak platform, termasuk Hosting aplikasi Kinsta.

Sebelum Anda memasukkan aplikasi Anda ke repositori Git, gunakan TypeScript dan komit file JavaScript yang telah dikompilasi ke dalamnya Git tidak disarankan. Sertakan a start naskah di paket.json mengajukan.

{
  // …
  "script": {
    "start": "npx tsc && node dist/index.js",
  }
  // …	
}

Juga, buat a .gitignore file di direktori root aplikasi Anda dan sertakan node_modules Dan .env untuk mencegah mengirimkan file-file ini ke penyedia Git Anda.

Setelah repositori Anda diatur, ikuti langkah-langkah berikut untuk menyebarkan aplikasi Anda ke Kinsta:

  1. Masuk atau buat akun untuk melihat Anda Kinsta Saya dasbor.
  2. Otorisasi Kinsta dengan penyedia Git Anda.
  3. Klik Aplikasi di sidebar kiri, lalu klik Tambahkan aplikasi.
  4. Pilih repositori dan cabang tempat Anda ingin menyebarkan.
  5. Tetapkan nama unik untuk aplikasi Anda dan pilih a Lokasi pusat data.
  6. Gunakan semua konfigurasi default. MyKinsta menggunakan npm start sebagai titik masuk untuk menyebarkan aplikasi Anda. Jika Anda ingin menggunakan perintah lain, Anda bisa menyesuaikan proses runtime di MyKinsta.
  7. Klik Buat aplikasi.

Setelah penerapan, MyKinsta menyediakan URL untuk mengakses penerapan aplikasi Anda secara publik. Anda dapat mengunjungi halaman tersebut untuk mengonfirmasi bahwa halaman tersebut menampilkan “Hello World.”

Ringkasan

Panduan ini menunjukkan cara mengembangkan dan menyiapkan Aplikasi Ekspres menggunakan TypeScript dan menerapkan aplikasi dengan Kinsta. TypeScript memiliki kemampuan ekstra yang tidak dimiliki JavaScript — termasuk kelas tipe, keamanan tipe, alat pemfaktoran ulang, dan pelengkapan otomatis — untuk membantu Anda membangun aplikasi yang dapat diskalakan dan menangkap kesalahan selama pengembangan.

Kinsta membantu Anda menerapkan aplikasi dengan cepat dengan keamanan dan stabilitas yang ditingkatkan. Dengan 21 pusat data yang menawarkan mesin C2 Google, yang berjalan pada jaringan tingkat premium Google.

Pernahkah Anda menggunakan TypeScript sebelumnya? Apa pendapat Anda tentang menggunakannya dengan server Express?

Jeremy Holcombe
Kinsta

Editor Konten & Pemasaran di Kinsta, Pengembang Web WordPress, dan Penulis Konten. Di luar semua hal tentang WordPress, saya menikmati pantai, golf, dan film. Saya juga punya masalah orang tinggi ;).