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

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

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

Необходимые компоненты

У вас должны быть установлены решение Visual Studio и рабочая нагрузка ASP.NET для разработки веб-приложений.

• Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

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

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

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

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

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

2. На начальном экране выберите Создать проект.

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

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

   Примечание.

   Если шаблон проекта Веб-приложение ASP.NET Core отсутствует, его можно получить, добавив рабочую нагрузку 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": "es5",
       "outDir": "wwwroot/js"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

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

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

6. В Обозреватель решений щелкните правой кнопкой мыши узел проекта и выберите пункт "Добавить > новую папку". Для новой папки используйте имя scripts.

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

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

   Visual Studio добавляет файл app.ts в папку scripts.

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.

   Примечание.

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

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, введите 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.