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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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