Compilare il codice TypeScript (Node.js)

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 viene installato nel progetto, la versione corrispondente del servizio di linguaggio TypeScript viene caricata nell'editor.

1. Controllare se è necessario installare qualsiasi carico di lavoro di sviluppo per Visual Studio o il runtime di Node.js.

   Per i progetti creati usando JavaScript Project System (JSPS) o .esproj, non sono necessari carichi di lavoro aggiuntivi. È sufficiente installare npm (https://www.npmjs.com/), che è incluso in Node.js.

   Per il tipo di progetto precedente (.njsproj), è necessario installare il workload di sviluppo Node.js e il runtime Node.js.

   Seguire le istruzioni per installare il pacchetto di sviluppo Node.js e npm (https://www.npmjs.com/), fornito in Node.js.

   Per una semplice integrazione di Visual Studio, creare il progetto usando uno dei modelli TypeScript Node.js, ad esempio il modello Vuota Applicazione Web Node.js. 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à, installi il pacchetto npm TypeScript.

   Nell'Esplora soluzioni (riquadro destro) aprire il 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 npm TypeScript 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 TypeScripte installare il pacchetto.

   Controllare l'opzione npm nella finestra Output per visualizzare lo stato di avanzamento 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 File di configurazione JSON TypeScripte quindi fare clic su Aggiungi.

   Se non vengono visualizzati tutti i modelli di elemento, scegliere Mostra tutti i modellie 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:

   • includere indica al compilatore dove trovare file TypeScript (*.ts).
   • 'opzione outDir specifica la cartella di output per i file JavaScript semplici traspilati dal compilatore TypeScript.
   • L'opzione sourceMap indica se il compilatore genera i 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 (.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.jsonaggiungere 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 da 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 dell'Node.js runtime, la porta dell'applicazione o gli argomenti di runtime, fare clic destro 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 sotto Strumenti di >Opzioni>Progetti e soluzioni>Gestione pacchetti Web>Strumenti Web esterni. Queste impostazioni vengono usate per altri tipi di progetto.

4. Scegliere Compila > 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 debug.

Eseguire l'applicazione

Automatizzare le attività di compilazione

È possibile usare Esplora attività in Visual Studio per automatizzare le attività per strumenti esterni come npm e Webpack.

• NPM Task Runner : aggiunge il supporto per gli script npm definiti in package.json. Supporta Yarn.
• Webpack Task Runner - Aggiunge il supporto per Webpack.

Contenuto correlato

Proprietà, React, Angular, Vue