Samouczek: dodawanie języka TypeScript do istniejącej aplikacji ASP.NET Core w programie Visual Studio

Artykuł
10/31/2023

W tym samouczku dotyczącym programowania w programie Visual Studio przy użyciu ASP.NET Core i TypeScript utworzysz prostą aplikację internetową, dodaj kod TypeScript, a następnie uruchomisz aplikację.

W programie Visual Studio 2022 lub nowszym, jeśli chcesz używać platformy Angular lub Vue z platformą ASP.NET Core, zaleca się użycie szablonów aplikacji jednostronicowej (SPA) ASP.NET Core w celu utworzenia aplikacji ASP.NET Core z językiem TypeScript. Aby uzyskać więcej informacji, zobacz samouczki programu Visual Studio dla platformy Angular lub Vue.

Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

Tworzenie projektu platformy ASP.NET Core
Dodawanie pakietu NuGet do obsługi języka TypeScript
Dodawanie kodu TypeScript
Uruchom aplikację
Dodawanie biblioteki innej firmy przy użyciu narzędzia npm

Wymagania wstępne

Musisz mieć zainstalowany program Visual Studio i ASP.NET pakiet roboczy tworzenia aplikacji internetowych.

Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony pobierania programu Visual Studio, aby zainstalować ją bezpłatnie.
Jeśli musisz zainstalować obciążenie, ale masz już program Visual Studio, przejdź do pozycji Narzędzia Pobierz narzędzia>i funkcje... aby otworzyć Instalator programu Visual Studio. Wybierz obciążenie ASP.NET i tworzenie aplikacji internetowych, a następnie wybierz pozycję Modyfikuj.

Tworzenie nowego projektu MVC ASP.NET Core

Program Visual Studio zarządza plikami dla pojedynczej aplikacji w projekcie. Projekt zawiera kod źródłowy, zasoby i pliki konfiguracji.

Uwaga

Aby rozpocząć od pustego projektu ASP.NET Core i dodać fronton TypeScript, zobacz zamiast tego ASP.NET Core z językiem TypeScript .

W tym samouczku rozpoczniesz od prostego projektu zawierającego kod dla aplikacji ASP.NET Core MVC.

Otwórz program Visual Studio. Jeśli okno uruchamiania nie jest otwarte, wybierz pozycję Okno uruchamiania pliku>.
W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.
W oknie Tworzenie nowego projektu wprowadź ciąg aplikacja internetowa w polu wyszukiwania. Następnie wybierz pozycję C# jako język.

Po zastosowaniu filtru języka wybierz pozycję ASP.NET Core Web Application (Model-View-Controller), a następnie wybierz przycisk Dalej.

Uwaga

Jeśli nie widzisz szablonu projektu ASP.NET Core Web Application , musisz dodać obciążenie ASP.NET i tworzenie aplikacji internetowych. Aby uzyskać szczegółowe instrukcje, zobacz Wymagania wstępne.
W oknie Konfigurowanie nowego projektu wprowadź nazwę projektu w polu Nazwa projektu. Następnie wybierz Dalej.

Wybierz zalecaną strukturę docelową (obsługa długoterminowa lub obsługa długoterminowa.NET 8.0), a następnie wybierz pozycję Utwórz.

W oknie Dodatkowe informacje upewnij się, że w menu rozwijanym Framework wybrano pozycję .NET 8.0, a następnie wybierz pozycję Utwórz.

Program Visual Studio otwiera nowy projekt.

Dodaj kod

W Eksplorator rozwiązań (okienko po prawej stronie) kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Zarządzaj pakietami NuGet dla rozwiązań.
Na karcie Przeglądaj wyszukaj ciąg Microsoft.TypeScript.MSBuild.
Wybierz pozycję Zainstaluj , aby zainstalować pakiet.

Program Visual Studio dodaje pakiet NuGet w węźle Zależności w Eksplorator rozwiązań.
Kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Dodaj > nowy element. Wybierz plik konfiguracji JSON języka TypeScript, a następnie wybierz pozycję Dodaj.

Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

Program Visual Studio dodaje plik tsconfig.json do katalogu głównego projektu. Ten plik służy do konfigurowania opcji kompilatora TypeScript.
Otwórz plik tsconfig.json i zastąp domyślny kod następującym kodem:
```
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
Opcja outDir określa folder wyjściowy dla zwykłych plików JavaScript, które transpiluje kompilator TypeScript.

Ta konfiguracja zawiera podstawowe wprowadzenie do używania języka TypeScript. W innych scenariuszach, takich jak w przypadku korzystania z narzędzia gulp lub webpack, możesz chcieć użyć innej lokalizacji pośredniej dla transpilowanych plików JavaScript zamiast wwwroot/js. Lokalizacja zależy od narzędzi i preferencji konfiguracji.
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i wybierz polecenie Dodaj > nowy folder. Użyj skryptów nazw dla nowego folderu.
Kliknij prawym przyciskiem myszy folder scripts i wybierz polecenie Dodaj > nowy element. Wybierz plik TypeScript, wpisz nazwę app.ts dla nazwy pliku, a następnie wybierz pozycję Dodaj.

Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.

Program Visual Studio dodaje plik app.ts do folderu scripts .

Otwórz plik app.ts i dodaj następujący kod 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");

Program Visual Studio zapewnia obsługę funkcji IntelliSense dla kodu TypeScript.

Aby wypróbować tę funkcję, usuń .lastName ją z greeter funkcji, wprowadź ponownie okres (.) i zwróć uwagę na aktualizacje funkcji IntelliSense.

View IntelliSense

Wybierz lastName , aby dodać nazwisko z powrotem do kodu.

Otwórz folder Views/Home, a następnie otwórz plik Index.cshtml.

Dodaj następujący kod HTML na końcu pliku.

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

Otwórz folder Views/Shared, a następnie otwórz plik _Layout.cshtml.
Dodaj następujące odwołanie do skryptu przed wywołaniem metody @RenderSectionAsync("Scripts", required: false):
```
<script src="~/js/app.js"></script>
```
Wybierz pozycję Plik>Zapisz wszystko (Ctrl + Shift + S), aby zapisać zmiany.

Kompilowanie aplikacji

Wybierz pozycję Kompiluj rozwiązanie kompilacji>.

Mimo że aplikacja jest kompiluje się automatycznie po uruchomieniu, chcemy przyjrzeć się temu, co dzieje się podczas procesu kompilacji.
Otwórz folder wwwroot/js, aby wyświetlić dwa nowe pliki: app.js i plik mapy źródłowej app.js.map. Kompilator TypeScript generuje te pliki.

Pliki mapy źródłowej są wymagane do debugowania.

Uruchamianie aplikacji

Naciśnij klawisz F5 (Debuguj>rozpocznij debugowanie debugowania), aby uruchomić aplikację.

Aplikacja zostanie otwarta w przeglądarce.

W oknie przeglądarki zostanie wyświetlony nagłówek Powitanie i przycisk Kliknij mnie .
Wybierz przycisk, aby wyświetlić komunikat określony w pliku TypeScript.

Debugowanie aplikacji

Ustaw punkt przerwania w funkcji w app.ts programiegreeter, klikając lewy margines w edytorze kodu.
Naciśnij klawisz F5, aby uruchomić aplikację.

Może być konieczne udzielenie odpowiedzi na komunikat w celu włączenia debugowania skryptu.

Uwaga

Przeglądarka Chrome lub Edge jest wymagana do debugowania skryptu po stronie klienta.
Po załadowaniu strony naciśnij pozycję Kliknij mnie.

Aplikacja wstrzymuje się w punkcie przerwania. Teraz możesz sprawdzić zmienne i używać funkcji debugera.

Dodawanie obsługi języka TypeScript dla biblioteki innej firmy

Postępuj zgodnie z instrukcjami w temacie zarządzanie pakietami npm, aby dodać package.json plik do projektu. To zadanie dodaje obsługę narzędzia npm do projektu.

Uwaga

W przypadku projektów ASP.NET Core można również użyć Menedżera biblioteki lub przędzy zamiast narzędzia npm do zainstalowania plików JavaScript i CSS po stronie klienta.
W tym przykładzie dodaj do projektu plik definicji języka TypeScript dla biblioteki jQuery. Dołącz następujący kod do pliku package.json .
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
Ten kod dodaje obsługę języka TypeScript dla biblioteki jQuery. Sama biblioteka jQuery jest już zawarta w szablonie projektu MVC (w obszarze wwwroot/lib w Eksplorator rozwiązań). Jeśli używasz innego szablonu, może być konieczne również dołączenie pakietu npm jquery.
Jeśli pakiet w Eksplorator rozwiązań nie jest zainstalowany, kliknij prawym przyciskiem myszy węzeł npm i wybierz polecenie Przywróć pakiety.

Uwaga

W niektórych scenariuszach Eksplorator rozwiązań może wskazywać, że pakiet npm nie jest zsynchronizowany z plikiem package.json ze względu na znany problem opisany tutaj. Na przykład pakiet może być wyświetlany jako nieinstalowany po zainstalowaniu. W większości przypadków można zaktualizować Eksplorator rozwiązań przez usunięcie pliku package.json, ponowne uruchomienie programu Visual Studio i ponowne dodanie pliku package.json zgodnie z opisem we wcześniejszej sekcji tego artykułu.
W Eksplorator rozwiązań kliknij prawym przyciskiem myszy folder scripts i wybierz polecenie Dodaj>nowy element.

Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.
Wybierz pozycję Plik TypeScript, wpisz library.ts i wybierz pozycję Dodaj.
W pliku library.ts dodaj następujący kod.
```
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();
```
Dla uproszczenia ten kod wyświetla komunikat przy użyciu zapytania jQuery i alertu.

W przypadku dodania definicji typów języka TypeScript dla biblioteki jQuery można uzyskać obsługę funkcji IntelliSense w obiektach jQuery po wprowadzeniu kropki (.) po obiekcie jQuery, jak pokazano tutaj.
W pliku _Layout.cshtml zaktualizuj odwołania do skryptu, aby uwzględnić library.jselement .
```
<script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>
```
W pliku Index.cshtml dodaj następujący kod HTML na końcu pliku.
```
<div>
  <p id="ts-example-2">jQuery version is:</p>
</div>
```
Naciśnij klawisz F5 (Debuguj>rozpocznij debugowanie debugowania), aby uruchomić aplikację.

Aplikacja zostanie otwarta w przeglądarce.

Wybierz przycisk OK w alercie, aby wyświetlić stronę zaktualizowaną do wersji jQuery: 3.3.1!!.

Następne kroki

Możesz dowiedzieć się więcej na temat używania języka TypeScript z platformą ASP.NET Core. Jeśli interesuje Cię programowanie Angular w programie Visual Studio, możesz użyć rozszerzenia usługi języka Angular dla programu Visual Studio.

ASP.NET Core i TypeScript

Rozszerzenie usługi języka Angular