Компиляция кода TypeScript (Node.js)
Используйте пакет TypeScript npm, чтобы добавить поддержку TypeScript в проекты на основе системы проектов JavaScript (JSPS) или .esproj. Начиная с Visual Studio 2019 рекомендуется использовать пакет npm вместо пакета TYPEScript. Пакет npm TypeScript обеспечивает большую переносимость на разных платформах и средах.
Используйте пакет npm TypeScript для добавления поддержки TypeScript в проекты Node.js (Njsproj). Начиная с Visual Studio 2019 рекомендуется использовать пакет npm вместо пакета TYPEScript. Пакет npm TypeScript обеспечивает большую переносимость на разных платформах и средах.
Важный
Для проектов ASP.NET Core используйте пакет NuGet вместо npm, чтобы добавить поддержку TypeScript.
Добавление поддержки TypeScript с помощью npm
Пакет npm TypeScript добавляет поддержку TypeScript. Когда пакет npm для TypeScript 2.1 или более поздней версии устанавливается в проект, соответствующая версия языковой службы TypeScript загружается в редакторе.
Проверьте, требуется ли установить любую рабочую нагрузку разработки для Visual Studio или среды выполнения Node.js.
Для проектов, созданных с помощью системы проектов JavaScript (JSPS) или .esproj, дополнительные рабочие нагрузки не требуются. Вам просто нужно установить npm (https://www.npmjs.com/), который входит в состав Node.js.
Для более старого типа проекта (Njsproj) необходимо установить рабочую нагрузку разработки Node.js и среду выполнения Node.js.
Следуйте инструкциям для установки пакета разработки Node.js и npm (https://www.npmjs.com/), которые входят в состав Node.js.
Для простой интеграции Visual Studio создайте проект с помощью одного из шаблонов TypeScript Node.js, таких как шаблон пустого веб-приложения Node.js. Или используйте шаблон JavaScript Node.js, включенный в Visual Studio, и следуйте инструкциям здесь. Или используйте проект "Открытая папка".
Если проект еще не включает его, установите пакет npm TypeScript .
В обозревателе решений (справа) откройте package.json в корневом каталоге проекта. Перечисленные пакеты соответствуют пакетам под узлом npm в обозревателе решений. Дополнительные сведения см. в статье Управление пакетами npm.
Для проекта Node.js можно установить пакет npm TypeScript с помощью командной строки или интегрированной среды разработки. Чтобы установить с помощью интегрированной среды разработки, щелкните правой кнопкой мыши узел npm в обозревателе решений, выберите Установить новый пакет npm, выполните поиск TypeScriptи установите пакет.
Проверьте параметр npm в окне выходных данных, чтобы просмотреть ход установки пакета. Установленный пакет отображается в узле npm в обозревателе решений.
Если проект еще не включает его, добавьте файл tsconfig.json в корневой каталог проекта. Чтобы добавить файл, щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите файла конфигурации JSON typeScriptи нажмите кнопку Добавить.
Если вы не видите все шаблоны элементов, выберите показать все шаблоны, а затем выберите шаблон элемента.
Visual Studio добавляет файл tsconfig.json в корневой каталог проекта. Этот файл можно использовать для настройки параметров компилятора TypeScript.
Откройте 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.
Создание приложения
Добавьте файлы TypeScript (.ts) или TypeScript JSX (Tsx) в проект, а затем добавьте код TypeScript. Ниже приведен простой пример TypeScript:
let message: string = 'Hello World'; console.log(message);
В 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" }
Пример использования webpack с React и файла конфигурации webpack см. в статье Создание веб-приложения с помощью Node.js и React.
Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.
Если вам нужно настроить такие параметры, как начальная страница, путь к среде выполнения Node.js, порту приложения или аргументам среды выполнения, щелкните правой кнопкой мыши узел проекта в обозревателе решений и выберите Свойства.
Заметка
При настройке сторонних инструментов, проекты Node.js не используют пути, которые настроены в разделе Tools>Options>Projects and solutions>Web Package Management>External Web Tools. Эти параметры используются для других типов проектов.
Выберите Сборка > Сборка решения.
Приложение автоматически собирается, когда вы его запускаете. Однако во время процесса сборки могут произойти следующие:
Если вы создали исходные карты, откройте папку, указанную в параметре outDir, и найдите созданные файлы *.js вместе с созданными файлами *js.map.
Файлы исходной карты необходимы для отладки.
Запуск приложения
Инструкции по запуску приложения после компиляции см. в разделе Создание Node.js и приложения Express.
Нажмите клавиши Ctrl+F5 (или Отладка > Запустить без отладки) для запуска приложения.
Автоматизация задач сборки
Task Runner Explorer можно использовать в Visual Studio, чтобы автоматизировать задачи для сторонних инструментов, таких как npm и webpack.
- nPM Task Runner . Добавляет поддержку скриптов npm, определенных в package.json. Поддерживает yarn.
- Webpack Task Runner — добавляет поддержку Webpack.