You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/javascript/compile-typescript-code-npm.md
+22-6Lines changed: 22 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Compile and build TypeScript code using npm
3
3
description: Add TypeScript support to your Visual Studio projects by using the Node Package Manager (npm) package for portability across different platforms and environments.
Use the TypeScript npm package to add TypeScript support to projects based on the [JavaScript Project System (JSPS)](../javascript/javascript-in-visual-studio.md#project-templates), or *.esproj*. Starting in Visual Studio 2019, it's recommended that you use the npm package instead of the TypeScript SDK. The TypeScript npm package provides greater portability across different platforms and environments.
@@ -31,11 +31,11 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
31
31
32
32
::: moniker range=">=vs-2022"
33
33
For projects created using the JavaScript Project System (JSPS), or *.esproj*, no additional workloads are needed. You just need to install npm (https://www.npmjs.com/), which is included with Node.js.
34
-
35
-
For the older project type (.njsproj), you need to install the Node.js development workload and the Node.js runtime.
36
34
::: moniker-end
37
35
38
36
::: moniker range="vs-2019"
37
+
For the Node.js project type (.njsproj), you need to install the Node.js development workload and the Node.js runtime.
38
+
39
39
[Follow instructions](./tutorial-nodejs.md?toc=%252fvisualstudio%252fjavascript%252ftoc.json) to install the Node.js development workload and npm (https://www.npmjs.com/), which is included with Node.js.
40
40
41
41
For a simple Visual Studio integration, create your project using one of the Node.js TypeScript templates, such as the Blank Node.js Web Application template. Else, use either a Node.js JavaScript template included with Visual Studio and follow instructions here. Or, use an [Open Folder](../javascript/develop-javascript-code-without-solutions-projects.md) project.
@@ -45,7 +45,9 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
45
45
46
46
From Solution Explorer (right pane), open the *package.json* in the project root. The packages listed correspond to packages under the npm node in Solution Explorer. For more information, see [Manage npm packages](../javascript/npm-package-management.md).
47
47
48
-
For a Node.js project, you can install the TypeScript npm package using the command line or the IDE. To install using the IDE, right-click the npm node in Solution Explorer, choose **Install New npm package**, search for **TypeScript**, and install the package.
48
+
::: moniker range="vs-2019"
49
+
For the older Node.js project type, you can install the TypeScript npm package using the command line or the IDE. To install using the IDE, right-click the npm node in Solution Explorer, choose **Install New npm package**, search for **TypeScript**, and install the package.
50
+
::: moniker-end
49
51
50
52
Check the **npm** option in the **Output** window to see package installation progress. The installed package shows up under the **npm** node in Solution Explorer.
51
53
@@ -114,10 +116,17 @@ The [TypeScript npm package](https://www.npmjs.com/package/typescript) adds Type
114
116
For an example of using Vue.js with TypeScript, see [Create a Vue.js application](create-application-with-vuejs.md).
115
117
::: moniker-end
116
118
117
-
1. If you need to configure options such as the startup page, path to the Node.js runtime, application port, or runtime arguments, right-click the project node in Solution Explorer, and choose **Properties**.
119
+
1. If you need to configure build and deployment options such as the app URL or runtime commands, right-click the project node in Solution Explorer, and choose **Properties**.
120
+
121
+
::: moniker range=">=vs-2022"
122
+
>[!NOTE]
123
+
> When configuring third-party tools, projects using the JavaScript Project System (JSPS), or *.esproj*, don't use the paths that are configured under **Tools** > **Options** > **Projects and solutions** > **Web Package Management** > **External Web Tools**. These settings are used for other project types.
124
+
::: moniker-end
118
125
126
+
::: moniker range="vs-2019"
119
127
>[!NOTE]
120
128
> When configuring third-party tools, Node.js projects don't use the paths that are configured under **Tools** > **Options** > **Projects and solutions** > **Web Package Management** > **External Web Tools**. These settings are used for other project types.
129
+
::: moniker-end
121
130
122
131
1. Choose **Build > Build Solution**.
123
132
@@ -141,8 +150,15 @@ Press **Ctrl+F5** (or **Debug > Start Without Debugging**) to run the applicatio
141
150
142
151
You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and webpack.
143
152
153
+
::: moniker range=">=vs-2022"
154
+
-[NPM Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NpmTaskRunner64) - Adds support for npm scripts defined in *package.json*. Supports yarn.
155
+
-[Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for webpack.
156
+
::: moniker-end
157
+
158
+
::: moniker range="vs-2019"
144
159
-[NPM Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.NPMTaskRunner) - Adds support for npm scripts defined in *package.json*. Supports yarn.
145
160
-[Webpack Task Runner](https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebPackTaskRunner) - Adds support for webpack.
Copy file name to clipboardExpand all lines: docs/javascript/compile-typescript-code-nuget.md
+7-7Lines changed: 7 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Compile and build TypeScript code using NuGet
3
3
description: Add TypeScript support to your Visual Studio projects by using the NuGet package for portability across different platforms and environments.
4
-
ms.date: 10/23/2023
4
+
ms.date: 5/15/2025
5
5
ms.topic: conceptual
6
6
author: "mikejo5000"
7
7
ms.author: "mikejo"
@@ -34,7 +34,7 @@ If Visual Studio is installed, then the node.exe bundled with it will automatica
34
34
Visual Studio adds the NuGet package under the **Dependencies** node in Solution Explorer. The following package reference gets added to your *.csproj file.
@@ -48,7 +48,7 @@ If Visual Studio is installed, then the node.exe bundled with it will automatica
48
48
49
49
1. Open *tsconfig.json* and update to set the compiler options that you want.
50
50
51
-
The following is an example of a simple *tsconfig.json* file.
51
+
Use the following example, which shows a simple *tsconfig.json* file.
52
52
53
53
```json
54
54
{
@@ -75,14 +75,14 @@ If Visual Studio is installed, then the node.exe bundled with it will automatica
75
75
76
76
### Build the application
77
77
78
-
1. Add TypeScript (*.ts*) or TypeScript JSX (*.tsx*) files to your project, and then add TypeScript code. For a simple example of TypeScript, use the following:
78
+
1. Add TypeScript (*.ts*) or TypeScript JSX (*.tsx*) files to your project, and then add TypeScript code. For a simple example of TypeScript, use the following code:
79
79
80
80
```typescript
81
81
let message:string='Hello World';
82
82
console.log(message);
83
83
```
84
84
85
-
1. If you are using an older non-SDK style project, follow instructions in [Remove default imports](#remove-default-imports) before building.
85
+
1. If you're using an older non-SDK style project, follow instructions in [Remove default imports](#remove-default-imports) before building.
86
86
87
87
1. Choose **Build > Build Solution**.
88
88
@@ -157,7 +157,7 @@ Press **F5** or select the Start button at the top of the window.
157
157
158
158
In older ASP.NET Core projects that use the [non-SDK-style format](/nuget/resources/check-project-format), you may need to remove some project file elements.
159
159
160
-
If you are using the NuGet package for MSBuild support for a project, the project file must not import `Microsoft.TypeScript.Default.props` or `Microsoft.TypeScript.targets`. The files get imported by the NuGet package, so including them separately may cause unintended behavior.
160
+
If you're using the NuGet package for MSBuild support for a project, the project file must not import `Microsoft.TypeScript.Default.props` or `Microsoft.TypeScript.targets`. The files get imported by the NuGet package, so including them separately may cause unintended behavior.
161
161
162
162
1. Right-click the project and choose **Unload Project**.
163
163
@@ -167,7 +167,7 @@ If you are using the NuGet package for MSBuild support for a project, the projec
167
167
168
168
1. Remove references to `Microsoft.TypeScript.Default.props` and `Microsoft.TypeScript.targets`.
169
169
170
-
The imports to remove look similar to the following:
170
+
The imports to remove look similar to the following XML:
![learn-build-service-prod[bot]](https://avatars.githubusercontent.com/in/237442?v=4&size=40){kind=avatar}
0 commit comments