Condividi tramite

Esercitazione: Aggiungere TypeScript a un'app ASP.NET Core esistente in Visual Studio

  • Articolo

In questa esercitazione per lo sviluppo di Visual Studio usando ASP.NET Core e TypeScript si crea una semplice applicazione Web, si aggiunge un codice TypeScript e quindi si esegue l'app.

In Visual Studio 2022 e versioni successive, se si vuole usare Angular o Vue con ASP.NET Core, è consigliabile usare i modelli ASP.NET Core Single Page Application (SPA) per creare un'app ASP.NET Core con TypeScript. Per altre informazioni, vedere le esercitazioni su Visual Studio per Angular o Vue.

Se non è ancora stato installato Visual Studio, accedere alla pagina Download di Visual Studio per installarlo gratuitamente.

In questa esercitazione apprenderai a:

  • Creare un progetto ASP.NET Core
  • Aggiungere il pacchetto NuGet per il supporto di TypeScript
  • Aggiungere codice TypeScript
  • Eseguire l'app
  • Aggiungere una libreria di terze parti usando npm

Prerequisiti

È necessario che Visual Studio sia installato e il carico di lavoro di sviluppo Web ASP.NET.

  • Se non è ancora stato installato Visual Studio, accedere alla pagina Download di Visual Studio per installarlo gratuitamente.

  • Se è necessario installare il carico di lavoro ma visual Studio è già disponibile, passare a Strumenti Ottieni strumenti>e funzionalità per aprire il Programma di installazione di Visual Studio. Scegliere il carico di lavoro ASP.NET e sviluppo Web, quindi selezionare Modifica.

Creare un nuovo progetto MVC ASP.NET Core

Visual Studio gestisce i file per una sola applicazione in un progetto. Il progetto include i file di configurazione, le risorse e il codice sorgente.

Nota

Per iniziare con un progetto ASP.NET Core vuoto e aggiungere un front-end TypeScript, vedere ASP.NET Core con TypeScript .

In questa esercitazione si inizia con un progetto semplice contenente codice per un'app MVC core ASP.NET.

  1. Aprire Visual Studio. Se la finestra iniziale non è aperta, scegliere Finestra di avvio file>.

  2. Nella finestra iniziale scegliere Crea un nuovo progetto.

  3. Nella finestra Crea un nuovo progetto immettere l'app Web nella casella di ricerca. Scegliere quindi C# come linguaggio.

    Dopo aver applicato il filtro lingua, scegliere ASP.NET Core Web Application (Model-View-Controller) e quindi selezionare Avanti.

    Nota

    Se non viene visualizzato il modello di progetto ASP.NET Core Web Application , è necessario aggiungere il carico di lavoro ASP.NET e sviluppo Web. Per istruzioni dettagliate, vedere i Prerequisiti.

  4. Nella finestra Configura il nuovo progetto immettere un nome per il progetto nella casella Nome progetto. Quindi seleziona Avanti.

  1. Selezionare il framework di destinazione consigliato (supporto a lungo termine o .NET 8.0) e quindi selezionare Crea.
  1. Nella finestra Informazioni aggiuntive verificare che .NET 8.0 sia selezionato nel menu a discesa Framework e quindi selezionare Crea.

Visual Studio aprirà il nuovo progetto.

Aggiungere codice

  1. In Esplora soluzioni (riquadro destro) fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Gestisci pacchetti NuGet per soluzioni.

  2. Nella scheda Sfoglia cercare Microsoft.TypeScript.MSBuild.

  3. Selezionare Installa per installare il pacchetto.

    Add NuGet package

    Visual Studio aggiunge il pacchetto NuGet nel nodo Dipendenze in Esplora soluzioni.

  4. Fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Aggiungi > nuovo elemento. Scegliere Il file di configurazione JSON TypeScript e quindi selezionare Aggiungi.

    Se non vengono visualizzati tutti i modelli di elemento, selezionare Mostra tutti i modelli e quindi scegliere il modello di elemento.

    Visual Studio aggiunge il file tsconfig.json alla radice del progetto. È possibile usare questo file per configurare le opzioni per il compilatore TypeScript.

  5. Aprire tsconfig.json e sostituire il codice predefinito con il codice seguente:

    {
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}

    L'opzione outDir specifica la cartella di output per i file JavaScript semplici traspili del compilatore TypeScript.

    Questa configurazione fornisce un'introduzione di base all'uso di TypeScript. In altri scenari, ad esempio quando si usa gulp o Webpack, potrebbe essere necessario un percorso intermedio diverso per i file JavaScript transpiled anziché wwwroot/js. La posizione dipende dagli strumenti e dalle preferenze di configurazione.

  6. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Aggiungi > nuova cartella. Usare gli script dei nomi per la nuova cartella.

  7. Fare clic con il pulsante destro del mouse sulla cartella scripts e scegliere Aggiungi > nuovo elemento. Scegliere il file TypeScript, digitare il nome app.ts per il nome file e quindi selezionare Aggiungi.

    Se non vengono visualizzati tutti i modelli di elemento, selezionare Mostra tutti i modelli e quindi scegliere il modello di elemento.

    Visual Studio aggiunge app.ts alla cartella scripts .

  8. Aprire app.ts e aggiungere il codice TypeScript seguente.

    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 offre il supporto di IntelliSense per il codice TypeScript.

    Per provare questa funzionalità, rimuovere .lastName dalla greeter funzione, immettere nuovamente il punto (.) e notare gli aggiornamenti di IntelliSense.

    View IntelliSense

    Selezionare questa opzione lastName per aggiungere di nuovo il cognome al codice.

  9. Aprire la cartella Views/Home e quindi aprire Index.cshtml.

  10. Aggiungere il codice HTML seguente alla fine del file.

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

  11. Aprire la cartella Views/Shared e quindi aprire _Layout.cshtml.

  12. Aggiungere il riferimento di script seguente prima della chiamata a @RenderSectionAsync("Scripts", required: false):

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

  13. Selezionare Salva>tutto (CTRL + MAIUSC + S) per salvare le modifiche.

Compilare l'applicazione

  1. Selezionare Genera > Genera soluzione.

    Anche se l'app viene compilata automaticamente quando viene eseguita, è necessario esaminare un aspetto che si verifica durante il processo di compilazione.

  2. Aprire la cartella wwwroot/js per visualizzare due nuovi file: app.js e il file di mappa di origine app.js.map. Il compilatore TypeScript genera questi file.

    I file di mapping di origine sono necessari per il debug.

Eseguire l'applicazione

  1. Premere F5 (Debug>Avvia debug) per eseguire l'applicazione.

    L'app verrà aperta in un browser.

    Nella finestra del browser viene visualizzata l'intestazione Benvenuto e il pulsante Fai clic su Di me .

    ASP.NET Core with TypeScript

  2. Selezionare il pulsante per visualizzare il messaggio specificato nel file TypeScript.

Eseguire il debug dell'applicazione

  1. Impostare un punto di interruzione nella greeter funzione in app.ts facendo clic sul margine sinistro nell'editor di codice.

    Set a breakpoint

  2. Premere F5 per eseguire l'applicazione.

    Potrebbe essere necessario rispondere a un messaggio per abilitare il debug di script.

    Nota

    Chrome o Edge è necessario per il debug di script sul lato client.

  3. Quando la pagina viene caricata, premere Click Me.When the page loads, press Click Me.

    L'applicazione viene sospesa in corrispondenza del punto di interruzione. È ora possibile esaminare le variabili e usare le funzionalità del debugger.

Aggiungere il supporto TypeScript per una libreria di terze parti

  1. Seguire le istruzioni in npm package management (Gestione pacchetti npm) per aggiungere un package.json file al progetto. Questa attività aggiunge il supporto npm al progetto.

    Nota

    Per ASP.NET progetti Core, è anche possibile usare Gestione librerie o yarn anziché npm per installare file JavaScript e CSS sul lato client.

  2. In questo esempio aggiungere un file di definizione TypeScript per jQuery al progetto. Includere il codice seguente nel file package.json .

    "devDependencies": {
  "@types/jquery": "3.5.1"
}

    Questo codice aggiunge il supporto TypeScript per jQuery. La libreria jQuery è già inclusa nel modello di progetto MVC (vedere wwwroot/lib in Esplora soluzioni). Se si usa un modello diverso, potrebbe essere necessario includere anche il pacchetto npm jquery.

  3. Se il pacchetto in Esplora soluzioni non è installato, fare clic con il pulsante destro del mouse sul nodo npm e scegliere Ripristina pacchetti.

    Nota

    In alcuni scenari, Esplora soluzioni potrebbe indicare che un pacchetto npm non è sincronizzato con package.json a causa di un problema noto descritto qui. Ad esempio, il pacchetto potrebbe non essere installato quando è installato. Nella maggior parte dei casi, è possibile aggiornare Esplora soluzioni eliminando package.json, riavviando Visual Studio e aggiungendo nuovamente il file package.json come descritto in precedenza in questo articolo.

  4. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella scripts e scegliere Aggiungi>nuovo elemento.

    Se non vengono visualizzati tutti i modelli di elemento, scegliere Mostra tutti i modelli e quindi scegliere il modello di elemento.

  5. Scegliere File TypeScript, digitare library.ts e scegliere Aggiungi.

  6. In library.ts aggiungere il codice seguente.

    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();

    Per semplicità, questo codice visualizza un messaggio usando jQuery e un avviso.

    Con le definizioni dei tipi TypeScript per jQuery aggiunte, si ottiene il supporto di IntelliSense sugli oggetti jQuery quando si immette un punto (.) dopo un oggetto jQuery, come illustrato di seguito.

    Screenshot that shows Intellisense results for the J Query example.

  7. In _Layout.cshtml aggiornare i riferimenti allo script per includere library.js.

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

  8. In Index.cshtml aggiungere il codice HTML seguente alla fine del file.

    <div>
  <p id="ts-example-2">jQuery version is:</p>
</div>

  9. Premere F5 (Debug>Avvia debug) per eseguire l'applicazione.

    L'app viene aperta nel browser.

    Selezionare OK nell'avviso per visualizzare la pagina aggiornata alla versione di jQuery: 3.3.1!!.

    Screenshot that shows the J Query example.

Passaggi successivi

È possibile ottenere altre informazioni sull'uso di TypeScript con ASP.NET Core. Se si è interessati alla programmazione Angular in Visual Studio, è possibile usare l'estensione del servizio di linguaggio Angular per Visual Studio.

ASP.NET Core e TypeScript

Estensione del servizio di linguaggio Angular