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

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

  • Статья

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

Важно!

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

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

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

  1. Следуя инструкциям, установите рабочую нагрузку разработки Node.js и среду выполнения Node.js.

    Для простой интеграции с Visual Studio создайте проект с помощью одного из шаблонов Node.js для TypeScript, например шаблона пустого веб-приложения Node.js. Либо используйте шаблон Node.js для JavaScript, предоставляемый в Visual Studio, и следуйте инструкциям в этом разделе. Или используйте проект Открытая папка

  2. Установите пакет npm для TypeScript, если он еще не включен в ваш проект.

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

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

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

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

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

    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/**/*"
  ]
}

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

    • include указывает компилятору, где искать файлы 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 в Visual Studio.

    Пример использования Vue.js с TypeScript см. в статье Создание приложения Vue.js.

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

    Примечание.

    При настройке сторонних средств в проектах Node.js не используются пути, заданные в разделе Средства>Параметры>Проекты и решения>Управление веб-пакетами>Внешние веб-инструменты. Эти параметры используются для проектов других типов.

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

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

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

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

Выполнение приложения

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

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

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

Связанный контент

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