TypeScript — это строго типизированный язык программирования, расширяющий возможности JavaScript. Он предлагает ряд функций, которые помогут вам разрабатывать масштабируемые приложения с помощью Node.js и Express.

Одним из важнейших преимуществ TypeScript перед JavaScript является то, что он предоставляет классы типов, что упрощает написание более предсказуемого и удобного в сопровождении кода. Кроме того, TypeScript обеспечивает безопасность типов, гарантируя отсутствие ошибок во время выполнения вашего кода и упрощая обнаружение ошибок на ранних этапах разработки. Язык также поставляется с инструментами рефакторинга и автодополнения, что упрощает работу разработчиков.

Более того, Node.js и Express обеспечивают отличную производительность для приложений любого масштаба. Использование классов в TypeScript также помогает в организации и структуре, что дополнительно способствует масштабируемости. С помощью этих инструментов вы можете создавать надежные и масштабируемые приложения, способные удовлетворить растущий спрос.

В этой статье демонстрируется настройка приложения Express с использованием TypeScript с одной конечной точкой. Затем объясняется, как развернуть ваше приложение на хостинге приложений Kinsta.

Как создать экспресс-сервер

Чтобы следовать этому руководству, убедитесь, что на вашем компьютере установлены Node.js и npm. Чтобы настроить экспресс-сервер:

  1. Создайте каталог, используя приведенный ниже код: 
    mkdir sample_app && cd sample_app
  2. Инициализируйте приложение Node.js в каталоге, выполнив следующую команду: 
    npm init -y

    -y флаг в команде принимает запросы по умолчанию при создании пакет.json файл, заполненный следующим кодом:

    { 
  "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. Далее установите express для добавления необходимых функций и dotenv для управления переменными среды в каталоге, который вы только что создали, выполнив эту команду: 
    npm i express dotenv
  4. Создать .env файл в корне sample_app каталог и заполните его приведенной ниже переменной. 
    PORT=3000
  5. Создайте экспресс-приложение, которое отвечает Hello World текст, когда пользователи посещают 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() заполняет среду процесса вашего приложения Node (process.env) с переменными, определенными в .env файл.

  6. Запустите приложение Node.js, выполнив следующую команду: 
    node index.js

    Проверьте, работает ли приложение, посетив http://localhost:3000 в своем браузере. Вы должны получить ответ, подобный этому.

    Привет, мир на http:localhost:3000.

Включите TypeScript в приложении Express

Выполните следующие действия, чтобы использовать TypeScript в приложении Express:

  1. Установите TypeScript, выполнив эту команду: 
    npm i -D typescript

    -D Опция позволяет npm устанавливать пакеты как зависимости для разработчиков. Вы можете использовать пакеты, которые вы устанавливаете с помощью этой опции, на этапе разработки.

  2. Одной из сильных сторон сообщества TypeScript является репозиторий DefinitelyTyped на GitHub. Он хранит документацию по определениям типов для различных пакетов npm. Пользователи могут быстро интегрировать пакеты npm в свои проекты, не беспокоясь о трудностях, связанных с типами, просто установив определение типа для этих пакетов с помощью npm. DefinitelyTyped — незаменимый инструмент для разработчиков TypeScript. Это позволяет им писать более чистый и эффективный код и снижает вероятность ошибок. Вы устанавливаете определения типов обоих express и dotenv выполнив эту команду: 
    npm install -D @types/express @types/dotenv
  3. Чтобы инициализировать TypeScript, выполните эту команду. 
    npx tsc --init

    Сгенерированный tsconfig.json file указывает корневой каталог вашего приложения TypeScript. Он предоставляет параметры конфигурации, определяющие, как должны работать компиляторы TypeScript. Он включает в себя ряд config опции отключены или включены, с комментариями, объясняющими каждую опцию.

  4. Добавить outDir собственность в config объект для определения выходного каталога. 
    {
  "compilerOptions": {
    // …
    "outDir": "./dist"
    // …
  }
}

Как создать сервер TypeScript

Чтобы создать сервер TypeScript, измените .js расширение до .ts и обновите код, включив в него следующие определения типов:

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);
});

Чтобы использовать пакет компилятора и скомпилировать файл TypeScript в JavaScript, выполните приведенную ниже команду в корневом каталоге вашего приложения.

npx tsc

Затем запустите приложение, выполнив команду.

node dist/index.js

Посещение http://localhost:3000 в вашем браузере должно привести к ответу «Hello World».

Как развернуть ваш сервер TypeScript в Kinsta

Теперь вы готовы развернуть свое приложение в Интернете. Вы можете развернуть свое приложение на многих платформах, включая хостинг приложений Kinsta.

Прежде чем отправить приложение в репозиторий Git, не рекомендуется использовать TypeScript и передавать скомпилированный файл JavaScript в Git. Включите start сценарий в пакет.json файл.

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

Также создайте .gitignore файл в корневом каталоге вашего приложения и включите node_modules и .env чтобы предотвратить отправку этих файлов вашему провайдеру Git.

После настройки репозитория выполните следующие действия, чтобы развернуть приложение в Kinsta:

  1. Войдите в систему или создайте учетную запись, чтобы просмотреть панель управления MyKinsta.
  2. Авторизуйте Kinsta у своего провайдера Git.
  3. Нажмите Приложения на левой боковой панели, затем нажмите Добавить приложение.
  4. Выберите репозиторий и ветку, из которой вы хотите выполнить развертывание.
  5. Присвойте своему приложению уникальное имя и выберите Расположение дата-центра.
  6. Используйте все конфигурации по умолчанию. MyKinsta использует npm start в качестве точки входа для развертывания вашего приложения. Если вы хотите использовать другую команду, вы можете настроить процесс выполнения в MyKinsta.
  7. Нажмите Создать заявку.

После развертывания MyKinsta предоставляет URL-адрес для публичного доступа к вашему развертыванию приложения. Вы можете посетить страницу и убедиться, что на ней отображается «Hello World».

Краткое содержание

В этом руководстве показано, как разработать и настроить приложение Express с использованием TypeScript и развернуть приложение с помощью Kinsta. TypeScript имеет дополнительные возможности, которых нет в JavaScript, включая классы типов, безопасность типов, инструменты рефакторинга и автодополнение, чтобы помочь вам создавать масштабируемые приложения и выявлять ошибки во время разработки.

Kinsta помогает вам быстро развернуть приложение, обеспечивая повышенную безопасность и стабильность. С 27 центрами обработки данных, предлагающими машину Google C2, которая работает в сети Google премиум-уровня.

Использовали ли вы TypeScript раньше? Что вы думаете об использовании его с сервером Express?