Compartir a través de

Transpilar código TypeScript usando npm

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 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 (), que se incluye con Node.js.

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

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

    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 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 las opciones de tsc, el compilador de TypeScript, que transpila TypeScript a JavaScript.

  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 especifica al compilador dónde buscar archivos TypeScript (*.ts).
    • La opción outDir especifica la carpeta de salida para los archivos JavaScript en su forma básica que son transpilados por tsc, el compilador de TypeScript.
    • La opción sourceMap indica si el compilador genera archivos de 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 los comandos de compilación y limpieza de Visual Studio usando 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 de compilación e implementación, como la dirección URL de la aplicación o comandos en tiempo de ejecución, haga clic con el botón derecho en el nodo del proyecto en Explorador de soluciones y elija Properties.

    Nota

    Al configurar herramientas de terceros, los proyectos que usan JavaScript Project System (JSPS) o .esproj, no deben utilizar las rutas de acceso configuradas en HerramientasOpcionesProyectos y SolucionesWeb Package ManagementExternal Web Tools. 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 generó 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 transpilerla, 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 webpack: agrega compatibilidad con webpack.

Contenido relacionado

Propiedades, React, Angular, Vue

  • Last updated on