Compilare il codice TypeScript (ASP.NET Core)

Articolo
10/24/2023

Usare il pacchetto NuGet TypeScript per aggiungere il supporto TypeScript ai progetti ASP.NET Core. A partire da Visual Studio 2019, è consigliabile usare il pacchetto NuGet anziché TypeScript SDK. Il pacchetto NuGet TypeScript offre maggiore portabilità tra piattaforme e ambienti diversi.

Per ASP.NET progetti Core, un uso comune per il pacchetto NuGet consiste nel compilare TypeScript usando l'interfaccia della riga di comando di .NET Core. Negli scenari .NET il pacchetto NuGet è l'opzione preferita ed è l'unico modo per abilitare la compilazione TypeScript usando i comandi dell'interfaccia della riga di comando di .NET Core, dotnet build ad esempio e dotnet publish. Inoltre, per l'integrazione di MSBuild con ASP.NET Core e TypeScript, scegliere il pacchetto NuGet.

Importante

Per i progetti basati su JavaScript Project System (JSPS) o su progetti con estensione esproj, usare il pacchetto npm anziché NuGet per aggiungere il supporto TypeScript.

Aggiungere il supporto di TypeScript con NuGet

Il pacchetto NuGet TypeScript aggiunge il supporto TypeScript. Quando si installa il pacchetto NuGet per TypeScript 3.2 o versione successiva nel progetto, la versione corrispondente del servizio di linguaggio TypeScript viene caricata nell'editor.

Se Visual Studio è installato, il file node.exe incluso verrà selezionato automaticamente da Visual Studio. Se Node.js non è installato, è consigliabile installare la versione LTS dal sito Web Node.js .

Aprire il progetto ASP.NET Core in Visual Studio.
In Esplora soluzioni (riquadro destro). Fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Gestisci pacchetti NuGet. Nella scheda Sfoglia cercare Microsoft.TypeScript.MSBuild e quindi fare clic su Installa per installare il pacchetto.

Visual Studio aggiunge il pacchetto NuGet nel nodo Dipendenze in Esplora soluzioni. Il riferimento al pacchetto seguente viene aggiunto al file *.csproj.
```
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.9.7">
   <PrivateAssets>all</PrivateAssets>
   <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
```
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 fare clic su Aggiungi.

Se non vengono visualizzati tutti i modelli di elemento, scegliere 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.
Aprire tsconfig.json e aggiornare per impostare le opzioni del compilatore desiderate.

Di seguito è riportato un esempio di file tsconfig.json semplice.
```
{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ]
}
```
In questo esempio:
- include indica al compilatore dove trovare i file TypeScript (*.ts).
- l'opzione outDir specifica la cartella di output per i file JavaScript semplici transpilati dal compilatore TypeScript.
- l'opzione sourceMap indica se il compilatore genera file sourceMap .
La configurazione precedente fornisce solo un'introduzione di base alla configurazione di TypeScript. Per informazioni su altre opzioni, vedere tsconfig.json.

Compilare l'applicazione

Aggiungere file TypeScript (con estensione ts) o TypeScript JSX (tsx) al progetto e quindi aggiungere il codice TypeScript. Per un semplice esempio di TypeScript, usare quanto segue:
```
let message: string = 'Hello World';
console.log(message);
```
Se si usa un progetto di stile non SDK meno recente, seguire le istruzioni in Rimuovere le importazioni predefinite prima della compilazione.
Scegliere Compila > soluzione.

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

Se sono state generate mappe di origine, aprire la cartella specificata nell'opzione outDir e trovare i file *.js generati insieme ai file *js.map generati.

I file di mapping di origine sono necessari per il debug.
Se si vuole compilare ogni volta che si salva il progetto, usare l'opzione compileOnSave in tsconfig.json.
```
{
   "compileOnSave":  true,
   "compilerOptions": {
   }
}
```

Per un esempio di uso di gulp con Task Runner per compilare l'app, vedi ASP.NET Core e TypeScript.

Se si verificano problemi in cui Visual Studio usa una versione di Node.js o uno strumento di terze parti diverso da quello previsto, potrebbe essere necessario impostare il percorso per Visual Studio da usare. Scegliere Opzioni strumenti>. In Progetti e soluzioni scegliere Strumenti Web esterni per la gestione dei>pacchetti Web.

Eseguire l'applicazione

Premere F5 o selezionare il pulsante Start nella parte superiore della finestra.

Dettagli della struttura del pacchetto NuGet

Microsoft.TypeScript.MSBuild.nupkg contiene due cartelle principali:

cartella di compilazione

Due file si trovano in questa cartella. Entrambi sono punti di ingresso: rispettivamente per il file di destinazione TypeScript principale e il file props.
1. Microsoft.TypeScript.MSBuild.targets
  
  Questo file imposta le variabili che specificano la piattaforma di runtime, ad esempio un percorso a TypeScript.Tasks.dll, prima di importare Microsoft.TypeScript.targets dalla cartella degli strumenti.
2. Microsoft.TypeScript.MSBuild.props
  
  Questo file importa Microsoft.TypeScript.Default.props dalla cartella degli strumenti e imposta le proprietà che indicano che la compilazione è stata avviata tramite NuGet.
Cartella degli strumenti

Le versioni dei pacchetti precedenti alla 2.3 contengono solo una cartella tsc. Microsoft.TypeScript.targets e TypeScript.Tasks.dll si trovano a livello radice.

Nelle versioni del pacchetto 2.3 e successive il livello radice contiene Microsoft.TypeScript.targets e Microsoft.TypeScript.Default.props. Per altri dettagli su questi file, vedere Configurazione di MSBuild.

Inoltre, la cartella contiene tre sottocartelle:
1. net45
  
  Questa cartella contiene TypeScript.Tasks.dll e altre DLL da cui dipende. Quando si compila un progetto in una piattaforma Windows, MSBuild usa le DLL di questa cartella.
2. netstandard1.3
  
  Questa cartella contiene un'altra versione di , che viene usata per la compilazione di TypeScript.Tasks.dllprogetti in un computer non Windows.
3. Tsc
  
  Questa cartella contiene tsc.jstsserver.js e tutti i file di dipendenza necessari per eseguirli come script del nodo.
  
  Nota
  
  Se Visual Studio è installato, il pacchetto NuGet preleva automaticamente la versione di node.exe in bundle con Visual Studio. In caso contrario, Node.js deve essere installato nel computer.
  
  Le versioni precedenti alla 3.1 contengono un tsc.exe eseguibile per eseguire la compilazione. Nella versione 3.1 il file eseguibile è stato rimosso a favore dell'uso node.exedi .

Rimuovere le importazioni predefinite

Nei progetti di base di ASP.NET precedenti che usano il formato non in stile SDK, potrebbe essere necessario rimuovere alcuni elementi del file di progetto.

Se si usa il pacchetto NuGet per il supporto di MSBuild per un progetto, il file di progetto non deve importare Microsoft.TypeScript.Default.props o Microsoft.TypeScript.targets. I file vengono importati dal pacchetto NuGet, quindi includerli separatamente possono causare comportamenti imprevisti.

Fare clic con il pulsante destro del mouse sul progetto e scegliere Scarica progetto.
Fare clic con il pulsante destro del mouse sul progetto e scegliere Modifica <nome> file di progetto.

Verrà aperto il file di progetto.

Rimuovere i riferimenti a Microsoft.TypeScript.Default.props e Microsoft.TypeScript.targets.

Le importazioni da rimuovere hanno un aspetto simile al seguente:

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.Default.props')" />

<Import
   Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets"
   Condition="Exists('$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets')" />

Share via