Как настроить проект Node.js с TypeScript и Express

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

Шаг 1: Инициализация проекта Node.js

Создайте папку проекта и инициализируйте npm:

mkdir my-node-project
cd my-node-project
npm init -y

Это создаст файл package.json. Далее создайте .gitignore, чтобы исключить модули node и файлы сборки:

node_modules
dist

Шаг 2: Добавление TypeScript

Установите TypeScript и связанные зависимости:

npm install --save-dev typescript ts-node @types/node

Создайте конфигурацию TypeScript с помощью:

npx tsc --init

Настройте ваш tsconfig.json следующим образом:

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "commonjs",
    "rootDir": "./src",
    "outDir": "./dist",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true
  }
}

Создайте папку src для вашего кода:

mkdir src

Шаг 3: Настройка Express

Установите Express и его типы:

npm install express
npm install --save-dev @types/express

Создайте базовый сервер в файле src/index.ts:

import express, { Application, Request, Response } from 'express';

const app: Application = express();
const PORT = 3000;

app.get('/', (req: Request, res: Response) => {
  res.send('Hello, TypeScript + Express!');
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

Запустите его с помощью:

npx ts-node src/index.ts

Шаг 4: Настройка ESLint и Prettier

Установите ESLint, Prettier и плагины:

npm install --save-dev eslint prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-prettier eslint-config-prettier

Настройте ESLint с помощью .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "env": { "node": true, "es6": true, "jest": true }
}

Создайте .prettierrc.json:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

Обновите скрипты в package.json:

"scripts": {
  "lint": "eslint 'src/**/*.{ts,js}'",
  "format": "prettier --write ."
}

Шаг 5: Jest для тестирования

Добавьте Jest и поддержку TypeScript:

npm install --save-dev jest ts-jest @types/jest
npx ts-jest config:init

Напишите простой тест src/__tests__/sum.test.ts:

import { sum } from '../sum';

test('sum works', () => {
  expect(sum(1, 2)).toBe(3);
});

С соответствующим модулем:

export function sum(a: number, b: number): number {
  return a + b;
}

Обновите package.json:

"scripts": {
  "test": "jest --watch"
}

Шаг 6: Nodemon для разработки

Установите и настройте nodemon:

npm install --save-dev nodemon

Добавьте nodemon.json:

{
  "watch": ["src"],
  "ext": "ts,json",
  "ignore": ["src/**/*.test.ts"],
  "exec": "ts-node ./src/index.ts"
}

Скрипт для среды разработки в package.json:

"scripts": {
  "dev": "nodemon"
}

Запустите npm run dev, чтобы автоматически перезагружать сервер во время разработки.

Лучшие практики

• Используйте отдельные папки (src для кода, dist для результатов сборки).
• Коммитьте только исходные файлы, а не скомпилированный код (dist) или модули node.
• Регулярно запускайте npm run lint и npm run format.
• Компилируйте код (npm run build) перед развертыванием, затем запускайте с помощью npm start.

Часто задаваемые вопросы

Могу ли я использовать Yarn или pnpm вместо npm?

Да. Просто замените команды npm на эквивалентные команды yarn или pnpm.

Следует ли использовать ts-node в продакшене?

Нет. Всегда компилируйте ваш проект с помощью `tsc` и запускайте JavaScript из папки `dist` в продакшене.

Нужен ли Jest для простых проектов?

Хотя Jest не обязателен, он значительно повышает надежность и качество кода, что делает его ценным даже для более простых проектов.