<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Настройка файла tsconfig.json]]></title><description><![CDATA[<p dir="auto">Напомню, для для того что бы создать файл <code>tsconfig.json</code> прописываем в консоли команду:</p>
<pre><code>./node_modules/.bin/tsc --init
</code></pre>
<p dir="auto">или можно использовать команду (спасибо @Jspi):</p>
<pre><code>npx tsc --init
</code></pre>
<p dir="auto">Если кому интересно вот предидущие темы:</p>
<ul>
<li><a href="https://forum.exlends.com/topic/225/dobavlyaem-typescript-v-proekt" target="_blank" rel="noopener noreferrer">Добавление TypeScript к проекту</a></li>
<li><a href="https://forum.exlends.com/topic/226/kompilyaciya-typescript-cherez-tsc" target="_blank" rel="noopener noreferrer">Компиляция TS через tsc</a></li>
</ul>
<p dir="auto">Вернемся к нашей конфигурации, сам конфиг поддерживает множество опций, все они описаны в <a href="https://www.typescriptlang.org/tsconfig/" target="_blank" rel="noopener noreferrer">официальной документации</a>.<br />
Мы же разберем самые необходимые.</p>
<hr />
<h2>Расширение</h2>
<p dir="auto">Для тех кто в танке, файлов конфига может быть несколько. Один для разработки, один для продакшена или базовый файл для описания общих элементов. Файлы настроек подключаются при помощи параметра <code>extends</code> в корне основной конфигурации.</p>
<p dir="auto">Пример:</p>
<pre><code class="language-json">// tsconfig.json
{
  "extends": "./tsconfig.json", // Данный конфиг расширяет основной файл tsconfig.json
  "compilerOptions": {
    // переопределяем часть настроек
    "declaration": true,
  }
}
</code></pre>
<p dir="auto">Посмотреть итоговую конфигурацию с учетом всех наследований можно выполнив команду:</p>
<pre><code>./node_modules/.bin/tsc --showConfig
</code></pre>
<hr />
<h2>Целевая директория</h2>
<p dir="auto">Напомню что скомпилированные файлы и исходники должны храниться отдельно!</p>
<p dir="auto">Сам TypeScript позволяет это сделать, для этого требуется указать параметр <code>outDir</code> в разделе конфигурации <code>compilerOptions</code>:</p>
<pre><code class="language-json">{
  "compilerOptions": {
    "outDir": "dist"
  }
}
</code></pre>
<hr />
<h2>Исключение файлов</h2>
<p dir="auto">Еще одна не менее важная настройка, если мы запускаем компилятор <code>tsc</code> и не указывает файл в качестве аргумента, то в сборку попадут все файлы TypeScript.</p>
<p dir="auto">Иногда требуется исключение и в сборку должны попасть не все файлы, для такой задачи у конфигуратора есть  аж три параметра, они указываются в корне файла конфигурации.</p>
<p dir="auto">При помощи параметра <code>files</code> можно указать определенный список компилируемых файлов, вот пример:</p>
<pre><code class="language-json">{
  "compilerOptions": {},
  "files": [
    ".src/core.ts",
    ".src/app.ts"
  ]
}
</code></pre>
<p dir="auto">После такой настройки компилятор будет собирать только нами указанные файлы и все что подключены внутри.</p>
<p dir="auto">Но что если у нас большой проект? То перечислять файлы вручную будет конечно же неудобно. Для этого мы можем использовать другой параметр <code>include</code>, в него мы указываем шаблоны файлов и пути к ним.</p>
<p dir="auto">Как это сделать - одна звездочка (*) будет обозначать любую последовательность символов, а две (**) - любая папка и подпапка. Таким шаблоном можно заменить все необходимые пути.</p>
<p dir="auto">Пример:</p>
<pre><code class="language-json">{
  "compilerOptions": {},
  "include": [
    "src/**/*",
    "tests/**/*"
  ]
}
</code></pre>
<p dir="auto">Дополнительно что бы избежать попадания лишних файлов поможет параметр <code>exclude</code>, вот пример:</p>
<pre><code class="language-json"> {
  "compilerOptions": {},
  "exclude": [
    "node_modules",
    "./src/**/*.spec.ts"
  ]
}
</code></pre>
<p dir="auto">По дефолту параметр <code>exclude</code> включает все папки модулей <code>node_modules</code> и папку компиляции которая указана в <code>outDir</code>, если будете сами переделывать значение <code>exclude</code>, обязательно исключите эти пути!</p>
<hr />
<h2>Гибридный код</h2>
<p dir="auto">Перевод кодовой базы проекта с JavaScript на TypeScript — процесс небыстрый. И чтобы в это время код оставался рабочим, нужно научить компилятор принимать на вход как JS-, так и TS-файлы. Сделать это поможет параметр allowJs:</p>
<p dir="auto">Перевод проекта с <strong>JavaScript</strong> на <strong>TypeScript</strong> довольно долгий процесс, и код должен оставаться рабочим, для этого можно задать компилятор параметры что бы он мог принимать на вход <code>.js</code> и <code>.ts</code>, в этом нам поможет <code>allowJs</code>:</p>
<pre><code class="language-json">{
  "compilerOptions": {
    "allowJs": true
  }
}
</code></pre>
<p dir="auto">При включенном <code>allowJs</code> теперь можно спокойно работать и продолжать переводить проект на <strong>TypeScript</strong>, старый код переписывать, а новый уже писать на TS.</p>
<p dir="auto">Кстати о возможности конфликтов с некоторыми старыми библиотеками к примеру <code>lodash</code>, эта библиотека неподерживает ES6 модули. Для работы с ней или аналогичными в конфигурации TypeScript есть параметры  <code>esModuleInterop</code> и зависимый от него <code>allowSyntheticDefaultImports</code>. Кстати  включить только первый, а второй включится автоматически, пример:</p>
<pre><code class="language-json">{
  "compilerOptions": {
    "esModuleInterop": true
  }
}
</code></pre>
<h2>Стандарт красоты (качества)</h2>
<p dir="auto">TS имеет возможность компилировать исходники в различные стандарты TS. В зависимости от проекта стандарт можно указать в параметре <code>target</code>:</p>
<pre><code class="language-json">{
  "compilerOptions": {
    "target": "ES6"
  }
}
</code></pre>
<p dir="auto">По рекомендациям из официального сайта TS рекомендуется использовать ES6 так как он поддерживается всеми современными браузерами.<br />
Глянуть какой стандарт поддерживают те или иные брауезры можно на сайте - <a href="https://caniuse.com/" target="_blank" rel="noopener noreferrer">caniuse</a>.</p>
<hr />
<h2>Строгий режим</h2>
<p dir="auto">Строгий режим включается простым параметром <code>strict</code>:</p>
<pre><code class="language-json">{
  "compilerOptions": {
    "strict": true
  }
}
</code></pre>
<p dir="auto">Но этот режим в TS отличается от простого JS, и вносит дополнительные правила:</p>
<ul>
<li><code>noImplicitAny</code> неявный тип <code>any</code>;</li>
<li><code>noImplicitThis</code> запрещает неявно определять <code>this-контекст</code>;</li>
<li><code>strictNullChecks</code> проверяет, могут ли используемые значения быть <code>null</code> и <code>undefined</code>;</li>
<li><code>strictPropertyInitialization</code> следит, чтобы в классе все свойства были инициализированы;</li>
<li><code>strictBindCallApply</code> проверяет, чтобы <code>bind</code>, <code>call</code> и <code>apply</code> были использованы с правильными аргументами;</li>
<li><code>strictFunctionTypes</code> сравнивает функции по контрвариантным правилам.</li>
</ul>
<hr />
<h2>Файлы декларации</h2>
<p dir="auto">TypeScript содержит типы и работает таким образом что во время компиляции они пропадают, а в JS коде остается только реализация.</p>
<p dir="auto">При импорте какой-либо функции в исходный файл из пакетов <code>npm</code> наш компилятор смотри в папку <code>node_modules</code>. Так как внутри находится уже готовый кода, а это означает что вся типизация пропала.</p>
<p dir="auto">Чтобы сохранить обратную совместимость, рядом с итоговым файлом размещают декларацию с расширением <code>.d.ts</code> и тем же именем. В этой декларации содержатся исключительно описания типов, без какой‑либо реализации кода</p>
<p dir="auto">Для того что бы TS умел создавать такие файлы во время компиляции мы должны включить опцию <code>declaration</code>:</p>
<pre><code class="language-json"> {
  "compilerOptions": {
    "declaration": true
  }
}
</code></pre>
<p dir="auto">Теперь когда компилятор будет использовать файлы JS то найдет рядом файлы декларации.</p>
<p dir="auto">Теперь перейдет к <strong>Source Maps</strong>, это расширение <code>.js.map</code> оно помогает во время отладки приложения. А именно связывает строки исходного кода с компилированным. Включим параметр <code>sourceMap</code>:</p>
<pre><code class="language-json"> {
  "compilerOptions": {
        "sourceMap": true
  }
}
</code></pre>
<hr />
<h2>Опции в package.json</h2>
<p dir="auto">Не редко все перечисленные параметры выше записываются в конфигурацию, но их также можно использовать при запуске команд <code>tsc</code>:</p>
<pre><code>tsc --sourceMap 
</code></pre>
<p dir="auto">Такая практика полезна когда необходим скомпилировать код с минимальными исправлениями в конфигурации.</p>
<h2>Оптимизация и ускорение</h2>
<p dir="auto">И как же нам ускорить компиляцию? Ответ есть, сохранять данные предидущей компиляции, это позволит сильно ускорить будущие компиляции не собирая все с нуля. Предидущая компиляция хранится в файле <code>.tsbuildinfo</code>, а вот параметр отвечающий за это:</p>
<pre><code class="language-json">{
  "compilerOptions": {
    "incremental": true
  }
}
</code></pre>
<hr />
<h2>Подведем итоги</h2>
<p dir="auto">А теперь коротко еще раз пробежимся по ключевым параметрам и опция.</p>
<p dir="auto">В файле tsconfig.json можно указывать настройки двух уровней:</p>
<p dir="auto"><strong>На верхнем уровне</strong>:</p>
<ul>
<li><code>extends</code> — используется для наследования конфигурации из другого файла.</li>
<li><code>files</code> — задаёт конкретный список исходных файлов, которые должны быть скомпилированы.</li>
<li><code>include</code> — позволяет указать набор файлов по шаблону, не перечисляя их вручную.</li>
<li><code>exclude</code> — определяет файлы или директории, которые нужно исключить из сборки.</li>
</ul>
<p dir="auto"><strong>Внутри блока compilerOptions</strong>:</p>
<ul>
<li><code>outDir</code> — каталог, в который будут помещены результаты компиляции.</li>
<li><code>allowJs</code> — разрешает использовать в проекте обычные JavaScript‑файлы.</li>
<li><code>esModuleInterop</code> — обеспечивает корректную работу модулей ES6 в окружении CommonJS.</li>
<li><code>target</code> — указывает стандарт <strong>JavaScript</strong>, в который будет транслироваться код.</li>
<li><code>strict</code> — активирует строгий режим с расширенной системой проверок.</li>
<li><code>declaration</code> — позволяет автоматически создавать декларационные файлы <code>.d.ts</code>.</li>
<li><code>sourceMap</code> — генерирует Source Maps для отладки.</li>
</ul>
<p dir="auto">incremental — включает постепенную компиляцию с сохранением данных о прошлых сборках.</p>
]]></description><link>https://forum.exlends.ru/topic/227/nastrojka-fajla-tsconfig.json</link><generator>RSS for Node</generator><lastBuildDate>Tue, 25 Aug 2026 04:51:32 GMT</lastBuildDate><atom:link href="https://forum.exlends.ru/topic/227.rss" rel="self" type="application/rss+xml"/><pubDate>Thu, 28 Aug 2025 17:58:24 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Настройка файла tsconfig.json on Thu, 28 Aug 2025 18:08:15 GMT]]></title><description><![CDATA[<p dir="auto">@Jspi Ну или так <img src="https://forum.exlends.ru/assets/plugins/nodebb-plugin-emoji/emoji/android/1f600.png?v=a1e94250dac" class="not-responsive emoji emoji-android emoji--grinning" style="height:23px;width:auto;vertical-align:middle" title=":grinning:" alt="😀" /> Я просто старый пожилой уже</p>
]]></description><link>https://forum.exlends.ru/post/410</link><guid isPermaLink="true">https://forum.exlends.ru/post/410</guid><dc:creator><![CDATA[kirilljsx]]></dc:creator><pubDate>Thu, 28 Aug 2025 18:08:15 GMT</pubDate></item><item><title><![CDATA[Reply to Настройка файла tsconfig.json on Thu, 28 Aug 2025 18:01:30 GMT]]></title><description><![CDATA[<pre><code class="language-bash">npx tsc --init
</code></pre>
]]></description><link>https://forum.exlends.ru/post/409</link><guid isPermaLink="true">https://forum.exlends.ru/post/409</guid><dc:creator><![CDATA[Aladdin]]></dc:creator><pubDate>Thu, 28 Aug 2025 18:01:30 GMT</pubDate></item></channel></rss>