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

Artykuł
01/26/2025

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 dotyczące Angular lub Vue.

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

Z tego samouczka dowiesz się, jak wykonywać następujące działania:

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

Warunki wstępne

Musisz mieć zainstalowany program Visual Studio i obciążenie tworzenia aplikacji internetowych ASP.NET.

Jeśli program Visual Studio nie został jeszcze zainstalowany, przejdź do strony Visual Studio do pobrania, aby ją zainstalować bezpłatnie.
Jeśli musisz zainstalować obciążenie, ale masz już program Visual Studio, przejdź do Tools>Pobierz narzędzia i funkcje..., aby otworzyć Instalator programu Visual Studio. Wybierz pakiet roboczy ASP.NET i tworzenia 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.

Notatka

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 startowe nie jest otwarte, wybierz pozycję Plik>Okno startowe.
W oknie uruchamiania wybierz pozycję Utwórz nowy projekt.
W oknie Utwórz nowy projekt wprowadź aplikację internetową w polu wyszukiwania. Następnie wybierz C# jako język.

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

Notatka

Jeśli nie widzisz szablonu projektu ASP.NET Core Web Application, musisz dodać pakiet roboczy ASP.NET i tworzenie aplikacji sieciowych. Aby uzyskać szczegółowe instrukcje, zobacz Prerequisites.
W oknie Konfigurowanie nowego projektu wprowadź nazwę dla swojego projektu w polu Nazwa projektu. Następnie wybierz pozycję Dalej.

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

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

Program Visual Studio otwiera nowy projekt.

Dodaj kod

W Eksploratorze 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 Microsoft.TypeScript.MSBuild.
Wybierz pozycję Zainstaluj, aby zainstalować pakiet.

Program Visual Studio dodaje pakiet NuGet w węźle zależności w Eksploratorze rozwiązań.
Kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję 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 dla kompilatora TypeScript.
Otwórz tsconfig.json i zastąp domyślny kod następującym kodem:
```
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}
```
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 używania 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 Eksploratorze rozwiązań kliknij prawym przyciskiem myszy węzeł projektu i wybierz pozycję Dodaj > Nowy folder. Użyj nazwy skrypty dla nowego folderu.
Kliknij prawym przyciskiem myszy folder skrypty i wybierz pozycję 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 app.ts do folderu skryptów.

Otwórz 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 z funkcji greeter, 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 @RenderSectionAsync("Scripts", required: false):
```
<script src="~/js/app.js"></script>
```
Wybierz pozycję Plik>Zapisz wszystkie (Ctrl + Shift + S), aby zapisać zmiany.

Kompilowanie aplikacji

Wybierz opcję Build > Build Solution.

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 F5 (Debugowanie>Rozpocznij debugowanie), aby uruchomić aplikację.

Aplikacja zostanie otwarta w przeglądarce.

W oknie przeglądarki widoczny jest nagłówek Powitalny oraz przycisk Kliknij mnie.
Wybierz przycisk, aby wyświetlić komunikat określony w pliku TypeScript.

Debugowanie aplikacji

Ustaw punkt przerwania w funkcji greeter w app.ts, klikając w lewym marginesie w edytorze kodu.

punkt przerwania
Naciśnij F5, aby uruchomić aplikację.

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

Notatka

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

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 zarządzania pakietami npm, aby dodać plik package.json do projektu. To zadanie dodaje obsługę narzędzia npm do projektu.

Notatka

W przypadku projektów ASP.NET Core można również użyć programu Library Manager lub yarn zamiast narzędzia npm, aby zainstalować pliki 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 Eksploratorze rozwiązań). Jeśli używasz innego szablonu, może być konieczne również dołączenie pakietu npm jquery.
Jeśli pakiet w Eksploratorze rozwiązań nie jest zainstalowany, kliknij prawym przyciskiem myszy węzeł npm i wybierz pozycję Przywróć pakiety.

Uwaga

W niektórych scenariuszach Eksplorator rozwiązań może wskazywać, że pakiet npm nie jest zsynchronizowany z 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ć Eksploratora rozwiązań, usuwając package.json, ponownie uruchamiając program Visual Studio i dodając ponownie plik package.json zgodnie z opisem we wcześniejszej sekcji tego artykułu.
W Eksploratorze rozwiązań kliknij prawym przyciskiem myszy folder skryptów i wybierz pozycję Dodaj>Nowy Element.

Jeśli nie widzisz wszystkich szablonów elementów, wybierz pozycję Pokaż wszystkie szablony, a następnie wybierz szablon elementu.
Wybierz TypeScript File, wpisz library.tsi wybierz Dodaj.
W library.tsdodaj 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 _Layout.cshtml zaktualizuj odwołania do skryptów, aby uwzględnić library.js.
```
<script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>
```
W pliku Index.cshtmldodaj następujący kod HTML na końcu pliku.
```
<div>
  <p id="ts-example-2">jQuery version is:</p>
</div>
```
Naciśnij F5 (Debugowanie>Rozpocznij debugowanie), aby uruchomić aplikację.

Aplikacja zostanie otwarta w przeglądarce.

Wybierz OK w alercie, aby zobaczyć 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

Udostępnij za pośrednictwem