Compartir vía

Tutorial: Adición de TypeScript a una aplicación de ASP.NET Core existente en Visual Studio

  • Artículo

En este tutorial para el desarrollo de Visual Studio con ASP.NET Core y TypeScript, creará una aplicación web sencilla, agregará código TypeScript y, a continuación, ejecutará la aplicación.

En Visual Studio 2022 y versiones posteriores, si quiere usar Angular o Vue con ASP.NET Core, se recomienda usar las plantillas de aplicación de página única (SPA) de ASP.NET Core para crear una aplicación de ASP.NET Core con TypeScript. Para obtener más información, consulte los tutoriales de Visual Studio para angular o Vue.

Si todavía no ha instalado Visual Studio, vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.

En este tutorial, aprenderá a:

  • Creación de un proyecto de ASP.NET Core
  • Adición del paquete NuGet para la compatibilidad con TypeScript
  • Adición de código TypeScript
  • Ejecución de la aplicación
  • Adición de una biblioteca de terceros mediante npm

Prerrequisitos

Debe tener instalado Visual Studio y el workload de desarrollo web de ASP.NET.

  • Si todavía no ha instalado Visual Studio, vaya a la página de descargas de Visual Studio para instalarlo de forma gratuita.

  • Si necesita instalar la carga de trabajo pero ya tiene Visual Studio, vaya a Tools>Obtener herramientas y características... para abrir el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de ASP.NET y web y después seleccione Modificar.

Creación de un nuevo proyecto de ASP.NET Core MVC

Visual Studio administra los archivos de una sola aplicación en un proyecto de . El proyecto incluye código fuente, recursos y archivos de configuración.

Nota

Para empezar con un proyecto de ASP.NET Core vacío y agregar un front-end de TypeScript, consulte ASP.NET Core con TypeScript en su lugar.

En este tutorial, comenzará con un proyecto simple que contiene código para una aplicación de ASP.NET Core MVC.

  1. Abra Visual Studio. Si la ventana de inicio no está abierta, elija Archivo>Ventana de inicio.

  2. En la ventana de inicio, elija Crear un nuevo proyecto.

  3. En el cuadro de búsqueda de la ventana Crear un proyecto, escriba aplicación web. A continuación, elija C# como idioma.

    Después de aplicar el filtro de idioma, elija ASP.NET Core Web App (Model-View-Controller)y, a continuación, seleccione Siguiente.

    Nota

    Si no ve la plantilla de proyecto Aplicación web ASP.NET Core, debe agregar la carga de trabajo Desarrollo de ASP.NET y web. Para obtener instrucciones detalladas, consulte los requisitos previos de .

  4. En la ventana Configurar tu nuevo proyecto, escriba un nombre para tu proyecto en el cuadro Nombre del proyecto. A continuación, seleccione Siguiente.

  1. Seleccione la plataforma de destino recomendada (.NET 8.0 o soporte a largo plazo) y después seleccione Crear.
  1. En la ventana Información adicional, asegúrese de que esté seleccionado .NET 8.0 en el menú desplegable Marco y, luego, seleccione Crear.

Visual Studio abre el nuevo proyecto.

Añade algo de código

  1. En el Explorador de soluciones (panel derecho), haga clic con el botón derecho en el nodo del proyecto y seleccione Administrar paquetes NuGet para soluciones.

  2. En la pestaña Examinar, busque Microsoft.TypeScript.MSBuild.

  3. Seleccione Instalar para instalar el paquete.

    Agregar paquete NuGet

    Visual Studio agrega el paquete NuGet en el nodo dependencias en el Explorador de soluciones.

  4. Haga clic con el botón derecho en el nodo del proyecto y seleccione Agregar > Nuevo elemento. Elija el archivo de configuración JSON de TypeScript y, a continuación, seleccione Agregar.

    Si no ve todas las plantillas de elemento, seleccione 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.

  5. Abra tsconfig.json y reemplace el código predeterminado por el código siguiente:

    {
  "compileOnSave": true,
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "ES6",
    "outDir": "wwwroot/js"
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

    La opción outDir especifica la carpeta de salida para los archivos JavaScript sin formato que transpila el compilador de TypeScript.

    Esta configuración proporciona una introducción básica al uso de TypeScript. En otros escenarios, como al usar gulp o webpack, es posible que desee una ubicación intermedia diferente para los archivos JavaScript transpilados en lugar de wwwroot/js. La ubicación depende de las herramientas y las preferencias de configuración.

  6. En el Explorador de soluciones, haga clic con el botón derecho en el nodo del proyecto y seleccione Agregar > nueva carpeta. Use el nombre scripts para la nueva carpeta.

  7. Haga clic con el botón derecho en la carpeta scripts y seleccione Agregar > Nuevo elemento. Elija el Archivo TypeScript, escriba el nombre app.ts para el nombre de archivo y, a continuación, seleccione Agregar.

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

    Visual Studio agrega app.ts a la carpeta scripts.

  8. Abra app.ts y agregue el siguiente código TypeScript.

    function TSButton() {
   let name: string = "Fred";
   document.getElementById("ts-example").innerHTML = greeter(user);
}

class Student {
   fullName: string;
   constructor(public firstName: string, public middleInitial: string, public lastName: string) {
      this.fullName = firstName + " " + middleInitial + " " + lastName;
   }
}

interface Person {
   firstName: string;
   lastName: string;
}

function greeter(person: Person) {
   return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Fred", "M.", "Smith");

    Visual Studio proporciona compatibilidad con IntelliSense para el código typeScript.

    Para probar esta característica, quite .lastName de la función greeter, vuelva a escribir el punto (.) y observe las actualizaciones de IntelliSense.

    Visualización de IntelliSense

    Seleccione lastName para volver a agregar el apellido al código.

  9. Abra la carpeta Views/Home y, a continuación, abra Index.cshtml.

  10. Agregue el código HTML siguiente al final del archivo.

    <div id="ts-example">
    <br />
    <button type="button" class="btn btn-primary btn-md" onclick="TSButton()">
        Click Me
    </button>
</div>

  11. Abra la carpeta Views/Shared y, a continuación, abra _Layout.cshtml.

  12. Agregue la siguiente referencia de script antes de la llamada a @RenderSectionAsync("Scripts", required: false):

    <script src="~/js/app.js"></script>

  13. Seleccione Archivo>Guardar todo (Ctrl + Mayús + S) para guardar los cambios.

Compilación de la aplicación

  1. Seleccione Compilar > Compilar solución.

    Aunque la aplicación se compila automáticamente al ejecutarla, queremos echar un vistazo a algo que sucede durante el proceso de compilación.

  2. Abra la carpeta wwwroot/js para ver dos archivos nuevos: app.js y el archivo de mapa de origen, app.js. El compilador de TypeScript genera estos archivos.

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

Ejecución de la aplicación

  1. Presione F5 (Depurar>Iniciar depuración) para ejecutar la aplicación.

    La aplicación se abre en un explorador.

    En la ventana del explorador, ve el encabezado Bienvenido y el botón Hacer clic aquí.

    ASP.NET Core con typeScript

  2. Seleccione el botón para mostrar el mensaje especificado en el archivo TypeScript.

Depurar la aplicación

  1. Establezca un punto de interrupción en la función greeter en app.ts haciendo clic en el margen izquierdo del editor de código.

    Establecer un punto de interrupción

  2. Presione F5 para ejecutar la aplicación.

    Es posible que tenga que responder a un mensaje para habilitar la depuración de scripts.

    Nota

    Se requiere Chrome o Edge para la depuración de scripts del lado cliente.

  3. Cuando se cargue la página, presione Hacer clic aquí.

    La aplicación se detiene en el punto de interrupción. Ahora, puede inspeccionar variables y usar funcionalidades del depurador.

Agregar compatibilidad con TypeScript para una biblioteca de terceros

  1. Siga las instrucciones de de administración de paquetes npm para agregar un archivo package.json al proyecto. Esta tarea agrega compatibilidad con npm al proyecto.

    Nota

    Para los proyectos de ASP.NET Core, también puede usar Library Manager o yarn en lugar de npm para instalar archivos JavaScript y CSS del lado cliente.

  2. En este ejemplo, agregue un archivo de definición de TypeScript para jQuery al proyecto. Incluya el código siguiente en el archivo package.json.

    "devDependencies": {
  "@types/jquery": "3.5.1"
}

    Este código agrega compatibilidad con TypeScript para jQuery. La propia biblioteca de jQuery ya está incluida en la plantilla de proyecto de MVC (busque en wwwroot/lib en el Explorador de soluciones). Si usa una plantilla diferente, es posible que tenga que incluir también el paquete de npm de jquery.

  3. Si el paquete del Explorador de soluciones no está instalado, haga clic con el botón derecho en el nodo npm y elija Restaurar paquetes.

    Nota

    En algunos escenarios, el Explorador de soluciones podría indicar que un paquete de npm no está sincronizado con package.json debido a un problema conocido descrito aquí. Por ejemplo, el paquete puede aparecer como no instalado cuando está instalado. En la mayoría de los casos, puede actualizar el Explorador de soluciones mediante la eliminación de package.json, reiniciar Visual Studio y volver a agregar el archivo de package.json tal y como se describió anteriormente en este artículo.

  4. En el Explorador de soluciones, haga clic con el botón derecho en la carpeta scripts y elija Agregar>Nuevo elemento.

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

  5. Elija Archivo TypeScript, escriba library.ts y elija Agregar.

  6. En library.ts, agregue el código siguiente.

    var jqtest = {
  showMsg: function (): void {
     let v: any = jQuery.fn.jquery.toString();
     let content: any = $("#ts-example-2")[0].innerHTML;
     alert(content.toString() + " " + v + "!!");
     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";
  }
};

jqtest.showMsg();

    Para simplificar, este código muestra un mensaje mediante jQuery y una alerta.

    Con las definiciones de tipos de TypeScript para jQuery agregadas, obtendrá compatibilidad con IntelliSense en objetos jQuery al escribir un punto (.) después de un objeto jQuery, como se muestra aquí.

    Captura de pantalla que muestra los resultados de IntelliSense para el ejemplo de consulta J.

  7. En _Layout.cshtml, actualice las referencias de script para incluir library.js.

    <script src="~/js/app.js"></script>
<script src="~/js/library.js"></script>

  8. En index.cshtml, agregue el código HTML siguiente al final del archivo.

    <div>
  <p id="ts-example-2">jQuery version is:</p>
</div>

  9. Presione F5 (Depurar>Iniciar Depuración) para ejecutar la aplicación.

    La aplicación se abre en el explorador.

    Haga clic en Aceptar en la alerta para ver la página actualizada a La versión de jQuery es 3.3.1.

    Captura de pantalla que muestra el ejemplo de consulta J.

Pasos siguientes

Es posible que quiera obtener más información sobre el uso de TypeScript con ASP.NET Core. Si está interesado en la programación de Angular en Visual Studio, puede usar la extensión de servicio de lenguaje angular para Visual Studio.

ASP.NET Core y TypeScript

Extensión del servicio de lenguaje Angular