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

Транспилируйте код TypeScript с помощью npm

Используйте пакет TypeScript npm, чтобы добавить поддержку 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. Проверьте, нужно ли установить любую рабочую нагрузку разработки для Visual Studio или среды выполнения Node.js.

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

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

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

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

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

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

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

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

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

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

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

    • включить сообщает компилятору, где найти файлы TypeScript (*.ts).
    • Параметр outDir указывает выходную папку для простых файлов JavaScript, которые транспилируются tsc, это компилятор 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. Если необходимо настроить параметры сборки и развертывания, такие как URL-адрес приложения или команды среды выполнения, щелкните правой кнопкой мыши узел проекта в Обозреватель решений и выберите Properties.

    Заметка

    При настройке сторонних средств в проектах, использующих систему проектов JavaScript (JSPS) или .esproj, не используйте пути, которые настроены в разделе ИнструментыПараметрыПроекты и решенияУправление веб-пакетамиВнешние веб-инструменты. Эти параметры используются для других типов проектов.

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

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

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

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

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

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

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

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

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

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

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

  • Last updated on