In my previous job I used to work with angular and one of the things I absolutely loved was working with Typescript and how it was well integrated into the project structure. Recently at my current job I started using Blazor and one of the things I wanted to do was to make the Typescript integration with Visual Studio as smooth as possible. In this article I will show you how to use

The full source code can be found here:

Let's create a blazor webassembly project in Visual Studio. Choose the Blazor webassembly template:

In the next screen choose the hosted model, this would host the blazor client app and API project together. If you do not need an API and want client project to be a standalone then uncheck this option, this will not make a difference to what we are trying to achieve in this article (but make sure you run the npm commands in the root of the client project).

Once the project is created there should be three projects created for you the Client, Server and the Shared. We are mostly interested in the client project, and we will mostly work inside that folder. Let's turn off Typrscript compilation in Visual Studio by adding TypeScriptCompileBlocked to the client project file.

<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>

Now let's create the Typescript files that we are going to compile and call from the blazor app. Find these files on git hub:

The models folder has couple helper files. The Calculator file contains the function that we are going to call from blazor c# code. We export the Calculator class in the index.ts file (this will be the entry point for rollup).

A tsconfig file is needed for typescript compilation. Let's add one to the root folder of the client project.

Now Let's start the build setup for the project by running the npm init command in the client folder. This command will ask your inputs on things like name, author and so on, fill those as you wish.

This will create a package.json and a package-lock.json in the client folder. Let's add the required packages. Add this section to the package.json file before the ending curly braces.

"devDependencies": {
	"@rollup/plugin-commonjs": "^22.0.0",
	"@rollup/plugin-node-resolve": "^13.3.0",
	"@rollup/plugin-typescript": "^8.3.3",
	"fs-extra": "^9.1.0",
	"gulp": "^4.0.2",
	"rollup": "^2.75.6",
	"tslib": "^2.1.0",
	"typescript": "^4.7.4"
}

Run npm i to install the packages. Next, we will Add a gulp file help with the build process. Here is the gulp file I will be using for this project.

npm i

I will briefly explain the gulp file and what it is doing. The build function creates a bundle file using rollup. We use the rollup javascript API and @rollup/plugin-typescript plugin to compile Typescript files into javascript and we chain to the output of the bundle step to generate output javascript files/s.

The watch function looks for the changes in the wwwroor/typescript folder for changes and rebuilds and bundles the changed files.

Check out the gulp file in the repo

The watch function and the build function are exported at the end of the gulp file. Get more info on the various configuration options for rollup on this page:

Now let's hook up out gulp task up with the Visual Studio build task. For that lets add an a build entry in the script section of the package.json file.

"build": "gulp"

Open the csproj file for the client project and add the following section:

<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
	<Exec Command="npm install" />
	<Exec Command="npm run build" />
</Target>

With this change Visual Studio will install app dependancied and build the Typescript files for us. Now if the project is built a js folder will be created with the javascript file in it. Let's reference the file in the index.html file so that its loaded when the page loads.

I have skipped the javascript interop code in this post to keep it relatively short. Please take a look at the JavascriptInterop.razor, JavascriptInterop.razor.cs and the CalculatorNoficatioinService.cs files for the interop code.

We are almost there, the final piece to this is hooking the gulp file to the task runner in Visual studio. Right click gulpfile.js and click Task Runner Explorer

The watch task can be manually started or it add a binding to automatically run when the project opens

We are all set! With the watch running files changes in the Typrscript folder will be picked up and build again.

In this article I showed you how to integrate gulp tasks with the Visual Studio task runner. I am planning writing more articles showing how to leverage this project set up to speed up your development flow with Blazor and typescript.

Let me know what you think. Feedback will be much appreciated!