0Pricing
TypeScript Academy · Урок

Компиляция TypeScript в JavaScript

Разберитесь в компиляторе TypeScript и его выводе.

«Компиляция TypeScript в JavaScript» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Добро пожаловать

TypeScript нельзя запускать непосредственно в Node.js или браузере. Сначала его необходимо скомпилировать в JavaScript. В этом уроке вы узнаете, как работает компилятор TypeScript.

Установка компилятора TypeScript

Установите TypeScript в качестве зависимости для разработки в своём проекте. После установки команда `tsc` станет доступна в локальных скриптах.
npm install --save-dev typescript
npx tsc --version

Первая компиляция с помощью tsc

Выполните `tsc hello.ts`, чтобы скомпилировать один файл. В том же каталоге появится `hello.js` без всех типов.
// hello.ts
function greet(name: string): string {
  return 'Hello, ' + name;
}
console.log(greet('World'));

// Compile: npx tsc hello.ts
// Output: hello.js (no types)

tsconfig.json: конфигурация проекта

Для настоящего проекта вам понадобится `tsconfig.json`. Выполните `tsc --init`, чтобы сгенерировать его. Этот файл управляет целевой версией, форматом модулей, строгостью проверок, каталогом вывода и многим другим.
npx tsc --init
// Creates tsconfig.json with defaults and comments

Основные параметры tsconfig.json

Наиболее важные поля tsconfig.json — target (версия ES для вывода), module (система модулей), outDir (каталог вывода) и strict (включение всех строгих проверок).
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true
  }
}

Режим наблюдения с помощью tsc --watch

Выполните `tsc --watch`, чтобы автоматически перекомпилировать код при каждом сохранении файла TypeScript. Это ускоряет цикл разработки.
npx tsc --watch
// Watches for changes and recompiles on save

noEmit: проверка типов без создания файлов

Флаг `noEmit` запускает проверку типов, не записывая файлы вывода. Это полезно в конвейерах CI, где для фактической компиляции используется сборщик вроде Vite или esbuild.
// tsconfig.json
{ "compilerOptions": { "noEmit": true } }

// Then run:
npx tsc --noEmit

Более быстрые альтернативы: ts-node и tsx

Во время разработки можно запускать TypeScript напрямую, без отдельного этапа компиляции, с помощью `ts-node` или более быстрого инструмента `tsx`.
# Run TS directly with ts-node
npx ts-node src/index.ts

# Or faster with tsx
npx tsx src/index.ts

Карты исходников для отладки

Включите `sourceMap: true`, чтобы инструменты разработчика браузера и отладчики Node.js сопоставляли строки скомпилированного JS с исходным кодом TypeScript.
{ "compilerOptions": { "sourceMap": true } }

Файлы объявлений (.d.ts)

При включённом параметре `declaration: true` компилятор также создаёт файлы `.d.ts`. Благодаря им другие проекты TypeScript могут использовать вашу библиотеку с полной информацией о типах.
{ "compilerOptions": { "declaration": true } }
// Outputs: dist/index.js AND dist/index.d.ts

Ошибки компилятора по умолчанию не блокируют вывод

По умолчанию, если в TypeScript есть ошибки типов, `tsc` всё равно создаёт JavaScript, но завершается с ненулевым кодом. Используйте `noEmitOnError: true`, чтобы остановить вывод при наличии ошибок.
{ "compilerOptions": { "noEmitOnError": true } }

Быстрая проверка

Что происходит при выполнении `tsc --noEmit`?

Повторение

Компилятор TypeScript преобразует файлы TypeScript в JavaScript. Настройте его с помощью tsconfig.json, используйте --watch для разработки, --noEmit только для проверки типов, а ts-node/tsx — для прямого запуска TypeScript.

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

Урок «Компиляция TypeScript в JavaScript» бесплатный?

Да — полный текст урока «Компиляция TypeScript в JavaScript» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Компиляция TypeScript в JavaScript»?

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

Нужен ли мне опыт, чтобы начать TypeScript Academy?

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

Сколько времени занимает урок «Компиляция TypeScript в JavaScript»?

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

Можно ли писать и запускать код в этом уроке TypeScript Academy?

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

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

  1. Проблемные места JavaScript: ошибки во время выполнения
  2. Что TypeScript добавляет в JavaScript
  3. Компиляция TypeScript в JavaScript
  4. Когда использовать TypeScript в проектах
← Назад к TypeScript Academy