Руководство. Добавление TypeScript в существующее приложение ASP.NET Core в Visual Studio

В этом руководстве по разработке Visual Studio с помощью ASP.NET Core и TypeScript вы создадите простое веб-приложение, добавьте код TypeScript и запустите приложение.

В этом руководстве описано, как:

Необходимые условия

Необходимо установить Visual Studio и рабочую нагрузку веб-разработки ASP.NET.

• Если вы еще не установили Visual Studio, перейдите на страницу загрузки Visual Studio, чтобы установить его бесплатно.

• Если необходимо установить рабочую нагрузку, но у вас уже есть Visual Studio, перейдите к Tools>Get Tools and Features..., чтобы открыть установщик Visual Studio. Выберите рабочую нагрузку ASP.NET и веб-разработки, а затем выберите Изменить.

Создайте новый проект ASP.NET Core MVC

Visual Studio управляет файлами для одного приложения в проекте. Проект включает исходный код, ресурсы и файлы конфигурации.

В этом руководстве вы начинаете с простого проекта, содержащего код для приложения ASP.NET Core MVC.

1. Откройте Visual Studio. Если окно запуска не открыто, выберите Файл>Окно запуска.

2. В окне запуска выберите Создать проект.

3. В окне Создание проекта введите web-приложение в поле поиска. Затем выберите C# в качестве языка.

   После применения языкового фильтра выберите ASP.NET Core Web App (model-View-Controller), а затем выберите Далее.

   Заметка

   Если шаблон проекта ASP.NET Core Web Application не отображается, необходимо добавить компонент ASP.NET и веб-разработка. Подробные инструкции см. в разделе "Предварительные условия".

4. В окне Настройка нового проекта введите имя проекта в поле Имя проекта. Затем выберите Далее.

Visual Studio открывает новый проект.

Добавление кода

1. В обозревателе решений (справа) щелкните правой кнопкой мыши узел проекта и выберите Управление пакетами NuGet для решений.

2. На вкладке Обзор найдите Microsoft.TypeScript.MSBuild.

3. Выберите Установить, чтобы установить пакет.

   

   Visual Studio добавляет пакет NuGet в узел зависимостей в обозревателе решений.

4. Щелкните правой кнопкой мыши узел проекта и выберите Добавить > Новый элемент. Выберите файл конфигурации JSON TypeScript, а затем выберите Добавить.

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

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

5. Откройте tsconfig.json и замените код по умолчанию следующим кодом:

   {
     "compileOnSave": true,
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "ES6",
       "outDir": "wwwroot/js"
     },
     "include": [
       "scripts/**/*"
     ],
     "exclude": [
       "node_modules",
       "wwwroot"
     ]
   }
   

   Параметр outDir указывает выходную папку для простых файлов JavaScript, транспилированных компилятором TypeScript.

   Эта конфигурация содержит основные общие сведения об использовании TypeScript. В других сценариях, например при использовании gulp или webpack, может потребоваться другое промежуточное расположение для транспилированных файлов JavaScript вместо wwwroot/js. Расположение зависит от ваших средств и настроек конфигурации.

6. В обозревателе решений щелкните правой кнопкой мыши узел проекта и выберите Add > Создать папку. Используйте имя скрипты для новой папки.

7. Щелкните правой кнопкой мыши папку скриптов и выберите Добавить > новый элемент. Выберите файл TypeScript , введите имя app.ts для имени файла, а затем выберите Добавить.

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

   Visual Studio добавляет app.ts в папку скриптов.

8. Откройте app.ts и добавьте следующий код TypeScript.

   function TSButton() {
      let name: string = "Fred";
      document.getElementById("ts-example").innerHTML = greeter(user);
   }
   
   class Student {
      fullName: string;
      constructor(public firstName: string, public middleInitial: string, public lastName: string) {
         this.fullName = firstName + " " + middleInitial + " " + lastName;
      }
   }
   
   interface Person {
      firstName: string;
      lastName: string;
   }
   
   function greeter(person: Person) {
      return "Hello, " + person.firstName + " " + person.lastName;
   }
   
   let user = new Student("Fred", "M.", "Smith");
   

   Visual Studio предоставляет поддержку IntelliSense для кода TypeScript.

   Чтобы попробовать эту функцию, удалите .lastName из функции greeter, повторно войдите в период (.) и обратите внимание на обновления IntelliSense.

   

   Выберите lastName, чтобы добавить фамилию обратно в код.

9. Откройте папку Views/Home, а затем откройте Index.cshtml.

10. Добавьте следующий HTML-код в конец файла.

    <div id="ts-example">
        <br />
        <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
            Click Me
        </button>
    </div>
    

11. Откройте папку Views/Shared, а затем откройте _Layout.cshtml.

12. Добавьте следующую ссылку на скрипт перед вызовом @RenderSectionAsync("Scripts", required: false):

    <script src="~/js/app.js"></script>
    

13. Выберите Файл>Сохранить все (CTRL + SHIFT + S), чтобы сохранить изменения.

Создание приложения

1. Выберите сборка > сборка решения.

   Хотя приложение выполняется автоматически при его запуске, мы хотим взглянуть на то, что происходит во время процесса сборки.

2. Откройте папку wwwroot/js, чтобы увидеть два новых файла: app.js и файл исходной карты, app.js.map. Компилятор TypeScript создает эти файлы.

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

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

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

   Приложение открывается в браузере.

   В окне браузера вы увидите заголовок Добро пожаловать и кнопку Нажми меня.

   

2. Нажмите кнопку, чтобы отобразить сообщение, указанное в файле TypeScript.

Отладка приложения

1. Установите точку останова в функции greeter в app.ts, щелкнув левое поле в редакторе кода.

   

2. Нажмите клавишу F5, чтобы запустить приложение.

   Возможно, вам потребуется ответить на сообщение, чтобы включить отладку скриптов.

   Заметка

   Chrome или Edge требуются для отладки скриптов на стороне клиента.

3. Когда страница загружается, нажмите кликните сюда.

   Приложение приостанавливается в точке останова. Теперь вы можете проверить переменные и использовать функции отладчика.

Добавление поддержки TypeScript для сторонней библиотеки

1. Следуйте инструкциям в управлению пакетами npm, чтобы добавить файл package.json в ваш проект. Эта задача добавляет в проект поддержку npm.

   Заметка

   Для проектов ASP.NET Core можно также использовать диспетчер библиотек или yarn вместо npm для установки клиентских файлов JavaScript и CSS.

2. В этом примере добавьте в проект файл определения TypeScript для jQuery. Добавьте следующий код в файл package.json.

   "devDependencies": {
     "@types/jquery": "3.5.1"
   }
   

   Этот код добавляет поддержку TypeScript для jQuery. Сама библиотека jQuery уже включена в шаблон проекта MVC (просмотрите страницу wwwroot/lib в обозревателе решений). Если вы используете другой шаблон, может потребоваться также включить пакет jquery npm.

3. Если пакет в обозревателе решений не установлен, щелкните правой кнопкой мыши узел npm и выберите Восстановить пакеты.

   Заметка

   В некоторых сценариях обозреватель решений может указать, что пакет npm не синхронизирован с package.json из-за известной проблемы, описанной здесь. Например, пакет может отображаться как не установлен при его установке. В большинстве случаев можно обновить обозреватель решений, удалив package.json, перезагрузив Visual Studio и повторно добавив файл package.json, как описано ранее в этой статье.

4. В обозревателе решений щелкните правой кнопкой мыши папку скриптов и выберите Добавить>новый элемент.

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

5. Выберите TypeScript File, введите library.tsи выберите Добавить.

6. В library.tsдобавьте следующий код.

   var jqtest = {
     showMsg: function (): void {
        let v: any = jQuery.fn.jquery.toString();
        let content: any = $("#ts-example-2")[0].innerHTML;
        alert(content.toString() + " " + v + "!!");
        $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
     }
   };
   
   jqtest.showMsg();
   

   Для простоты этот код отображает сообщение с помощью jQuery и оповещения.

   При добавлении определений типов TypeScript для jQuery вы получаете поддержку IntelliSense в объектах jQuery при вводе периода (.) после объекта jQuery, как показано здесь.

   

7. В _Layout.cshtmlобновите ссылки на скрипт, чтобы включить library.js.

   <script src="~/js/app.js"></script>
   <script src="~/js/library.js"></script>
   

8. В Index.cshtmlдобавьте следующий HTML-код в конец файла.

   <div>
     <p id="ts-example-2">jQuery version is:</p>
   </div>
   

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

   Приложение откроется в браузере.

   Выберите ОК в оповещении, чтобы увидеть страницу, обновленную до версии jQuery : 3.3.1!!.

   

Дальнейшие действия

Вы можете узнать больше об использовании TypeScript с ASP.NET Core. Если вы заинтересованы в программировании Angular в Visual Studio, вы можете использовать расширение службы языка Angular для Visual Studio.