Это очень краткое руководство поможет вам настроить TypeScript для новых (или существующих!) проектов Node.js.

Предпосылки:

  • Вы должны быть немного знакомы с Node и JavaScript
  • У вас должен быть установлен редактор кода (желательно VSCode)
  • В этом руководстве предполагается, что вы работаете в Linux, MacOS или другой UNIX-подобной операционной системе.
  • В этом руководстве также предполагается, что вы используете npm в качестве менеджера пакетов (вместо этого вы можете использовать пряжу, pnpm или предпочитаемый вами менеджер пакетов).

Цели:

  • Это покажет вам, как очень быстро начать работу с TypeScript.
  • Это руководство также покажет вам, как использовать популярные пакеты, такие как nodemon, для поддержки горячей перезагрузки ваших приложений.

Почему TypeScript?

  • TypeScript — это надмножество JavaScript, которое предоставляет нам дополнительную статическую типизацию. Он был создан Microsoft и, возможно, является единственной хорошей вещью, которую они выпустили со времен VS Code (шучу 😉).
  • Он служит документацией и снижает накладные расходы на адаптацию и, таким образом, улучшает опыт разработчиков.
  • Позволяет нам быстро выявлять ошибки/проблемы, тем самым повышая общее качество программного обеспечения.
  • Подробнее читайте в Руководстве по TypeScript.

Настройка:

  1. Создайте каталог и перейдите в только что созданную папку
mkdir typescript-example
cd typescript-example

2. Инициализируйте файл package.json. Флаг -y применит все значения по умолчанию.

npm init -y

Пакет. json является основой для каждого проекта Node. Он содержит все метаданные о вашем проекте, которые требуются перед публикацией в NPM, а также определяет функциональные атрибуты проекта, которые npm использует для установки зависимостей, запуска сценариев и определения точки входа в наш пакет. Работает аналогично тому, как POM (объектная модель проекта) работает в Java, а requirements.txt работает в Python.

3. Добавьте TypeScript в качестве зависимости от разработчиков в свой проект.

npm install typescript --save-dev

4. Установите внешние типы Node.js для TypeScript.

npm install @types/node --save-dev

TypeScript имеет типы Implicit, Explicit и Ambient. Ambient относится к объявлениям, используемым для информирования компилятора о том, что фактическая часть кода находится в другом месте. Поскольку мы используем Node.js, было бы хорошо, если бы мы могли обеспечить безопасность типов в API-интерфейсе Node, например файл, путь, процесс.

5. Создайте свой tsconfig.json

npx tsc --init

Здесь мы определяем параметры нашего компилятора TypeScript.

6. Скомпилируйте свой код с помощью команды tsc с помощью Node packageexecutor (npx).

npx tsc

Выполнение вышеприведенного должно создать вывод и отправить его туда, где находится наш outDir в нашем tsconfig.json.

Улучшение взаимодействия с местным разработчиком

  1. Горячая перезагрузка — это значительно улучшит ваш опыт разработки, поскольку позволит вашему приложению выполнять горячую перезагрузку при текущих изменениях. Мы можем настроить это через Nodemon в наших приложениях Node.js.
npm install --save-dev ts-node nodemon

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

Заключение

Вышеупомянутого должно быть достаточно, чтобы быстро настроить проект TypeScript + Node локально. Вы можете улучшить это дальше:

  • Используйте линтер: используйте что-то вроде ESLint. Это инструмент статического анализа кода, который позволяет нам установить стандарт для нашего кода. Мы можем использовать это для обеспечения соблюдения стандартов и шаблонов кодирования для нашей кодовой базы.
  • Внедрите инструменты глубокого удаления: Rimraf для удаления ненужных файлов перед отправкой в ​​производство.
  • Добавьте сборщик статических модулей: используйте webpack (или turbopack). Это, вероятно, будет излишним для небольшого проекта, но по мере масштабирования вашего приложения вам понадобится механизм для управления всеми вашими JS/TS.
  • Автоматизация — как вы можете автоматизировать вышеперечисленное для своего бизнеса?