![\"Visual](\"/images/tutorials/aspnet/createwebapp.png\")
First, install ASP.NET Core if you need it. This quick-start guide requires Visual Studio 2015 or 2017.
\nNext, if your version of Visual Studio does not already have the latest TypeScript, you can install it.
\n
![\"Visual](\"/images/tutorials/aspnet/namewebapp.png\")
![\"Visual](\"/images/tutorials/aspnet/emptytemplate.png\")
Run the application and make sure that it works.
\n![\"A](\"/images/tutorials/aspnet/workingsite.png\")
Open Dependencies > Manage NuGet Packages > Browse. Search and install Microsoft.AspNetCore.StaticFiles and Microsoft.TypeScript.MSBuild:
![\"The](\"/images/tutorials/aspnet/downloaddependency.png\")
Open up your Startup.cs file and edit your Configure function to look like this:
public void Configure(IApplicationBuilder app, IHostingEnvironment env)\n{\n if (env.IsDevelopment())\n {\n app.UseDeveloperExceptionPage();\n }\n\n app.UseDefaultFiles();\n app.UseStaticFiles();\n}\nYou may need to restart VS for the red squiggly lines below UseDefaultFiles and UseStaticFiles to disappear.
Next we will add a new folder and call it scripts.
![\"The](\"/images/tutorials/aspnet/newfolder.png\")
![](\"/images/tutorials/aspnet/scripts.png\")
Right click on scripts and click New Item. Then choose TypeScript File and name the file app.ts
![\"A](\"/images/tutorials/aspnet/tsfile.png\")
Add the following code to the app.ts file.
\ntsfunction sayHello() {\n const compiler = (document.getElementById(\"compiler\") as HTMLInputElement)\n .value;\n const framework = (document.getElementById(\"framework\") as HTMLInputElement)\n .value;\n return `Hello from ${compiler} and ${framework}!`;\n}
Configure the TypeScript compiler
\nFirst 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
![\"A](\"/images/tutorials/aspnet/tsconfig.png\")
Replace the contents of the tsconfig.json file with:
\njson{\n \"compilerOptions\": {\n \"noEmitOnError\": true,\n \"noImplicitAny\": true,\n \"sourceMap\": true,\n \"target\": \"es6\"\n },\n \"files\": [\"./app.ts\"],\n \"compileOnSave\": true\n}
onEmitOnError : 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.
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.
![\"Screenshot](\"/images/tutorials/aspnet/packagejson.png\")
Inside the \"devDependencies\" section of the package.json file, add gulp and del
\njson\"devDependencies\": {\n \"gulp\": \"4.0.2\",\n \"del\": \"5.1.0\"\n}
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.
\nAfter you should see an npm folder in your solution explorer
![\"Screenshot](\"/images/tutorials/aspnet/npm.png\")
Right click on the project and click New Item. Then choose JavaScript File and use the name of gulpfile.js
\njs/// <binding AfterBuild='default' Clean='clean' />\n/*\nThis file is the main entry point for defining Gulp tasks and using Gulp plugins.\nClick here to learn more. http://go.microsoft.com/fwlink/?LinkId=518007\n*/\n\nvar gulp = require(\"gulp\");\nvar del = require(\"del\");\n\nvar paths = {\n scripts: [\"scripts/**/*.js\", \"scripts/**/*.ts\", \"scripts/**/*.map\"],\n};\n\ngulp.task(\"clean\", function () {\n return del([\"wwwroot/scripts/**/*\"]);\n});\n\ngulp.task(\"default\", function () {\n gulp.src(paths.scripts).pipe(gulp.dest(\"wwwroot/scripts\"));\n});
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.
\nNow right-click on gulpfile.js and click Task Runner Explorer.
![\"Screenshot](\"/images/tutorials/aspnet/taskrunner.png\")
If ‘default’ and ‘clean’ tasks don’t show up, refresh the explorer:
\n![\"Screenshot](\"/images/tutorials/aspnet/taskrunnerrefresh.png\")
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
<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"utf-8\" />\n <script src=\"scripts/app.js\"></script>\n <title></title>\n</head>\n<body>\n <div id=\"message\"></div>\n <div>\n Compiler: <input id=\"compiler\" value=\"TypeScript\" onkeyup=\"document.getElementById('message').innerText = sayHello()\" /><br />\n Framework: <input id=\"framework\" value=\"ASP.NET\" onkeyup=\"document.getElementById('message').innerText = sayHello()\" />\n </div>\n</body>\n</html>\n![\"A](\"https://media.giphy.com/media/U3mTibRAx34DG3zhAN/giphy.gif\")
![\"An](\"/images/tutorials/aspnet/debugger.png\")
Congrats you’ve built your own .NET Core project with a TypeScript frontend.
","headings":[{"value":"Install ASP.NET Core and TypeScript","depth":2},{"value":"Create a new project","depth":2},{"value":"Set up the server","depth":3},{"value":"Add TypeScript","depth":2},{"value":"Add TypeScript code","depth":2},{"value":"Add example code","depth":3},{"value":"Set up the build","depth":2},{"value":"Set up NPM","depth":4},{"value":"Set up gulp","depth":4},{"value":"Write a HTML page","depth":2},{"value":"Test","depth":2},{"value":"Debug","depth":2}],"frontmatter":{"permalink":"/docs/handbook/asp-net-core.html","title":"ASP.NET Core","disable_toc":null,"oneline":"Using TypeScript in ASP.NET Core"}},"prev":null,"next":null},"pageContext":{"id":"asp.net-core","slug":"/docs/handbook/asp-net-core.html","repoPath":"/packages/documentation/copy/en/tutorials/ASP.NET Core.md","lang":"en","modifiedTime":"2020-08-07T17:00:36.347Z"}}}