Convertir a TypeScript un proyecto del complemento de Office de Visual Studio

2025-05-12

Puede usar la plantilla del complemento de Office de Visual Studio para crear un complemento que use JavaScript y, a continuación, convertir el proyecto del complemento a TypeScript. Este artículo describe este proceso de conversión de un complemento de Excel. Puede usar el mismo proceso para convertir otros tipos de proyectos de complementos de Office de JavaScript a JavaScript en Visual Studio.

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

Nota:

Omita esta sección si ya tiene un proyecto existente.

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.
Utilizando el cuadro de búsqueda, escribaagregar. Seleccioneun complemento de Web de Excel,y luego seleccioneSiguiente.
Asigne un nombre al proyecto y seleccioneCrear.
En la ventana de diálogo Crear un complemento de Office, elija Agregar nuevas funcionalidades a Excel y, a continuación, elija Finalizar para crear el proyecto.
Visual Studio crea una solución y sus proyectos aparecen en el Explorador de soluciones. El archivo Home.html se abre en Visual Studio.

Convertir a TypeScript el proyecto del complemento

Agregar paquete Nuget

Abra el administrador de paquetes Nuget eligiendo Herramientas> Administrador de paquetesNuget>Administrar paquetes Nuget para la solución
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.

Nota:

En el proyecto TypeScript, puede tener una combinación de archivos TypeScript y JavaScript y el proyecto se compilará. Ello se debe a que TypeScript es un superconjunto con tipo de JavaScript que compila JavaScript.

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

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

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/**/*",
    "**/*"
  ]
}

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

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.
En el cuadro de diálogo Agregar nuevo elemento , busque archivo de configuración npm. Seleccione Agregar para crear un archivo package.json .
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"
  }
}
```
Guarde el archivo.
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 guardar) en "True". 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.

Halle el archivoHome.js y cambie su nombre por Home.ts.
Buscar el archivo ./Functions/FunctionFile.js y cambiar el nombre a FunctionFile.ts.
Buscar el archivo ./Scripts/MessageBanner.js y cambiar el nombre a MessageBanner.ts.
En ./Scripts/MessageBanner.ts, busque la línea_onResize(null); y reemplácelo con lo 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

En Visual Studio, presione F5 o elija 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 hospedará localmente en IIS.
En Excel, elija la pestaña Inicio y, a continuación, elija el botón Mostrar panel de tareas de la cinta de opciones para abrir el panel de tareas del complemento.
En la hoja de cálculo, seleccione las nueve celdas que contengan números.
Pulse el botón Highlight (Resaltar) en el panel de tareas para resaltar la celda del rango seleccionado que contiene el valor más alto.

Compartir a través de