Поделиться через


Компиляция кода 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 загружается в редакторе.

  1. Проверьте, требуется ли установить любую рабочую нагрузку разработки для 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, и следуйте инструкциям здесь. Или используйте проект "Открытая папка".

  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"
    }
    

    Пример использования webpack с React и файла конфигурации webpack см. в статье Создание веб-приложения с помощью Node.js и React.

    Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.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.

Нажмите клавиши Ctrl+F5 (или Отладка > Запустить без отладки) для запуска приложения.

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

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

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

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