Поиск

ПоискПоиск

Как настроить окружение TypeScript - проекта?

Feb 06, 2025, 3 min read

Пошаговое руководство, как настроить TS-проект с момента объявления проекта до этапа компиляции:

  1. Глобально установи компилятор TS командой
npm i -g typescript
  1. Убедись, что установка прошла успешно (в консоли отобразится версия TS)
tsc -v
  1. Создай TypeScript-файл (index.ts) и напиши код. Компиляция производится следующей командой:
tsc index

TSC скомпилировал код в JS-файл index.js Если есть необходимость изменить название файла, то введи следующую команду в консоль: tsc index.ts --outfile file-name.js Если есть необходимость, чтобы TSC компилировал код автоматически, при изменениях, то введи следующую команду в консоль: tsc index.ts -w

ВАЖНО TS сообщает об обнаружении ошибки, но ВСЕ РАВНО СКОМПИЛИРУЕТ КОД, независимо от того, есть в нём ошибки, или нет.

Чтобы TypeScript прерывал компиляцию в случае обнаружения ошибок, нужно использовать флаг --noEmitOnError. Этот флаг заставляет компилятор TypeScript прекращать генерацию JavaScript файлов, если в процессе компиляции были найдены ошибки.

Например, если вы используете TypeScript из командной строки, то для того, чтобы включить этот флаг, нужно добавить его в команду компиляции:

tsc --noEmitOnError myFile.ts

В этом случае, компилятор TypeScript не будет генерировать JavaScript файлы, если в процессе компиляции myFile.ts были найдены ошибки.

Если вы используете среду разработки, то вам нужно будет найти соответствующую настройку, которая позволяет включить флаг --noEmitOnError. Например, в Visual Studio Code вы можете добавить этот флаг в файл tsconfig.json:

{
  "compilerOptions": {
    "noEmitOnError": true
  }
}

Эта настройка заставит компилятор TypeScript прерывать компиляцию, если в процессе компиляции были найдены ошибки.

  1. Данные отобразились! Для того, чтобы не повторять данную операцию для оторбражения данных воспользуем следующим глобальным расширением для ts:
npm install -g ts-node

Для отображения данных и компиляции воспользуемся следующим кодом:

ts-node index.ts

Таким образом, мы в 1 действие преобразовали файл.

  1. Для настройки файла конфигурации tsconfig.json воспользуемся следующей командой:
tsc —init`
  1. Установим дополнительные библиотеки для управления нашим TS-проектом.

**rimraf

npm i @types/rimraf --save-dev

В этом примере мы импортируем функцию rimraf из модуля rimraf. Функция rimraf принимает первым аргументом путь к файлу или директории, которую нужно удалить, и вторым аргументом функцию обратного вызова, которая будет вызвана после завершения операции удаления.

import rimraf from 'rimraf';
 
rimraf('/path/to/my/file', (err) => {
  if (err) throw err;
  console.log('File has been deleted!');
});

rimraf также может быть полезен при автоматическом удалении сгенерированных файлов в процессе разработки или при сборке проекта. Например, если вы генерируете временные файлы в процессе работы приложения, которые должны быть удалены после завершения работы, вы можете использовать rimraf, чтобы гарантировать, что эти файлы будут удалены.

**copyfiles

npm i @types/copyfiles --save-dev

После установки пакета типов copyfiles вы можете использовать его в своем TypeScript коде:

import { copyFiles } from 'copyfiles';
 
copyFiles(['/path/to/source/**/*', '/path/to/destination'], true, () => {
  console.log('Files have been copied!');
});

copyfiles - это полезный инструмент для копирования файлов и директорий в Node.js приложении. Он позволяет скопировать файлы и директории с сохранением структуры файловой системы и может быть использован в различных сценариях, связанных с копированием файлов и директорий в Node.js приложении.

**npm-watch

npm i npm-watch --save-dev

После установки npm-watch вы можете добавить скрипты в файл package.json, которые будут запускаться при изменении файлов. Например, чтобы автоматически компилировать TypeScript файлы при их изменении, вы можете добавить следующий скрипт в package.json:

"scripts": {
  "watch": "npm-watch tsc -- --watch"
}

Этот скрипт запускает компилятор TypeScript (tsc) с флагом --watch, который заставляет компилятор следить за изменениями файлов и автоматически перекомпилировать проект при их изменении.

Чтобы запустить этот скрипт, введите следующую команду в терминале:

npm run watch

После этого компилятор TypeScript будет запущен в режиме наблюдения и будет автоматически перекомпилировать проект при изменении файлов.

Назад

Упоминания со ссылкой