Гид:

Часть 1:Запуск проекта и настройка минимального REST API NodeJS
Часть 2: Организация проект, добавление маршрутов, контроллеров и изолированного сервера
Часть 3(вы здесь):Добавить поддержку typescript + рефакторинг всего кода javascript в typescript и ES6
Часть 4:Изучите парадигму CRUD, реализуйте ее в NodeJS и протестируйте с помощью CURL

Брифинг

В этой статье мы начнем добавлять поддержку Typescript в наше приложение NodeJS и рефакторинг предыдущего кода.

Чему вы научитесь?

В этой статье вы узнаете, как добавить поддержку машинописного текста в приложение NodeJS и провести рефакторинг предыдущего кода с синтаксисом ES6+ и структурировать проект с помощью Typescript.

Давайте начнем

Добавьте TypeScript в качестве зависимости разработчика

yarn add typescript -D

Добавить @types для машинописного текста

yarn add @types/node -D

Настройте Typescript с помощью tsconfig.json

Внутри корневого каталога в вашем терминале запустите:

tsc --init

Это может создать файл tsconfig.json. Давайте отредактируем этот файл конфигурации, чтобы включить необходимую опцию для запуска Typescript:

В tsconfig.json в параметрах компилятора измените параметр target с ES5 на ES6.

"target": "es6",

Настройте скрипт npm для запуска сервера с машинописным текстом + следите за изменениями файла

Прежде всего, давайте добавим библиотеку ts-node-dev для запуска в режиме разработки и просмотра изменений файлов.

yarn add ts-node-dev -D

В package.json настройте пользовательский скрипт со следующими дополнительными параметрами:

  • — возрождение: команда по умолчанию
  • — очистить: очистит экран (терминал) при перезапуске.
  • — ignore-watch: файлы/папки, которые будут игнорироваться node-dev.
  • — только для переноса: рассмотрите возможность использования этого флага, который является нормальным для рабочего процесса разработки и значительно ускорит работу.

В package.json создайте параметры scripts и добавьте команду dev.

"scripts": {
   "dev": "ts-node-dev --respawn --clear --transpile-only --ignore-watch node_modules src/server.js"
},

Теперь вы можете запустить сервер. Запустите из корневой папки команду:

// if you use yarn
yarn dev
// if you use npm
npm run dev

После запуска сервера ваш терминал должен выглядеть так:

На данный момент у вас уже есть поддержка машинописного текста, среда и просмотр файлов в вашем приложении. Это означает, что теперь вам больше не нужно перезапускать сервер вручную. Флаг —watch из ts-node будет перезапускать сервер каждый раз при изменении файла.

Обновите файлы javascript до typescript.

Теперь, когда наш. проект поддерживает машинопись, давайте изменим расширения файлов с javascript (.js) на машинопись (.ts). Обновите расширения файлов, переименовав файлы следующих файлов:

  • /src/app.js=› app.ts
  • /src/server.js =› server.ts
  • /src/routes.js =› routes.ts
  • /src/controllers/global.js =› global.ts
  • /src/routes/global.js =› global.ts

Теперь ваши файлы должны выглядеть так:

Рефакторинг/Обновление кода

Обратите внимание, что ваш редактор кода, вероятно, предупредил вас о некоторых проблемах с импортом/экспортом и синтаксисом. Это потому, что теперь наш проект ожидает, помимо машинописного кода, современный синтаксис, такой как импорт/экспорт вместо require и module.exports. Давай исправим.

Обновление app.ts

При использовании машинописного текста, если в библиотеке нет встроенных типов, нам нужно добавить их отдельно. Добавим экспресс-типы:

yarn add @types/express -D

Измените с требовать синтаксис на синтаксис импорта. Ваш код app.ts должен выглядеть так:

import express from 'express'
// import our local router file
import routes from './routes'
// init express app
const app = express()
// allow express to work with json
app.use(express.json())
// router
app.use(routes)
// export app to import into server.js
export default app

Обновление server.ts

Здесь единственное, что нам нужно изменить, это синтаксис require для импорта. Итак, ваш файл server.ts должен выглядеть так:

import app from './app'
const PORT = 3000
app.listen(PORT, () => console.log("Server is running at PORT 3000 🚀"))

Обновление route.ts

Измените синтаксис require для импорта и измените module.exports на экспорт по умолчанию. Ваш файл route.ts должен выглядеть так:

import globalRoute from './routes/global'
const routes = [globalRoute]
export default routes

Обновление /controllers/global.ts

Измените экспорт модуля. И, возможно, ваш редактор кода предупреждает о типах параметров req, res. А пока, поскольку мы не собираемся беспокоиться о правильности ввода в этой статье, добавим к ним тип any. После этого ваш код должен выглядеть так:

const globalControllers = {
healthyCheck(req: any, res: any) { res.send('<h2>API is running</h2>') }
}
export default globalControllers

Обновление /routes/global.ts

Измените синтаксис require для импорта и измените module.exports на экспорт по умолчанию. Ваш файл маршрутов global.ts должен выглядеть следующим образом:

import express from 'express'
import globalController from './../controllers/global'
const router = express.Router()
// your routes paths and methods
// single basic route at the base path of your application
router.get('/', globalController.healthyCheck)
export default router

Обновить скрипт разработчика в package.json

Команда dev в сценариях пытается запустить файл server.js вместо server.ts. Итак, исправим. Ваш скрипт разработки должен выглядеть так:

"scripts": {
    "dev": "ts-node-dev --respawn --clear --transpile-only --ignore-watch node_modules src/server.ts"
  },

После этого ваш терминал должен выглядеть так.

Теперь у нас есть работающий, структурированный сервер, поддерживающий машинописный текст и синтаксис ES6, а также с автоматическим перезапуском с просмотром файлов из ts-node-dev.

В следующих статьях мы создадим маршруты, функционал, CRUD, подключимся к MongoDB, создадим систему аутентификации и многое другое. Увидимся в следующей статье, следите за новостями!