[all hosts] (DevX) Refresh JS to TS in VS article

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 <kbd>F5</kbd> 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 <kbd>F5</kbd> 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)