Компиляция кода TypeScript (Node.js)

Используйте пакет TypeScript npm, чтобы добавить поддержку TypeScript в проекты на основе системы проектов JavaScript (JSPS) или .esproj. Начиная с Visual Studio 2019 рекомендуется использовать пакет npm вместо пакета TYPEScript. Пакет npm TypeScript обеспечивает большую переносимость на разных платформах и средах.

Важный

Для проектов ASP.NET Core используйте пакет NuGet вместо npm, чтобы добавить поддержку TypeScript.

Добавление поддержки TypeScript с помощью npm

Пакет npm TypeScript добавляет поддержку TypeScript. Когда пакет npm для TypeScript 2.1 или более поздней версии устанавливается в проект, соответствующая версия языковой службы TypeScript загружается в редакторе.

1. Проверьте, требуется ли установить любую рабочую нагрузку разработки для Visual Studio или среды выполнения Node.js.

   Для проектов, созданных с помощью системы проектов JavaScript (JSPS) или .esproj, дополнительные рабочие нагрузки не требуются. Вам просто нужно установить npm (https://www.npmjs.com/), который входит в состав Node.js.

   Для более старого типа проекта (Njsproj) необходимо установить рабочую нагрузку разработки Node.js и среду выполнения Node.js.

2. Если проект еще не включает его, установите пакет npm TypeScript .

   В обозревателе решений (справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам под узлом npm в обозревателе решений. Дополнительные сведения см. в статье Управление пакетами npm.

   Для проекта Node.js можно установить пакет npm TypeScript с помощью командной строки или интегрированной среды разработки. Чтобы установить с помощью интегрированной среды разработки, щелкните правой кнопкой мыши узел npm в обозревателе решений, выберите Установить новый пакет npm, выполните поиск TypeScriptи установите пакет.

   Проверьте параметр npm в окне выходных данных, чтобы просмотреть ход установки пакета. Установленный пакет отображается в узле npm в обозревателе решений.

3. Если проект еще не включает его, добавьте файл tsconfig.json в корневой каталог проекта. Чтобы добавить файл, щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите файла конфигурации JSON typeScriptи нажмите кнопку Добавить.

   Если вы не видите все шаблоны элементов, выберите показать все шаблоны, а затем выберите шаблон элемента.

   Visual Studio добавляет файл tsconfig.json в корневой каталог проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.

4. Откройте tsconfig.json и обновите, чтобы задать нужные параметры компилятора.

   Ниже приведен пример простого файла tsconfig.json.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   В этом примере:

   • включить сообщает компилятору, где найти файлы TypeScript (*.ts).
   • параметр outDir указывает выходную папку для простых файлов JavaScript, транспилированных компилятором TypeScript.
   • Параметр sourceMap указывает, создаёт ли компилятор файлы sourceMap.

   Предыдущая конфигурация предоставляет только базовое введение в настройку TypeScript. Дополнительные сведения о других вариантах см. в разделах tsconfig.json.

Создание приложения

1. Добавьте файлы TypeScript (.ts) или TypeScript JSX (Tsx) в проект, а затем добавьте код TypeScript. Ниже приведен простой пример TypeScript:

   let message: string = 'Hello World';
   console.log(message);
   

2. В package.jsonдобавьте поддержку команд сборки и чистки Visual Studio, используя следующие скрипты.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Чтобы создать проект с помощью стороннего инструмента, такого как webpack, добавьте скрипт сборки командной строки в ваш файл package.json.

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. Если вам нужно настроить такие параметры, как начальная страница, путь к среде выполнения Node.js, порту приложения или аргументам среды выполнения, щелкните правой кнопкой мыши узел проекта в обозревателе решений и выберите Свойства.

   Заметка

   При настройке сторонних инструментов, проекты Node.js не используют пути, которые настроены в разделе Tools>Options>Projects and solutions>Web Package Management>External Web Tools. Эти параметры используются для других типов проектов.

4. Выберите Сборка > Сборка решения.

   Приложение автоматически собирается, когда вы его запускаете. Однако во время процесса сборки могут произойти следующие:

   Если вы создали исходные карты, откройте папку, указанную в параметре outDir, и найдите созданные файлы *.js вместе с созданными файлами *js.map.

   Файлы исходной карты необходимы для отладки.

Запуск приложения

Инструкции по запуску приложения после компиляции см. в разделе Создание Node.js и приложения Express.

Автоматизация задач сборки

Task Runner Explorer можно использовать в Visual Studio, чтобы автоматизировать задачи для сторонних инструментов, таких как npm и webpack.

• nPM Task Runner . Добавляет поддержку скриптов npm, определенных в package.json. Поддерживает yarn.
• Webpack Task Runner — добавляет поддержку Webpack.

Связанное содержимое

Свойства, React, Angular, Vue