This article demonstrates how to create and use an application in ASP.NET Core using TypeScript (2.6) with RequireJS (2.3.5) in C#. This article starts with the introduction of the ASP.NET Core. After that, it demonstrates how to implement TypeScript (2.6) with RequireJS (2.3.5).

Creating an ASP.NET Core application

Step 1

Step 2Once you click on the OK button you will get an empty created project as shown in the below screenshot.

Step 3Create folders in wwwroot as below.

Download required libs in order to start working on it. And dump into “libs” folder.

Save the project setting and re-build the solution and you will get the output as the below screen:

Step 6Add the below code in index.html.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script data-main="scripts/js/config" src="libs/require.js"></script>

</head>

<body>

<h1 id="msg">Home Page !</h1>

</body>

</html>

Step 7Add the below code in “src/config.ts”.

declare var requirejs: any;

requirejs.config({

baseUrl: 'scripts',

paths: {

app: 'js/app',

jquery:'libs/jquery-3.3.1.min'

}

});

requirejs(['app'], function (app) {});

Step 8Add the below code in “src/app.ts”.

import { LandingPage } from "./app/LandingPage"

var obj = new LandingPage();

Step 9Create one file “LandingPage.ts” in folder “src/app” add code.

exportclass LandingPage {

constructor() {

console.log("This message is comming from Landing Page!");

}

}

requirejs(['jquery'], function ($) {

$("#msg").text("This message is comming from Landing Page!");

});

Now the final project output will be shown as below:

Step 10Add the below lines of code in “Statup.cs”

DefaultFilesOptions DefaultFile = new DefaultFilesOptions();

DefaultFile.DefaultFileNames.Clear();

DefaultFile.DefaultFileNames.Add("index.html");

app.UseDefaultFiles(DefaultFile);

// For the wwwroot folder

app.UseStaticFiles();

//app.Run(async (context) =>

//{

// await context.Response.WriteAsync("Hello World!");

//});

See the below screenshot:

Step 11Now run the application and see the output.

Since this message is coming from “wwwroot/src/app/LandingPage.ts”
which is referenced in “wwwroot/src/app.ts” which is also referenced
in “wwwroot/src/config.ts” which is again referenced in “wwwroot/index.html”
so we can say that our APS.NET Core application has implemented with TypeScript
(2.6) & RequireJS (2.3.5) and working perfectly fine.