In this tutorial for Visual Studio development using ASP.NET Core and TypeScript, you create a simple web application, add some TypeScript code, and then run the app.

In this tutorial, you learn how to:

Prerequisites

You must have Visual Studio installed and the ASP.NET web development workload.

• If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

• If you need to install the workload but already have Visual Studio, go toTools >Get Tools and Features... to open the Visual Studio Installer. Choose theASP.NET and web development workload, then selectModify.

Create a new ASP.NET Core MVC project

Visual Studio manages files for a single application in aproject. The project includes source code, resources, and configuration files.

In this tutorial, you begin with a simple project containing code for an ASP.NET Core MVC app.

1. Open Visual Studio. If the start window isn't open, chooseFile >Start Window.

2. On the start window, chooseCreate a new project.

3. On theCreate a new project window, enterweb app in the search box. Next, chooseC# as the language.

   After you apply the language filter, chooseASP.NET Core Web App (Model-View-Controller), and then selectNext.

   Note

   If you don't see theASP.NET Core Web Application project template, you must add theASP.NET and web development workload. For detailed instructions, see thePrerequisites.

4. In theConfigure your new project window, enter a name for your project in theProject name box. Then, selectNext.

Visual Studio opens your new project.

Add some code

1. In Solution Explorer (right pane), right-click the project node and selectManage NuGet Packages for Solutions.

2. In theBrowse tab, search forMicrosoft.TypeScript.MSBuild.

3. SelectInstall to install the package.

   

   Visual Studio adds the NuGet package under theDependencies node in Solution Explorer.

4. Right-click the project node and selectAdd > New Item. Choose theTypeScript JSON Configuration File, and then selectAdd.

   If you don't see all the item templates, selectShow All Templates, and then choose the item template.

   Visual Studio adds thetsconfig.json file to the project root. You can use this file toconfigure options for the TypeScript compiler.

5. Opentsconfig.json and replace the default code with the following code:

   {  "compileOnSave": true,  "compilerOptions": {    "noImplicitAny": false,    "noEmitOnError": true,    "removeComments": false,    "sourceMap": true,    "target": "ES6",    "outDir": "wwwroot/js"  },  "include": [    "scripts/**/*"  ],  "exclude": [    "node_modules",    "wwwroot"  ]}

   TheoutDir option specifies the output folder for the plain JavaScript files that the TypeScript compiler transpiles.

   This configuration provides a basic introduction to using TypeScript. In other scenarios, such as when usinggulp or webpack, you might want a different intermediate location for the transpiled JavaScript files instead ofwwwroot/js. The location depends on your tools and configuration preferences.

6. In Solution Explorer, right-click the project node and selectAdd > New Folder. Use the namescripts for the new folder.

7. Right-click thescripts folder and selectAdd > New Item. Choose theTypeScript File, type the nameapp.ts for the filename, and then selectAdd.

   If you don't see all the item templates, selectShow All Templates, and then choose the item template.

   Visual Studio addsapp.ts to thescripts folder.

8. Openapp.ts and add the following TypeScript code.

   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");

   Visual Studio provides IntelliSense support for your TypeScript code.

   To try this feature, remove.lastName from thegreeter function, reenter the period (.), and notice the IntelliSense updates.

   

   SelectlastName to add the last name back to the code.

9. Open theViews/Home folder, and then openIndex.cshtml.

10. Add the following HTML code to the end of the file.

    <div>    <br />    <button type="button">        Click Me    </button></div>

11. Open theViews/Shared folder, and then open_Layout.cshtml.

12. Add the following script reference before the call to@await RenderSectionAsync("Scripts", required: false):

    <script src="~/js/app.js"></script>

13. SelectFile >Save All (Ctrl +Shift +S) to save your changes.

Build the application

1. SelectBuild > Build Solution.

   Although the app builds automatically when you run it, we want to take a look at something that happens during the build process.

2. Open thewwwroot/js folder to see two new files:app.js and the source map file,app.js.map. The TypeScript compiler generates these files.

   Source map files are required for debugging.

Run the application

1. PressF5 (Debug >Start Debugging) to run the application.

   The app opens in a browser.

   In the browser window, you see theWelcome heading and theClick Me button.

   

2. Select the button to display the message we specified in the TypeScript file.

Debug the application

1. Set a breakpoint in thegreeter function inapp.ts by clicking in the left margin in the code editor.

   

2. PressF5 to run the application.

   You might need to respond to a message to enable script debugging.

   Note

   Chrome or Edge is required for client-side script debugging.

3. When the page loads, pressClick Me.

   The application pauses at the breakpoint. Now, you can inspect variables and use debugger features.

Add TypeScript support for a third-party library

1. Follow the instructions innpm package management to add apackage.json file to your project. This task adds npm support to your project.

   Note

   For ASP.NET Core projects, you can also useLibrary Manager or yarn instead of npm to install client-side JavaScript and CSS files.

2. In this example, add a TypeScript definition file for jQuery to your project. Include the following code in yourpackage.json file.

   "devDependencies": {  "@types/jquery": "3.5.1"}

   This code adds TypeScript support for jQuery. The jQuery library itself is already included in the MVC project template (look under wwwroot/lib in Solution Explorer). If you're using a different template, you might need to include the jquery npm package as well.

3. If the package in Solution Explorer isn't installed, right-click the npm node and chooseRestore Packages.

   Note

   In some scenarios, Solution Explorer might indicate that an npm package is out of sync withpackage.json due to a known issue describedhere. For example, the package might appear as not installed when it is installed. In most cases, you can update Solution Explorer by deletingpackage.json, restarting Visual Studio, and re-adding thepackage.json file as described earlier in this article.

4. In Solution Explorer, right-click the scripts folder and chooseAdd >New Item.

   If you don't see all the item templates, chooseShow All Templates, and then choose the item template.

5. ChooseTypeScript File, typelibrary.ts, and chooseAdd.

6. Inlibrary.ts, add the following code.

   var jqtest = {  showMsg: function (): void {     let v: any = jQuery.fn.jquery.toString();     let content: any = $("#ts-example-2")[0].innerHTML;     alert(content.toString() + " " + v + "!!");     $("#ts-example-2")[0].innerHTML = content + " " + v + "!!";  }};jqtest.showMsg();

   For simplicity, this code displays a message using jQuery and an alert.

   With TypeScript type definitions for jQuery added, you get IntelliSense support on jQuery objects when you enter a period (.) following a jQuery object, as shown here.

   

7. In_Layout.cshtml, update the script references to includelibrary.js.

   <script src="~/js/app.js"></script><script src="~/js/library.js"></script>

8. InIndex.cshtml, add the following HTML to the end of the file.

   <div>  <p>jQuery version is:</p></div>

9. PressF5 (Debug >Start Debugging) to run the application.

   The app opens in the browser.

   SelectOK in the alert to see the page updated tojQuery version is: 3.3.1!!.

   

Next steps

You might want to learn more details about using TypeScript with ASP.NET Core. If you're interested in Angular programming in Visual Studio, you can use theAngular language service extension for Visual Studio.