Conversión de un complemento de Office de JavaScript a TypeScript en Visual Studio

Si el proyecto de complemento de Office en Visual Studio se inicia en JavaScript, puede migrarlo a TypeScript sin volver a compilar el proyecto. En este artículo se muestra el proceso de un complemento de Excel. Puede usar los mismos pasos para otros tipos de proyecto de complemento de Office en Visual Studio.

Lo que harás

• Agregue el Microsoft.TypeScript.MSBuild paquete para que los archivos TypeScript se transpile durante la compilación.
• Agregue tsconfig.json y package.json la configuración de TypeScript y las definiciones de tipo.
• Cambie el nombre de los archivos JavaScript de .js a .ts y actualice el código que necesita cambios de TypeScript.
• Ejecute el complemento convertido en Excel.

Requisitos previos

• Visual Studio 2022 o posterior con la carga de trabajo de desarrollo de Office/SharePoint instalada

  Sugerencia

  Si ya ha instalado Visual Studio, use el Instalador de Visual Studio para asegurarse de que la carga de trabajo Desarrollo de Office y SharePoint esté instalada. Si aún no está instalada esta carga de trabajo, use el instalador de Visual Studio para instalarla.

• Excel 2016 o posterior.

Creación del proyecto de complemento

1. En Visual Studio, seleccione Crear un nuevo proyecto. Si el entorno de desarrollo de Visual Studio ya está abierto, puede crear un proyecto eligiendo Archivo>nuevo>proyecto en la barra de menús.

2. Utilizando el cuadro de búsqueda, escribaagregar. Seleccione Complemento web de Excel y, a continuación, seleccione Siguiente.

3. Asigne un nombre al proyecto y seleccioneCrear.

4. En el cuadro de diálogo Crear complemento de Office , seleccione Agregar nuevas funcionalidades a Excel y, a continuación, seleccione Finalizar para crear el proyecto.

5. Visual Studio crea una solución, y los dos proyectos que contiene aparecen en el Explorador de soluciones. El archivo Home.html se abre en Visual Studio.

Convertir a TypeScript el proyecto del complemento

Agregar un paquete NuGet

1. Abra el Administrador de paquetes NuGet seleccionando Herramientas>Administrador de paquetes> NuGetAdministrar paquetes NuGet para la solución.
2. Seleccione la pestaña Examinar . Busque y seleccione Microsoft.TypeScript.MSBuild. Instale este paquete en el proyecto web ASP.NET o actualícelo si ya está instalado. El proyecto web ASP.NET tiene el nombre del proyecto con el texto Web anexado al final. Esto garantizará que el proyecto se transpile a JavaScript cuando se ejecute la compilación.

Creación de un archivo de configuración de TypeScript

1. En Explorador de soluciones, haga clic con el botón derecho (o mantenga presionado) el proyecto web ASP.NET y elija Agregar>nuevo elemento. El proyecto web ASP.NET tiene el nombre del proyecto con el texto Web anexado al final.

2. En el cuadro de diálogo Agregar nuevo elemento , busque y seleccione Archivo de configuración JSON de TypeScript. Seleccione Agregar para crear un archivo tsconfig.json .

3. Actualice el archivo tsconfig.json para que también tenga una include sección como se muestra en el siguiente JSON.

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "lib": [ 
         "es2015",
         "dom"
       ]
     },
     "exclude": [
       "node_modules",
       "wwwroot"
     ],
     "include": [
       "scripts/**/*",
       "**/*"
     ]
   }
   

4. Guarde el archivo. Para obtener más información sobre la configuración de tsconfig.json , consulte ¿Qué es un tsconfig.json?.

Creación de un archivo de configuración npm

1. En Explorador de soluciones, haga clic con el botón derecho (o mantenga presionado) el proyecto web ASP.NET y elija Agregar>nuevo elemento. El proyecto web ASP.NET tiene el nombre del proyecto con el texto Web anexado al final.

2. En el cuadro de diálogo Agregar nuevo elemento , busque archivo de configuración npm. Seleccione Agregar para crear un archivo package.json .

3. Actualice el archivo package.json para que el @types/jquery paquete se muestre en la devDependencies sección , como se muestra en el siguiente código JSON.

   {
     "version": "1.0.0",
     "name": "asp.net",
     "private": true,
     "devDependencies": {
       "@types/jquery": "^3.5.30"
     }
   }
   

4. Guarde el archivo.

5. Abra las propiedades del proyecto npm. Para ello, vaya aOpciones de herramientas> y, a continuación,Restauración de paquetes deadministración de> paquetes web de proyectos y soluciones>. Establezca Restore On Project Open (Restaurar en proyecto abierto) y Restore On Save (Restaurar al guardarTrue) en . Seleccione Aceptar para guardar la configuración.

Actualización de los archivos de JavaScript

Cambie los archivos de JavaScript (.js) a archivos TypeScript (.ts). A continuación, realice los cambios necesarios para que se compilen. En esta sección se describen los archivos predeterminados de un nuevo proyecto.

1. Halle el archivoHome.js y cambie su nombre por Home.ts.

2. Buscar el archivo ./Functions/FunctionFile.js y cambiar el nombre a FunctionFile.ts.

3. Buscar el archivo ./Scripts/MessageBanner.js y cambiar el nombre a MessageBanner.ts.

4. En ./Scripts/MessageBanner.ts, busque la línea _onResize(null); y reemplácela por el código siguiente.

   _onResize();
   

Los archivos JavaScript generados por Visual Studio no contienen ninguna sintaxis de TypeScript. Debe considerar la posibilidad de actualizarlos. Por ejemplo, el código siguiente muestra cómo actualizar los parámetros para showNotification incluir los tipos de cadena.

function showNotification(header: string, content: string) {
  $("#notification-header").text(header);
  $("#notification-body").text(content);
  messageBanner.showBanner();
  messageBanner.toggleExpansion();
}

Ejecutar el proyecto del complemento convertido

1. En Visual Studio, presione F5 o seleccione el botón Inicio para iniciar Excel con el botón Mostrar complemento panel de tareas que se muestra en la cinta de opciones. El complemento se hospeda localmente en IIS.

2. En Excel, seleccione la pestaña Inicio y, a continuación, seleccione el botón Mostrar panel de tareas de la cinta de opciones para abrir el panel de tareas del complemento.

3. En la hoja de cálculo, seleccione las nueve celdas que contengan números.

4. En el panel de tareas, seleccione Resaltar para resaltar la celda del rango seleccionado que contiene el valor más alto.

Consulte también

• Desarrollar complementos de Office con Visual Studio
• Compilación de un complemento de panel de tareas de Excel con Visual Studio
• Publicar el complemento con Visual Studio
• Ejemplos de complementos de Office en GitHub