diff --git a/docs/develop/convert-javascript-to-typescript.md b/docs/develop/convert-javascript-to-typescript.md index c1e04935f..6ce6d07ae 100644 --- a/docs/develop/convert-javascript-to-typescript.md +++ b/docs/develop/convert-javascript-to-typescript.md @@ -1,18 +1,26 @@ --- -title: Convert an Office Add-in project in Visual Studio to TypeScript -description: Learn how to convert an Office Add-in project in Visual Studio to use TypeScript. +title: Convert an Office Add-in from JavaScript to TypeScript in Visual Studio +description: Convert a Visual Studio Office Add-in project from JavaScript to TypeScript by adding TypeScript build settings and updating project files. ms.topic: how-to -ms.date: 05/12/2025 +ms.date: 05/26/2026 ms.localizationpriority: medium +ai-usage: ai-assisted --- -# Convert an Office Add-in project in Visual Studio to TypeScript +# Convert an Office Add-in from JavaScript to TypeScript in Visual Studio -You can use the Office Add-in template in Visual Studio to create an add-in that uses JavaScript, and then convert that add-in project to TypeScript. This article describes this conversion process for an Excel add-in. You can use the same process to convert other types of Office Add-in projects from JavaScript to TypeScript in Visual Studio. +If your Office Add-in project in Visual Studio starts in JavaScript, you can migrate it to TypeScript without rebuilding the project. This article shows the process for an Excel add-in. You can use the same steps for other Office Add-in project types in Visual Studio. + +## What you'll do + +- Add the `Microsoft.TypeScript.MSBuild` package so TypeScript files transpile during build. +- Add `tsconfig.json` and `package.json` settings for TypeScript and type definitions. +- Rename JavaScript files from `.js` to `.ts` and update code that needs TypeScript changes. +- Run the converted add-in in Excel. ## Prerequisites -- [Visual Studio 2022 or later](https://www.visualstudio.com/vs/) with the **Office/SharePoint development** workload installed +- [Visual Studio 2022 or later](https://visualstudio.microsoft.com/downloads/) with the **Office/SharePoint development** workload installed > [!TIP] > If you've previously installed Visual Studio, [use the Visual Studio Installer](/visualstudio/install/modify-visual-studio) to ensure that the **Office/SharePoint development** workload is installed. If this workload is not yet installed, use the Visual Studio Installer to [install it](/visualstudio/install/modify-visual-studio#modify-workloads). @@ -26,19 +34,19 @@ You can use the Office Add-in template in Visual Studio to create an add-in that 1. In Visual Studio, choose **Create a new project**. If the Visual Studio development environment is already open, you can create a new project by choosing **File** > **New** > **Project** on the menu bar. -1. Using the search box, enter **add-in**. Choose **Excel Web Add-in**, then select **Next**. +1. Using the search box, enter **add-in**. Select **Excel Web Add-in**, and then select **Next**. 1. Name your project and select **Create**. -1. In the **Create Office Add-in** dialog window, choose **Add new functionalities to Excel**, and then choose **Finish** to create the project. +1. In the **Create Office Add-in** dialog, select **Add new functionalities to Excel**, and then select **Finish** to create the project. 1. Visual Studio creates a solution and its two projects appear in **Solution Explorer**. The **Home.html** file opens in Visual Studio. ## Convert the add-in project to TypeScript -### Add Nuget package +### Add a NuGet package -1. Open the Nuget package manager by choosing **Tools** > **Nuget Package Manager** > **Manage Nuget Packages for Solution** +1. Open the NuGet Package Manager by selecting **Tools** > **NuGet Package Manager** > **Manage NuGet Packages for Solution**. 1. Select the **Browse** tab. Search for and select **Microsoft.TypeScript.MSBuild**. Install this package to the ASP.NET web project, or update it if it's already installed. The ASP.NET web project has your project name with the text `Web` appended to the end. This will ensure the project will transpile to JavaScript when the build runs. > [!NOTE] @@ -47,7 +55,7 @@ You can use the Office Add-in template in Visual Studio to create an add-in that ### Create a TypeScript config file 1. In **Solution Explorer**, right-click (or select and hold) the ASP.NET web project and choose **Add** > **New Item**. The ASP.NET web project has your project name with the text `Web` appended to the end. -1. In the **Add New Item** dialog, search for and select **TypeScript JSON configuration File**. Select **Add** to create a **tsconfig.json** file. +1. In the **Add New Item** dialog, search for and select **TypeScript JSON Configuration File**. Select **Add** to create a **tsconfig.json** file. 1. Update the **tsconfig.json** file to also have an `include` section as shown in the following JSON. ```json @@ -74,7 +82,7 @@ You can use the Office Add-in template in Visual Studio to create an add-in that } ``` -1. Save the file. For more information on **tsconfig.json** settings, see [What is a tsconfig.json?](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) +1. Save the file. For more information on **tsconfig.json** settings, see [What is a tsconfig.json?](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). ### Create an npm configuration file @@ -94,7 +102,7 @@ You can use the Office Add-in template in Visual Studio to create an add-in that ``` 1. Save the file. -1. Open the npm project properties by going to **Tools** > **Options**, then **Projects and Solutions** > **Web Package Management** > **Package Restore**. Set both **Restore On Project Open** and **Restore On Save** to "True". Select **OK** to save the settings. +1. Open npm project properties by going to **Tools** > **Options**, then **Projects and Solutions** > **Web Package Management** > **Package Restore**. Set both **Restore On Project Open** and **Restore On Save** to `True`. Select **OK** to save the settings. ### Update the JavaScript files @@ -106,34 +114,36 @@ Change your JavaScript files (**.js**) to TypeScript files (**.ts**). Then, make 1. Find the **./Scripts/MessageBanner.js** file and rename it to **MessageBanner.ts**. -1. In **./Scripts/MessageBanner.ts**, find the line `_onResize(null);` and replace it with the following: +1. In **./Scripts/MessageBanner.ts**, find the line `_onResize(null);` and replace it with the following code. - ```TypeScript + ```typescript _onResize(); ``` The JavaScript files generated by Visual Studio do not contain any TypeScript syntax. You should consider updating them. For example, the following code shows how to update the parameters to `showNotification` to include the string types. ```typescript - function showNotification(header: string, content: string) { - $("#notification-header").text(header); - $("#notification-body").text(content); - messageBanner.showBanner(); - messageBanner.toggleExpansion(); - } +function showNotification(header: string, content: string) { + $("#notification-header").text(header); + $("#notification-body").text(content); + messageBanner.showBanner(); + messageBanner.toggleExpansion(); +} ``` ## Run the converted add-in project -1. In Visual Studio, press F5 or choose the **Start** button to launch Excel with the **Show Taskpane** add-in button displayed on the ribbon. The add-in will be hosted locally on IIS. +1. In Visual Studio, press F5 or select the **Start** button to launch Excel with the **Show Taskpane** add-in button displayed on the ribbon. The add-in is hosted locally on IIS. -1. In Excel, choose the **Home** tab, and then choose the **Show Taskpane** button on the ribbon to open the add-in task pane. +1. In Excel, select the **Home** tab, and then select the **Show Taskpane** button on the ribbon to open the add-in task pane. 1. In the worksheet, select the nine cells that contain numbers. -1. Press the **Highlight** button on the task pane to highlight the cell in the selected range that contains the highest value. +1. In the task pane, select **Highlight** to highlight the cell in the selected range that contains the highest value. ## See also -- [Promise implementation discussion on StackOverflow](https://stackoverflow.com/questions/44461312/office-addins-file-in-its-typescript-version-doesnt-work) +- [Develop Office Add-ins with Visual Studio](develop-add-ins-visual-studio.md) +- [Build an Excel task pane add-in with Visual Studio](../quickstarts/excel-quickstart-vs.md) +- [Publish your add-in using Visual Studio](../publish/package-your-add-in-using-visual-studio.md) - [Office Add-in samples on GitHub](https://github.com/OfficeDev/Office-Add-in-samples)