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

Настройка проекта Node.js с TypeScript и Express придает вашему приложению структуру, масштабируемость и ясность. В этом руководстве мы пошагово рассмотрим инициализацию проекта Node.js, интеграцию TypeScript, Express и добавление необходимых инструментов разработчика.
Ключевые моменты
- Быстро настройте надежный проект Node.js с TypeScript и Express.
- Интегрируйте необходимые инструменты: ESLint, Prettier, Jest и nodemon для беспрепятственной разработки.
Шаг 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
.
Часто задаваемые вопросы
Да. Просто замените команды npm на эквивалентные команды yarn или pnpm.
Нет. Всегда компилируйте ваш проект с помощью `tsc` и запускайте JavaScript из папки `dist` в продакшене.
Хотя Jest не обязателен, он значительно повышает надежность и качество кода, что делает его ценным даже для более простых проектов.