Merge pull request #15323 from Mikejo5000/mikejo-br30

Update tsconfig for articles on compiling TypeScript

Author: prmerger-automator[bot]

docs/javascript/compile-typescript-code-nuget.md

@@ -1,7 +1,7 @@
 ---
 title: Compile and build TypeScript code using NuGet
 description: Add TypeScript support to your Visual Studio projects by using the NuGet package for portability across different platforms and environments.
-ms.date: 5/15/2025
+ms.date: 4/27/2026
 ms.topic: how-to
 author: "mikejo5000"
 ms.author: "mikejo"
@@ -51,19 +51,25 @@ If Visual Studio is installed, then the node.exe bundled with it will automatica
    Use the following example, which shows a simple *tsconfig.json* file.
 
    ```json
-   {
-     "compilerOptions": {
-       "noImplicitAny": false,
-       "noEmitOnError": true,
-       "removeComments": false,
-       "sourceMap": true,
-       "target": "es5",
-       "outDir": "wwwroot/js"
-     },
-     "include": [
-       "scripts/**/*"
-     ]
-   }
+    {
+      "compileOnSave": true,
+      "compilerOptions": {
+        "noImplicitAny": false,
+        "noEmitOnError": true,
+        "removeComments": false,
+        "sourceMap": true,
+        "target": "ES6",
+        "rootDir": "./scripts",
+        "outDir": "wwwroot/js"
+      },
+      "include": [
+        "scripts/**/*"
+      ],
+      "exclude": [
+        "node_modules",
+        "wwwroot"
+      ]
+    }
    ```
 
    In this example:
@@ -92,16 +98,6 @@ If Visual Studio is installed, then the node.exe bundled with it will automatica
 
    Source map files are required for debugging.
 
-1. If you want to compile every time you save the project, use the *compileOnSave* option in *tsconfig.json*.
-
-   ```json
-   {
-      "compileOnSave":  true,
-      "compilerOptions": {
-      }
-   }
-   ```
-
 For an example of using gulp with the Task Runner to build your app, see [ASP.NET Core and TypeScript](https://www.typescriptlang.org/docs/handbook/asp-net-core.html).
 
 If you run into issues where Visual Studio is using a version of Node.js or a third-party tool that is different than what the version you expected, you may need to set the path for Visual Studio to use. Choose **Tools** > **Options**. Under **Projects and solutions**, choose **Web Package Management** > **External Web Tools**.

docs/javascript/tutorial-aspnet-with-typescript.md

@@ -92,24 +92,25 @@ Visual Studio opens your new project.
 1. Open `tsconfig.json` and replace the default code with the following code:
 
    ```json
-   {
-     "compileOnSave": true,
-     "compilerOptions": {
-       "noImplicitAny": false,
-       "noEmitOnError": true,
-       "removeComments": false,
-       "sourceMap": true,
-       "target": "ES6",
-       "outDir": "wwwroot/js"
-     },
-     "include": [
-       "scripts/**/*"
-     ],
-     "exclude": [
-       "node_modules",
-       "wwwroot"
-     ]
-   }
+    {
+      "compileOnSave": true,
+      "compilerOptions": {
+        "noImplicitAny": false,
+        "noEmitOnError": true,
+        "removeComments": false,
+        "sourceMap": true,
+        "target": "ES6",
+        "rootDir": "./scripts",
+        "outDir": "wwwroot/js"
+      },
+      "include": [
+        "scripts/**/*"
+      ],
+      "exclude": [
+        "node_modules",
+        "wwwroot"
+      ]
+    }
    ```
 
    The *outDir* option specifies the output folder for the plain JavaScript files that the TypeScript compiler transpiles.
@@ -127,28 +128,31 @@ Visual Studio opens your new project.
 1. Open `app.ts` and add the following TypeScript code.
 
    ```ts
-   function TSButton() {
-      let name: string = "Fred";
-      document.getElementById("ts-example").innerHTML = greeter(user);
-   }
-
-   class Student {
-      fullName: string;
-      constructor(public firstName: string, public middleInitial: string, public lastName: string) {
-         this.fullName = firstName + " " + middleInitial + " " + lastName;
-      }
-   }
-
-   interface Person {
-      firstName: string;
-      lastName: string;
-   }
-
-   function greeter(person: Person) {
-      return "Hello, " + person.firstName + " " + person.lastName;
-   }
-
-   let user = new Student("Fred", "M.", "Smith");
+    function TSButton() {
+        let name: string = "Fred";
+        const element = document.getElementById("ts-example");
+        if (element) {
+            element.innerHTML = greeter(user);
+        }
+    }
+    
+    class Student {
+        fullName: string;
+        constructor(public firstName: string, public middleInitial: string, public lastName: string) {
+            this.fullName = firstName + " " + middleInitial + " " + lastName;
+        }
+    }
+    
+    interface Person {
+        firstName: string;
+        lastName: string;
+    }
+    
+    function greeter(person: Person) {
+        return "Hello, " + person.firstName + " " + person.lastName;
+    }
+    
+    let user = new Student("Fred", "M.", "Smith");
    ```
 
    Visual Studio provides IntelliSense support for your TypeScript code.