Compilar código TypeScript (Node.js)

Use el paquete npm de TypeScript para agregar compatibilidad con TypeScript a proyectos basados en el JavaScript Project System (JSPS)o .esproj. A partir de Visual Studio 2019, se recomienda usar el paquete npm en lugar del SDK de TypeScript. El paquete npm de TypeScript proporciona una mayor portabilidad en diferentes plataformas y entornos.

Importante

Para los proyectos de ASP.NET Core, use el paquete NuGet en lugar de npm para agregar compatibilidad con TypeScript.

Adición de compatibilidad con TypeScript mediante npm

El paquete npm de TypeScript agrega compatibilidad con TypeScript. Cuando el paquete npm para TypeScript 2.1 o posterior está instalado en el proyecto, la versión correspondiente del servicio de lenguaje TypeScript se carga en el editor.

1. Compruebe si necesita instalar cualquier carga de trabajo de desarrollo para Visual Studio o el entorno de ejecución de Node.js.

   En el caso de los proyectos creados con javaScript Project System (JSPS) o .esproj, no se necesitan cargas de trabajo adicionales. Solo tiene que instalar npm (https://www.npmjs.com/), que se incluye con Node.js.

   Para el tipo de proyecto anterior (.njsproj), debe instalar la carga de trabajo de desarrollo de Node.js y el entorno de ejecución de Node.js.

2. Si el proyecto aún no lo incluye, instale el paquete npm de TypeScript.

   En el Explorador de soluciones (panel derecho), abra el package.json en la raíz del proyecto. Los paquetes enumerados corresponden a paquetes en el nodo npm en el Explorador de soluciones. Para obtener más información, consulte Administrar paquetes npm.

   Para un proyecto de Node.js, puede instalar el paquete npm de TypeScript mediante la línea de comandos o el IDE. Para instalar mediante el IDE, haga clic con el botón derecho en el nodo npm en el Explorador de soluciones, elija Instalar nuevo paquete npm, busque TypeScripte instale el paquete.

   Active la opción npm de la ventana Resultados para ver el progreso de la instalación del paquete. El paquete instalado se muestra en el nodo npm en el Explorador de soluciones.

3. Si el proyecto aún no lo incluye, agregue un archivo tsconfig.json a la raíz del proyecto. Para agregar el archivo, haga clic con el botón derecho en el nodo del proyecto y elija Agregar > nuevo elemento. Elija el archivo de configuración JSON de TypeScript y, a continuación, haga clic en Agregar.

   Si no ve todas las plantillas de elemento, elija Mostrar todas las plantillasy, a continuación, elija la plantilla de elemento.

   Visual Studio agrega el archivo tsconfig.json a la raíz del proyecto. Puede usar este archivo para configurar opciones para el compilador de TypeScript.

4. Abra tsconfig.json y actualice para establecer las opciones del compilador que desee.

   A continuación se muestra un ejemplo de un archivo tsconfig.json simple.

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

   En este ejemplo:

   • include indica al compilador dónde buscar archivos TypeScript (*.ts).
   • La opción outDir especifica la carpeta de salida para los archivos JavaScript en bruto que el compilador de TypeScript transpila.
   • La opción sourceMap indica si el compilador genera archivos sourceMap.

   La configuración anterior solo proporciona una introducción básica a la configuración de TypeScript. Para obtener información sobre otras opciones, vea tsconfig.json.

Compilación de la aplicación

1. Agregue archivos TypeScript (.ts) o TypeScript JSX (.tsx) al proyecto y agregue código TypeScript. A continuación se muestra un ejemplo sencillo de TypeScript:

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

2. En package.json, agregue compatibilidad con comandos de compilación y limpieza de Visual Studio mediante los siguientes scripts.

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

   Para compilar con una herramienta de terceros como Webpack, puede agregar un script de compilación de línea de comandos al archivo package.json:

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

3. Si necesita configurar opciones como la página de inicio, la ruta de acceso al entorno de ejecución de Node.js, el puerto de aplicación o los argumentos en tiempo de ejecución, haga clic con el botón derecho en el nodo del proyecto en el Explorador de soluciones y elija Propiedades.

   Nota

   Al configurar herramientas de terceros, los proyectos de Node.js no usan las rutas de acceso configuradas en Tools>Options>Proyectos y soluciones>Gestión de paquetes web>Herramientas web externas. Esta configuración se usa para otros tipos de proyecto.

4. Elija Compilar > Compilar solución.

   La aplicación se compila automáticamente al ejecutarla. Sin embargo, puede producirse lo siguiente durante el proceso de compilación:

   Si ha generado mapas de origen, abra la carpeta especificada en la opción outDir y encontrará los archivos *.js generados junto con los archivos *js.map generados.

   Los archivos de asignación de origen son necesarios para la depuración.

Ejecución de la aplicación

Para obtener instrucciones para ejecutar la aplicación después de compilarla, consulte Creación de una aplicación Node.js y Express.

Automatización de tareas de compilación

Puede usar el Explorador de ejecutores de tareas en Visual Studio para ayudar a automatizar tareas para herramientas de terceros como npm y Webpack.

• ejecutor de tareas de NPM: agrega compatibilidad con scripts de npm definidos en package.json. Admite yarn.
• ejecutor de tareas de Webpack: agrega compatibilidad con Webpack.

Contenido relacionado

Propiedades de , React, Angular, Vue