How to use TypeScript in browser? .NetCore WebApplication

OK, for those struggling with the same topic... I figured it out. Now you can have debuggable TypeScript in your .NetCore razor project.

So, these are the steps you have to follow:

1. Make sure you have node.js installed in Visual Studio. Just run Visual Studio Installer, click Modify button near your VS version, find module Node.js and make sure it's checked.
2. Do the steps required to have typescript in your project - follow this small article: https://learn.microsoft.com/pl-pl/visualstudio/javascript/tutorial-aspnet-with-typescript?view=vs-2019
3. Make sure that you have in your package.json things like (inside devDependencies):

"@types/jquery": "3.5.0",
"@types/bootstrap": "4.5.0",
"@types/jquery-validation-unobtrusive": "3.2.32"

and other that you use. These above just gives you TypeScript types for jQuery, bootstrap and jqueryValidation. JQuery, Bootstrap and JQueryValidation are defaultly used by .NetCore Razor Pages/MVC, so I suppose you use it as well.

4. Make sure that your tsconfig.json looks like that:

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

The most important here, I think, are:

• target set to ES6 (but you can try with ES5 also)
• esModuleInterop set to true
• module set to AMD (this means that modules will be loaded asynchronously - this is default for browsers, I think
• moduleResolution set to Node

5. In your .ts files use exports and imports. For example: person.ts:

export class Person
{
   //your code here
}

export function foo()
{
  //your code here
}

In other file, for example:

import { Person } from "./person";

export class ClassThatUsesPerson
{
    _person: Person;
   //your code goes here
}

Just make sure that you import your file WITHOUT "ts" extension, so: "./person" instead of "./person.ts". And "./" should be at the start

6. You can import other libraries that you use and have installed using npm - similar way. Let's say I use "autonumeric" library that I have installed by npm, so in my file I will import it like that:

import AutoNumeric from 'autonumeric'

7. Download library: requireJS (you will find it in google)
8. Make some changes to your _Layout.cshtml:

• get rid off jQuery and bootstrap from header. Provided that you have your requireJS copied into: "~/libs/requirejs.js", you should include it like that:

    <script src="~/lib/requirejs.js"></script>
    <script src="~/js/entrypoint.js"></script>

Now, I assume that you will keep your js files in "~/js" folder. So now, you should create there entrypoint.js which should look like that:

requirejs.config({
    baseUrl: "/js",
    shim: {
        bootstrap: {
            "deps": ["jquery"]
        }
    },
    paths: {
        jquery: "https://ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min",
        bootstrap: "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min",
        "jquery-validation": "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min",
        "jquery.validate.unobtrusive": "https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min"
    }
});

require(["jquery", "bootstrap", "app"], function (jq, bs, app) {
    app.App.init();
});

Now, some things: At the start you have to configure your requirejs lib (go to requirejs homepage and read aboutr configuration). In short: baseUrl is the default place where requirejs will search for your js files shim - this is needed for bootstrap to work properly paths - this is where you can define your modules paths. Just add here libraries that you don't have in your JS folder and would get from CDN or such. Those three here (jQuery, bootstrap and jQuery validations) are needed if you use jquery, bootstrap and jquery validation :) Important - make sure that you include here bootstrap.bundle.min, instead of bootstrap.min. The bundle version has some references inside (for example to popper.js) which makes things a lot of easier.

WARNING! Name of modules: "jquery-validation" and "jquery.validate.unobtrusive" are important. These modules have to be named exactly like that (especially jquery-validation). In other case validation will not work.

Now, after configuration is done, you can see in my file:

require(["jquery", "bootstrap", "app"], function (jq, bs, app) {
    app.App.init();
});

This just tells: Now load, jquery module, bootstrap module and app module. Notice that app module is my custom class. init() is static function inside App class. I do here things that normally would go to document.ready or body.onload.

In the last step - make sure that you DO NOT HAVE any <script src="..."> in your code. Now, using requirejs you load every script using require function.

So for example, somewhere in your page instead of having:

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

you should have:

require(["person"]);

or even, if person is a class and you want to create object of it:

var personObj;
require(["person"], function(personFile) {
  personObj = new personFile.Person();
});

That's it. Really simple, isn't it? ;) Hurray me!

Please check where you add the .js script references, perhaps the issue is that the related JS file doesn't add success or add after calling them.

From the Microsoft document, we can see that after create the TypeScript file, we need to rebuild the solution and generate the .js file. Then, add the script reference before the call to @RenderSection("Scripts", required: false) in the _Layout.cshtml, after that, we could call the related function in the TypeScript file and debug it.

Code like this:

<script src="~/js/app.js"></script>
<script src="~/js/ajaxmanager.js"></script>
@RenderSection("Scripts", required: false)

More detail information about using ASP.NET Core app with TypeScript, please check this article:

Create an ASP.NET Core app with TypeScript in Visual Studio