ASP.NET Core + TypeScript

    Next, if your version of Visual Studio does not already have the latest TypeScript, you can install it.

    Create a new project

    • Choose File
    • Choose New Project (Ctrl + Shift + N)
    • Search for .NET Core in the project search bar

    • Select ASP.NET Core Web Application and press the Next button

    • Name your project and solution. After select the Create buttonASP.NET Core - 图2

    Run the application and make sure that it works.

    Set up the server

    Open Dependencies > Manage NuGet Packages > Browse. Search and install and Microsoft.TypeScript.MSBuild:

    ASP.NET Core - 图5

    Open up your Startup.cs file and edit your Configure function to look like this:

    You may need to restart VS for the red squiggly lines below UseDefaultFiles and UseStaticFiles to disappear.

    Add TypeScript

    Next we will add a new folder and call it scripts.

    Right click on scripts and click New Item. Then choose TypeScript File and name the file app.ts

    ASP.NET Core - 图8

    Add example code

    Add the following code to the app.ts file.

    1. function sayHello() {
    2.     const compiler = (document.getElementById("compiler") as HTMLInputElement).value;
    3.     const framework = (document.getElementById("framework") as HTMLInputElement).value;
    4.     return `Hello from ${compiler} and ${framework}!`;
    5. }

    Set up the build

    Configure the TypeScript compiler

    First we need to tell TypeScript how to build. Right click on scripts and click New Item. Then choose TypeScript Configuration File and use the default name of tsconfig.json

    Replace the contents of the tsconfig.json file with:

    • : Do not emit outputs if any errors were reported.
    • noImplicitAny : Raise error on expressions and declarations with an implied any type.
    • sourceMap : Generates corresponding .map file.
    • target : Specify ECMAScript target version.

    Note: "ESNext" targets latest supported

    "noImplicitAny" is good idea whenever you’re writing new code — you can make sure that you don’t write any untyped code by mistake. "compileOnSave" makes it easy to update your code in a running web app.

    Set up NPM #

    We need to setup NPM so that JavaScript packages can be downloaded. Right click on the project and select New Item. Then choose NPM Configuration File and use the default name of package.json.

    ASP.NET Core - 图10

    1. "devDependencies": {
    2.     "gulp": "4.0.2",
    3.     "del": "5.1.0"
    4. }

    Visual Studio should start installing gulp and del as soon as you save the file. If not, right-click package.json and then Restore Packages.

    After you should see an npm folder in your solution explorer

    Set up gulp #

    Right click on the project and click New Item. Then choose JavaScript File and use the name of gulpfile.js

    The first line tells Visual Studio to run the task ‘default’ after the build finishes. It will also run the ‘clean’ task when you ask Visual Studio to clean the build.

    Now right-click on and click Task Runner Explorer.

    ASP.NET Core - 图12

    If ‘default’ and ‘clean’ tasks don’t show up, refresh the explorer:

    Right click on the wwwroot folder (if you don’t see the folder try building the project) and add a New Item named index.html inside. Use the following code for index.html 

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4.     <script src="scripts/app.js"></script>
    5.     <title></title>
    6. </head>
    7. <body>
    8.     <div id="message"></div>
    9.     <div>
    10.         Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
    11.         Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
    12.     </div>
    13. </body>

    Test

    • Run the project
    • As you type on the boxes you should see the message appear/change!ASP.NET Core - 图14

    Debug

    • In Edge, press F12 and click the Debugger tab.
    • Look in the first localhost folder, then scripts/app.ts
    • Put a breakpoint on the line with return.

    Congrats you’ve built your own .NET Core project with a TypeScript frontend.