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 de desarrollo de Visual Studio mediante TypeScript y ASP.NET Core, creará una aplicación web sencilla, agregará código de TypeScript y, a continuación, ejecutará la aplicación.

En Visual Studio 2022 y versiones posteriores, si desea 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 ASP.NET Core con TypeScript. Para 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:

  • Crear un proyecto de ASP.NET Core
  • Agregar el paquete NuGet para la compatibilidad con TypeScript
  • Agregar código de TypeScript
  • Ejecutar la aplicación
  • Agregar una biblioteca de terceros mediante npm

Requisitos previos

Debe tener instalado Visual Studio y la carga de trabajo Desarrollo web y 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 tiene que instalar la carga de trabajo pero ya tiene Visual Studio, vaya a Herramientas>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 MVC ASP.NET Core

Visual Studio administra los archivos de una aplicación en un proyecto. 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, vea ASP.NET Core con TypeScript en su lugar.

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

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

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

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

    Después de aplicar el filtro de idioma, elija Aplicación web de ASP.NET Core (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 instrucciones detalladas, consulte los Requisitos previos.

  4. En la ventana Configurar el nuevo proyecto, escriba un nombre para el proyecto en el cuadro Nombre del proyecto. Después, seleccione Siguiente.

  1. Seleccione la plataforma de destino recomendada (compatibilidad con .NET 8.0 o a largo plazo) y, a continuación, 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 se abre en el nuevo proyecto.

Agregar 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.

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

  3. Seleccione Instalar para instalar el paquete.

    Add NuGet package

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

  4. 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, seleccione 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.

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

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

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

    Esta configuración proporciona una introducción básica al uso de TypeScript. En otros escenarios, como cuando se usa 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, a continuación, 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 elija Agregar > Nuevo elemento. Elija el archivo TypeScript, escriba el nombre app.ts como nombre de archivo 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 app.ts a la carpeta scripts.

  8. Abra app.ts y agregue el siguiente código de 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 de IntelliSense con su código de TypeScript.

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

    View IntelliSense

    Seleccione lastName para volver a agregar el último nombre al código.

  9. Abra la carpeta Views/Home y luego Index.cshtml.

  10. Agregue el siguiente código HTML 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 luego _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.

Compilar la aplicación

  1. Seleccione Crear > Crear solución.

    Aunque la aplicación se compila automáticamente cuando la ejecuta, queremos fijarnos en algo que ocurre durante el proceso de compilación.

  2. Abra la carpeta wwwroot/js y encontrará dos nuevos archivos, app.js y el archivo de asignación de origen, app.js.map. El compilador de TypeScript genera estos archivos.

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

Ejecutar 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 with TypeScript

  2. Haga clic en el botón para mostrar el mensaje que especificamos en el archivo TypeScript.

Depurar la aplicación

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

    Set a breakpoint

  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 pone en pausa en el punto de interrupción. Ahora, puede inspeccionar variables y usar características del depurador.

Incorporación de compatibilidad con TypeScript para una biblioteca de terceros

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

    Nota:

    En el caso de los proyectos de ASP.NET Core, también se puede usar el Administrador de bibliotecas o yarn, en lugar de npm, para instalar los archivos JavaScript y CSS del lado cliente.

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

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

    Esto 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 se usa una plantilla distinta, es posible que también tenga que incluir el paquete npm de jQuery.

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

    Nota:

    En algunos escenarios, el Explorador de soluciones puede indicar que un paquete npm no está sincronizado con package.json debido a una incidencia conocida descrita aquí. Por ejemplo, es posible que el paquete aparezca como no instalado cuando sí que lo está. En la mayoría de los casos, se puede actualizar el Explorador de soluciones eliminando package.json, reiniciando Visual Studio y agregando de nuevo el archivo package.json, tal como se ha descrito 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, seleccione Mostrar todas las plantillas y 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 facilitar las cosas, este código muestra un mensaje mediante jQuery y una alerta.

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

    Screenshot that shows Intellisense results for the J Query example.

  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.

    Screenshot that shows the J Query example.

Pasos siguientes

Es posible que quiera obtener más información sobre cómo usar TypeScript con ASP.NET Core. Si le interesa la programación de Angular en Visual Studio, puede usar la extensión del servicio de lenguaje Angular para Visual Studio.

ASP.NET Core y TypeScript

Extensión del servicio de lenguaje Angular