Compilar código TypeScript (Node.js)

  • Artículo

Use el paquete npm de TypeScript para agregar compatibilidad con TypeScript a proyectos basados en JavaScript Project System (JSPS) o .esproj. A partir de Visual Studio 2019, se recomienda usar el paquete npm en lugar de TypeScript SDK. 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.

Agregar compatibilidad con TypeScript con npm

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

  1. Siga las instrucciones para instalar la carga de trabajo de desarrollo de Node.js y el runtime de Node.js.

    Para una integración sencilla con Visual Studio, cree el proyecto mediante una de las plantillas de TypeScript de Node.js, como la plantilla Aplicación web en blanco de Node.js. También puede usar una plantilla de JavaScript de Node.js incluida con Visual Studio y seguir las instrucciones que se indican aquí. O bien, use un proyecto Abrir carpeta.

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

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

    En el caso de un proyecto de Node.js, puede instalar el paquete de npm de TypeScript mediante la línea de comandos o el IDE. Para realizar la instalación mediante el IDE, haga clic con el botón derecho en el nodo npm del Explorador de soluciones, elija Instalar nuevos paquetes de npm, busque TypeScript e 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 del 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 de 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, seleccione Mostrar todas las plantillas y 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 actualícelo 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 encontrar archivos de TypeScript (*.ts).
    • La opción outDir especifica la carpeta de salida para los archivos JavaScript sin formato que el compilador de TypeScript transpila.
    • La opción sourceMap indica si el compilador genera archivos sourceMap.

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

Compilar la aplicación

  1. Agregue archivos TypeScript ( .ts) o TypeScript JSX ( .tsx) al proyecto y, a continuación, agregue código de 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 los comandos de limpieza y compilación de Visual Studio mediante los siguientes scripts.

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

    Para realizar una compilación mediante 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"
}

    Para ver un ejemplo de cómo usar webpack con React y un archivo de configuración de webpack, consulte Crear una aplicación web con Node.js y React.

    Para ver un ejemplo de cómo usar Vue.js con TypeScript, consulte Crear una aplicación Vue.js.

  3. Si debe configurar opciones como la página de inicio, la ruta de acceso al runtime de Node.js, el puerto de la aplicación o los argumentos de tiempo de ejecución, haga clic con el botón derecho en el nodo de proyecto del 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 Herramientas>Opciones>Proyectos y soluciones>Administración de paquetes web>Herramientas web externas. Esta configuración se utiliza para otros tipos de proyectos.

  4. Elija Compilar > Compilar solución.

    La aplicación se compila automáticamente cuando la ejecuta. Sin embargo, puede ocurrir 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.

Ejecutar la aplicación

Si quiere ver instrucciones para ejecutar la aplicación después de compilarla, vea Creación de una aplicación Node.js y Express.

Automatizar las tareas de compilación

Puede usar el Explorador del ejecutor de tareas en Visual Studio para ayudar a automatizar las tareas para herramientas de terceros como npm y webpack.

Contenido relacionado

Propiedades, React, Angular, Vue