Compilare il codice TypeScript (Node.js)

Usare il pacchetto npm TypeScript per aggiungere il supporto TypeScript ai progetti basati su JavaScript Project System (JSPS) o .esproj. A partire da Visual Studio 2019, è consigliabile usare il pacchetto npm anziché TypeScript SDK. Il pacchetto npm TypeScript offre maggiore portabilità tra piattaforme e ambienti diversi.

Aggiungere il supporto di TypeScript con npm

Il pacchetto TypeScript npm aggiunge il supporto TypeScript. Quando il pacchetto npm per TypeScript 2.1 o versione successiva è installato nel progetto, la versione corrispondente del servizio di linguaggio TypeScript viene caricata nell'editor.

1. Seguire le istruzioni per installare il carico di lavoro di sviluppo Node.js e il runtime Node.js.

   Per una semplice integrazione di Visual Studio, creare il progetto usando uno dei modelli TypeScript Node.js, ad esempio il modello Applicazione Web Node.js vuota. In caso contrario, usare un modello JavaScript Node.js incluso in Visual Studio e seguire le istruzioni riportate qui. In alternativa, usare un progetto Apri cartella .

2. Se il progetto non lo include già, installare il pacchetto npm TypeScript.

   Da Esplora soluzioni (riquadro destro) aprire package.json nella radice del progetto. I pacchetti elencati corrispondono ai pacchetti nel nodo npm in Esplora soluzioni. Per altre informazioni, vedere Gestire pacchetti npm.

   Per un progetto Node.js, è possibile installare il pacchetto TypeScript npm usando la riga di comando o l'IDE. Per eseguire l'installazione usando l'IDE, fare clic con il pulsante destro del mouse sul nodo npm in Esplora soluzioni, scegliere Installa nuovo pacchetto npm, cercare TypeScript e installare il pacchetto.

   Selezionare l'opzione npm nella finestra Output per visualizzare lo stato dell'installazione del pacchetto. Il pacchetto installato viene visualizzato nel nodo npm in Esplora soluzioni.

3. Se il progetto non lo include già, aggiungere un file tsconfig.json alla radice del progetto. Per aggiungere il file, 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.

4. 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": "dist"
     },
     "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 traspilati 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

1. Aggiungere file TypeScript (con estensione ts) o TypeScript JSX (tsx) al progetto e quindi aggiungere il codice TypeScript. Di seguito è riportato un semplice esempio di TypeScript:

   let message: string = 'Hello World';
   console.log(message);
   

2. In package.json aggiungere il supporto per i comandi di compilazione e pulizia di Visual Studio usando gli script seguenti.

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   Per compilare usando uno strumento di terze parti come webpack, è possibile aggiungere uno script di compilazione della riga di comando al file package.json :

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

   Per un esempio di uso di webpack con React e un file di configurazione webpack, vedere Creare un'app Web con Node.js e React.

   Per un esempio di uso di Vue.js con TypeScript, vedere Creare un'applicazione Vue.js.

3. Se è necessario configurare opzioni come la pagina di avvio, il percorso del runtime Node.js, la porta dell'applicazione o gli argomenti di runtime, fare clic con il pulsante destro del mouse sul nodo del progetto in Esplora soluzioni e scegliere Proprietà.

   Nota

   Quando si configurano strumenti di terze parti, i progetti Node.js non usano i percorsi configurati in Strumenti>Progetti e>soluzioni>Web Package Management>External Web Tools. Queste impostazioni vengono usate per altri tipi di progetto.

4. Scegliere Compila > soluzione.

   L'app viene compilata automaticamente quando viene eseguita. Tuttavia, durante il processo di compilazione potrebbe verificarsi quanto segue:

   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.

Eseguire l'applicazione

Per istruzioni sull'esecuzione dell'app dopo la compilazione, vedere Creare un'app Node.js ed Express.

Automatizzare le attività di compilazione

È possibile usare Esplora strumenti di esecuzione attività in Visual Studio per automatizzare le attività per strumenti di terze parti, ad esempio npm e webpack.

• Strumento di esecuzione attività NPM: aggiunge il supporto per gli script npm definiti in package.json. Supporta yarn.
• Runner attività Webpack : aggiunge il supporto per webpack.

Contenuto correlato

Proprietà, React, Angular, Vue