Frontend Academy · Урок

Компиляция TS и tsconfig.json

Запускайте tsc для компиляции TypeScript, настраивайте компилятор параметрами tsconfig.json, такими как strict, target и outDir.

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

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

Установите TypeScript как зависимость для разработки. Интерфейс командной строки tsc компилирует файлы TypeScript. При использовании Vite или Next.js компиляцией занимается сборщик, но проверка типов всё равно выполняется.

npm install --save-dev typescript
npx tsc --version  # verify installation
npx tsc app.ts     # compile a single file

Инициализация tsconfig.json

Выполните npx tsc --init, чтобы создать tsconfig.json со всеми закомментированными параметрами и разумными значениями по умолчанию. Этот файл содержит единую конфигурацию компилятора TypeScript.

npx tsc --init
# Creates tsconfig.json with ~100 commented-out options

Структура tsconfig.json

Основные разделы: compilerOptions (поведение компилятора), include (файлы для компиляции), exclude (файлы, которые нужно пропустить).

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Целевая версия — выходной JavaScript

target указывает, какую версию JavaScript выдаёт tsc. Используйте ES2022 или ESNext для современных сред. ES5 обеспечивает максимальную совместимость, хотя обычно вместо этого используется Babel.

Система модулей

module управляет форматом модулей на выходе. CommonJS используется для Node.js. ESNext или ES2022 — для сборщиков (Vite, webpack). NodeNext — для современного Node.js с типом package.json:module.

Строгий режим — флаг строгости

"strict": true включает набор строгих проверок: strictNullChecks, noImplicitAny, strictFunctionTypes и другие. Всегда включайте его в новых проектах — он выявляет большинство ошибок.

{
  "compilerOptions": {
    "strict": true  // enables all strict checks
    // or individually:
    // "strictNullChecks": true,
    // "noImplicitAny": true
  }
}

strictNullChecks — устранение ошибок с null

При включённом strictNullChecks значения null и undefined нельзя присвоить другим типам, если они явно не включены в объединение. Это заставляет обрабатывать случаи с null.

// Without strictNullChecks:
const name: string = null; // allowed

// With strictNullChecks:
const name: string = null; // Error!
const name2: string | null = null; // OK

outDir и rootDir

outDir указывает, куда помещаются скомпилированные файлы JS. rootDir задаёт корень исходных файлов TypeScript. Вместе они сохраняют структуру исходного кода в каталоге dist/.

// src/utils.ts → dist/utils.js
{
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist"
  }
}

Пути — псевдонимы модулей

Настраивайте псевдонимы путей с помощью параметра paths и параметра baseUrl. Это позволяет импортировать @/components/Button вместо ../../components/Button.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    }
  }
}

Режим наблюдения и только проверка типов

tsc --watch повторно компилирует файлы при их изменении. tsc --noEmit выполняет проверку типов, не создавая выходные файлы, — это удобно в непрерывной интеграции, чтобы проверять типы, не дублируя работу сборщика.

# Type check only (no output):
npx tsc --noEmit

# Watch and recompile:
npx tsc --watch

Расширение tsconfig.json

Используйте extends, чтобы унаследовать параметры базовой конфигурации. Общие базовые конфигурации, такие как @tsconfig/strictest, содержат лучшие практики сообщества.

// Install:
npm install -D @tsconfig/strictest

// tsconfig.json:
{
  "extends": "@tsconfig/strictest",
  "compilerOptions": {
    "outDir": "./dist"
  }
}

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

Какой параметр tsconfig включает полный набор строгих проверок типов?

Итог: tsconfig.json

Компилятор TypeScript преобразует TypeScript в JavaScript. tsconfig.json управляет целевой версией (выходной ES), системой модулей, каталогом outDir, строгим режимом и путями. Строгий режим выявляет большинство ошибок. Используйте --noEmit в непрерывной интеграции для чистой проверки типов. Расширяйте базовые конфигурации сообщества, чтобы применять лучшие практики.

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

Урок «Компиляция TS и tsconfig.json» бесплатный?

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

Чему я научусь в уроке «Компиляция TS и tsconfig.json»?

Запускайте tsc для компиляции TypeScript, настраивайте компилятор параметрами tsconfig.json, такими как strict, target и outDir. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Компиляция TS и tsconfig.json»?

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

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

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

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

← Назад к Frontend Academy