Node.js Backend Development Bootcamp · Урок

Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода

Настройте удобный цикл разработки с транспиляцией на лету, режимом наблюдения и точными трассировками стека.

Урок 4 из 413 шагов

«Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода» — бесплатный урок Node.js Backend Development Bootcamp на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Node.js Backend Development Bootcamp, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Node.js Backend Development Bootcamp содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

The Slow Dev Loop Problem

When you write a Node.js backend in TypeScript, the naive workflow is painful: edit a file, run tsc to compile to JavaScript, then run node dist/index.js, then repeat on every change.

This adds friction in three places:

Transpile step — you wait for the whole project to build before anything runs.
Restart step — you manually kill and relaunch the process.
Debugging — errors point to compiled dist/*.js line numbers, not your real source.

In this lesson we wire up a frictionless loop: on-the-fly transpilation with tsx, automatic restarts with watch mode, and accurate stack traces with source maps.

What tsx Actually Does

tsx ("TypeScript Execute") is a CLI that runs TypeScript and ESM files directly, with no separate build step. Under the hood it uses esbuild to transpile each module in memory as Node loads it.

Key facts to remember:

It does not type-check — esbuild only strips types and emits JS. You keep tsc --noEmit for type safety in CI.
It handles both .ts and modern ESM import syntax transparently.
It is meant for development and scripts, not as your production runtime.

Install it as a dev dependency:

// package.json (dev dependency install)
// npm install --save-dev tsx

// Then run any TypeScript file directly:
// npx tsx src/index.ts

// No tsconfig 'outDir', no dist/ folder needed during dev.

Running a File Directly

The simplest use of tsx is replacing node with tsx. Given a TypeScript entry point, you run it directly and tsx transpiles on the fly.

Here is a tiny standalone script. The logic itself is plain JavaScript you can run anywhere; with tsx you would write the same thing in a .ts file using types, and tsx would strip them before executing.

function greet(name) {
  return `Hello, ${name}! Server starting...`;
}

const port = process.env.PORT || 3000;
console.log(greet('developer'));
console.log(`Would listen on port ${port}`);

Watch Mode: Automatic Restarts

The biggest time-saver is tsx watch. It launches your program, watches every file in the dependency graph, and restarts the process automatically whenever a source file changes.

This replaces older tools like nodemon + ts-node with a single fast command. You no longer hit Ctrl+C and re-run after every edit.

Add it to your package.json scripts so the whole team uses the same command:

{
  "name": "my-api",
  "type": "module",
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "start": "node dist/index.js",
    "typecheck": "tsc --noEmit",
    "build": "tsc"
  }
}

A Watchable Server Entry Point

Here is a minimal HTTP server entry point you would run with tsx watch. Edit any handler and tsx restarts the process in milliseconds, so the new code is live almost instantly.

Notice this uses only Node's built-in http module — no Express, no framework. tsx works the same regardless of what libraries you import.

import { createServer } from 'node:http';

const server = createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'application/json' });
  res.end(JSON.stringify({ message: 'Edit me and tsx restarts!' }));
});

server.listen(3000, () => {
  console.log('Listening on http://localhost:3000');
});

Why You Still Need Type Checking

Because tsx (via esbuild) only strips types, it will happily run code that has type errors. That speed is great for iteration but dangerous if it is your only safety net.

The standard pattern is a two-track setup:

Fast loop: tsx watch for instant feedback while coding.
Correctness gate: tsc --noEmit in a separate terminal or in CI to catch real type errors.

You can even run the type-checker in watch mode alongside tsx:

// Terminal 1 — run + restart on change (no type errors caught)
// npm run dev        ->  tsx watch src/index.ts

// Terminal 2 — continuous type checking
// npx tsc --noEmit --watch

// CI pipeline step
// npm run typecheck   ->  tsc --noEmit

Hot Reload vs Restart

It is worth being precise: tsx watch does a full process restart, not in-place hot module replacement (HMR). The whole Node process exits and a fresh one starts.

For backend APIs this is almost always what you want:

State is rebuilt cleanly, avoiding stale modules or leaked listeners.
Restarts are fast because only changed modules are re-transpiled.

True HMR (keeping connections and in-memory state alive across edits) exists in some frameworks but adds complexity and subtle bugs. For most Node backends, a fast clean restart is simpler and safer.

Graceful Shutdown for Clean Restarts

Because watch mode kills and relaunches the process, your server should shut down cleanly so ports and resources are released before the next start. Listen for the SIGTERM / SIGINT signals tsx sends.

Without this, a slow-closing server can leave the port in use and the restarted process crashes with EADDRINUSE.

import { createServer } from 'node:http';

const server = createServer((req, res) => res.end('ok'));
server.listen(3000);

function shutdown() {
  console.log('Closing server before restart...');
  server.close(() => process.exit(0));
}

process.on('SIGTERM', shutdown);
process.on('SIGINT', shutdown);

Source Maps: Accurate Stack Traces

When code is transpiled, an error's line and column refer to the generated JavaScript, not your TypeScript. Source maps are mapping files that translate generated positions back to your original source.

Good news for tsx: it generates and applies source maps automatically, so thrown errors already point at your real .ts lines.

For a tsc-built production bundle you must opt in via tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "dist",
    "sourceMap": true,
    "strict": true
  }
}

Enabling Source Maps at Runtime

Generating .map files is only half the story. Node must be told to use them when formatting stack traces. Modern Node supports the --enable-source-maps flag.

With it, a crash in dist/index.js shows the original src/index.ts filename and line in the stack trace. Add it to your production start script:

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node --enable-source-maps dist/index.js"
  }
}

Seeing a Source-Mapped Trace

To feel why source maps matter, here is a complete program that throws from inside a nested call. When run, the stack trace lists each function and the line it failed on.

In a transpiled project without source maps, those line numbers would belong to the compiled output and be useless. With tsx (or --enable-source-maps), they map back to your original source.

function loadConfig() {
  throw new Error('Missing DATABASE_URL');
}

function startServer() {
  return loadConfig();
}

try {
  startServer();
} catch (err) {
  console.error('Startup failed:', err.message);
  console.error(err.stack);
}

Quick Check

You are setting up the development and production workflow for a TypeScript Node.js API. Answer based on what each tool does.

Ответь в интерактивном уроке

Recap

You built a frictionless TypeScript dev loop for Node.js backends:

tsx runs .ts and ESM directly with esbuild — no separate build step, but no type checking either.
tsx watch auto-restarts the process on every file change, replacing nodemon + ts-node with one fast command.
Watch mode does a clean full restart, so add graceful shutdown (SIGTERM/SIGINT) to avoid EADDRINUSE.
Keep correctness with tsc --noEmit in CI, and build production with tsc.
Source maps map errors back to your real source: tsx applies them automatically, and production needs sourceMap: true plus node --enable-source-maps.

Result: edit, save, and see correct behavior and accurate stack traces almost instantly.

Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 22
Уроки: 92

Начать учиться бесплатно Посмотреть полный курс

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

Урок «Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода» бесплатный?

Да — полный текст урока «Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Node.js Backend Development Bootcamp, подпишись на CoddyKit PRO. Курс Node.js Backend Development Bootcamp содержит 4 уроков всего.

Чему я научусь в уроке «Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода»?

Настройте удобный цикл разработки с транспиляцией на лету, режимом наблюдения и точными трассировками стека. Ты практикуешь Node.js Backend Development Bootcamp с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Node.js Backend Development Bootcamp?

Предыдущий опыт не требуется. Node.js Backend Development Bootcamp на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Node.js Backend Development Bootcamp?

Да. Каждый урок Node.js Backend Development Bootcamp включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Миграция с CommonJS на нативные модули ES
Настройка tsconfig для серверных проектов Node
Типобезопасная конфигурация окружения и проверка во время выполнения
Быстрая итерация с tsx, горячей перезагрузкой и картами исходного кода

← Назад к Node.js Backend Development Bootcamp