Kurz: Přidání TypeScriptu do existující aplikace ASP.NET Core v sadě Visual Studio

Článek
10/31/2023

V tomto kurzu pro vývoj sady Visual Studio pomocí ASP.NET Core a TypeScriptu vytvoříte jednoduchou webovou aplikaci, přidáte nějaký kód TypeScriptu a pak spustíte aplikaci.

Pokud chcete v sadě Visual Studio 2022 a novější používat Angular nebo Vue s ASP.NET Core, doporučujeme použít šablony jednostránkové aplikace ASP.NET Core (SPA) k vytvoření aplikace ASP.NET Core s TypeScriptem. Další informace najdete v kurzech sady Visual Studio pro Angular nebo Vue.

Pokud jste visual Studio ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma.

V tomto kurzu se naučíte:

Vytvoření projektu ASP.NET Core
Přidání balíčku NuGet pro podporu TypeScriptu
Přidání kódu TypeScriptu
Spustit aplikaci
Přidání knihovny třetí strany pomocí npm

Požadavky

Musíte mít nainstalovanou sadu Visual Studio a úlohu vývoje webu ASP.NET.

Pokud jste visual Studio ještě nenainstalovali, přejděte na stránku pro stažení sady Visual Studio a nainstalujte ji zdarma.
Pokud potřebujete nainstalovat úlohu, ale sadu Visual Studio už máte, přejděte do části Nástroje>Získat nástroje a funkce... a otevřete Instalační program pro Visual Studio. Zvolte ASP.NET a úlohu vývoje webu a pak vyberte Upravit.

Vytvoření nového projektu ASP.NET Core MVC

Visual Studio spravuje soubory pro jednu aplikaci v projektu. Projekt obsahuje zdrojový kód, prostředky a konfigurační soubory.

Poznámka:

Pokud chcete začít s prázdným projektem ASP.NET Core a přidat front-end TypeScriptu, přečtěte si místo toho ASP.NET Core s TypeScriptem .

V tomto kurzu začnete jednoduchým projektem obsahujícím kód pro aplikaci ASP.NET Core MVC.

Otevřete sadu Visual Studio. Pokud úvodní okno není otevřené, zvolte Okno Start souboru>.
V úvodním okně zvolte Vytvořit nový projekt.
V okně Vytvořit nový projekt zadejte do vyhledávacího pole webovou aplikaci . Pak jako jazyk zvolte jazyk C# .

Po použití jazykového filtru zvolte ASP.NET Základní webová aplikace (Model-View-Controller) a pak vyberte Další.

Poznámka:

Pokud šablonu projektu ASP.NET Core Web Application nevidíte, musíte přidat ASP.NET a úlohu vývoje webu. Podrobné pokyny najdete v části Požadavky.
V okně Konfigurovat nový projekt zadejte název projektu do pole Název projektu. Pak vyberte Další.

Vyberte doporučenou cílovou architekturu (.NET 8.0 nebo dlouhodobou podporu) a pak vyberte Vytvořit.

V okně Další informace se ujistěte, že je v rozevírací nabídce rozhraní .NET 8.0 vybrána a pak vyberte Vytvořit.

Visual Studio otevře nový projekt.

Přidání kódu

V Průzkumník řešení (pravé podokno) klikněte pravým tlačítkem myši na uzel projektu a vyberte Spravovat balíčky NuGet pro řešení.
Na kartě Procházet vyhledejte Microsoft.TypeScript.MSBuild.
Vyberte Nainstalovat a nainstalujte balíček.

Visual Studio přidá balíček NuGet do uzlu Závislosti v Průzkumník řešení.
Klikněte pravým tlačítkem myši na uzel projektu a vyberte Přidat > novou položku. Zvolte konfigurační soubor JSON TypeScriptu a pak vyberte Přidat.

Pokud nevidíte všechny šablony položek, vyberte Zobrazit všechny šablony a pak zvolte šablonu položky.

Visual Studio přidá soubor tsconfig.json do kořenového adresáře projektu. Tento soubor můžete použít ke konfiguraci možností kompilátoru TypeScriptu.
Otevřete soubor tsconfig.json a nahraďte výchozí kód následujícím kódem:
```
{
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
Možnost outDir určuje výstupní složku pro prosté javascriptové soubory, které kompilátor TypeScript transpiluje.

Tato konfigurace poskytuje základní úvod k používání TypeScriptu. V jiných scénářích, například při použití příkazu gulp nebo Webpack, můžete místo wwwroot/js chtít použít jiné přechodné umístění pro transpilované soubory JavaScriptu. Umístění závisí na vašich nástrojích a předvolbách konfigurace.
V Průzkumník řešení klikněte pravým tlačítkem myši na uzel projektu a vyberte Přidat > novou složku. Pro novou složku použijte skripty pro názvy.
Klikněte pravým tlačítkem na složku skriptů a vyberte Přidat > novou položku. Zvolte soubor TypeScript, zadejte název souboru app.ts a pak vyberte Přidat.

Pokud nevidíte všechny šablony položek, vyberte Zobrazit všechny šablony a pak zvolte šablonu položky.

Visual Studio přidá app.ts do složky skriptů .

Otevřete app.ts a přidejte následující kód TypeScriptu.

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 poskytuje podporu IntelliSense pro váš kód TypeScriptu.

Pokud chcete tuto funkci vyzkoušet, odeberte ji, greeter znovu zadejte .lastName tečku (.) a všimněte si aktualizací IntelliSense.

View IntelliSense

Výběrem lastName přidáte příjmení zpět do kódu.

Otevřete složku Views/Home a pak otevřete Index.cshtml.

Na konec souboru přidejte následující kód HTML.

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

Otevřete složku Views/Shared a pak otevřete soubor _Layout.cshtml.
Před voláním @RenderSectionAsync("Scripts", required: false)přidejte následující odkaz na skript:
```
<script src="~/js/app.js"></script>
```
Změny uložíte tak, že vyberete Uložit vše (Ctrl + Shift + S).>

Sestavení aplikace

Vyberte Sestavit > řešení.

I když se aplikace při spuštění automaticky sestaví, chceme se podívat na něco, co se stane během procesu sestavení.
Otevřete složku wwwroot/js a zobrazte dva nové soubory: app.js a zdrojový soubor mapy app.js.map. Kompilátor TypeScript vygeneruje tyto soubory.

Soubory zdrojové mapy se vyžadují pro ladění.

Spuštění aplikace

Stisknutím klávesy F5 (Ladění>spustit ladění) spusťte aplikaci.

Aplikace se otevře v prohlížeči.

V okně prohlížeče se zobrazí úvodní nadpis a tlačítko Kliknout na mě.
Výběrem tlačítka zobrazíte zprávu, kterou jsme zadali v souboru TypeScript.

Ladění aplikace

Nastavte zarážku ve greeter funkci app.ts kliknutím na levý okraj v editoru kódu.
Stisknutím klávesy F5 spusťte aplikaci.

Možná budete muset odpovědět na zprávu, abyste povolili ladění skriptů.

Poznámka:

Pro ladění skriptů na straně klienta se vyžaduje Chrome nebo Edge.
Když se stránka načte, stiskněte tlačítko Kliknout na mě.

Aplikace se pozastaví na zarážce. Teď můžete zkontrolovat proměnné a používat funkce ladicího programu.

Přidání podpory TypeScriptu pro knihovnu třetí strany

Postupujte podle pokynů v správě balíčků npm a přidejte package.json do projektu soubor. Tento úkol přidá do projektu podporu npm.

Poznámka:

U ASP.NET základních projektů můžete k instalaci souborů JavaScriptu a CSS na straně klienta použít také Správce knihoven nebo příze místo npm.
V tomto příkladu přidejte do projektu definiční soubor TypeScriptu pro jQuery. Do souboru package.json vložte následující kód.
```
"devDependencies": {
  "@types/jquery": "3.5.1"
}
```
Tento kód přidá podporu TypeScriptu pro jQuery. Samotná knihovna jQuery je již součástí šablony projektu MVC (podívejte se na webovou složku/lib v Průzkumník řešení). Pokud používáte jinou šablonu, možná budete muset zahrnout i balíček jquery npm.
Pokud balíček v Průzkumník řešení není nainstalovaný, klikněte pravým tlačítkem na uzel npm a zvolte Obnovit balíčky.

Poznámka:

V některých scénářích Průzkumník řešení může znamenat, že balíček npm není synchronizovaný s package.json kvůli známému problému popsanému tady. Balíček se například může při instalaci zobrazit jako nenainstalovaný. Ve většině případů můžete aktualizovat Průzkumník řešení odstraněním souboru package.json, restartováním sady Visual Studio a opětovným přidáním souboru package.json, jak je popsáno výše v tomto článku.
V Průzkumník řešení klikněte pravým tlačítkem na složku skriptů a zvolte Přidat>novou položku.

Pokud nevidíte všechny šablony položek, zvolte Zobrazit všechny šablony a pak zvolte šablonu položky.
Zvolte TypeScript File, type library.ts a zvolte Přidat.
Do souboru library.ts přidejte následující kód.
```
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();
```
Pro zjednodušení tento kód zobrazí zprávu pomocí jQuery a výstrahy.

Při přidání definic typů TypeScript pro jQuery získáte podporu IntelliSense u objektů jQuery při zadávání tečky (.) za objektem jQuery, jak je znázorněno zde.
V souboru _Layout.cshtml aktualizujte odkazy na skripty tak, aby zahrnovaly library.js.
```
<script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>
```
Do souboru Index.cshtml přidejte následující kód HTML na konec souboru.
```
<div>
  <p id="ts-example-2">jQuery version is:</p>
</div>
```
Stisknutím klávesy F5 (Ladění>spustit ladění) spusťte aplikaci.

Aplikace se otevře v prohlížeči.

Výběrem možnosti OK v upozornění zobrazíte stránku aktualizovanou na verzi jQuery: 3.3.1!!.

Další kroky

Možná budete chtít získat další podrobnosti o používání TypeScriptu s ASP.NET Core. Pokud vás zajímá programování Angular v sadě Visual Studio, můžete použít rozšíření služby jazyka Angular pro Visual Studio.

ASP.NET core a TypeScript

Rozšíření služby jazyka Angular

Sdílet prostřednictvím