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

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.

V tomto kurzu se naučíte:

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.

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

1. Otevřete sadu Visual Studio. Pokud úvodní okno není otevřené, zvolte Okno Start souboru>.

2. V úvodním okně zvolte Vytvořit nový projekt.

3. 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.

4. V okně Konfigurovat nový projekt zadejte název projektu do pole Název projektu. Pak vyberte Další.

Visual Studio otevře nový projekt.

Přidání kódu

1. 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í.

2. Na kartě Procházet vyhledejte Microsoft.TypeScript.MSBuild.

3. Vyberte Nainstalovat a nainstalujte balíček.

   

   Visual Studio přidá balíček NuGet do uzlu Závislosti v Průzkumník řešení.

4. 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.

5. 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.

6. 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.

7. 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ů .

8. 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.

   

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

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

10. 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>
    

11. Otevřete složku Views/Shared a pak otevřete soubor _Layout.cshtml.

12. Před voláním @RenderSectionAsync("Scripts", required: false)přidejte následující odkaz na skript:

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

13. Změny uložíte tak, že vyberete Uložit vše (Ctrl + Shift + S).>

Sestavení aplikace

1. 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í.

2. 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

1. 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ě.

   

2. Výběrem tlačítka zobrazíte zprávu, kterou jsme zadali v souboru TypeScript.

Ladění aplikace

1. Nastavte zarážku ve greeter funkci app.ts kliknutím na levý okraj v editoru kódu.

   

2. 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.

3. 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

1. 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.

2. 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.

3. 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.

4. 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.

5. Zvolte TypeScript File, type library.ts a zvolte Přidat.

6. 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.

   

7. 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>
   

8. 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>
   

9. 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.