Background
In Visual Studio 2015 there was a project template for building HTML applications with TypeScript. It was called, predictably, ‘HTML Application with TypeScript’.
The Visual Studio team have removed this template in versions of Visual Studio after Visual Studio 2017. I can see why. It contains some code that shows the time, ticking, in your default web browser when you start it. That isn’t really a ‘template’. The first thing you’re going to do is delete the code to show the timer.
Also it had some quirks. It used the ASP.NET C# templates as a jumping-off point. This is fine: it gives you stuff like pre- and post-build events that the other TypeScript project types don’t have, and the ability to configure IIS Express or another web server in the project properties. However, it insisted on building an (empty) C# library on every build that then wasn’t used for anything. This always seemed a bit odd.
Having said all that I used it quite a lot, mainly for test and play examples. Configuring a project to test TypeScript for an HTML application is not particularly easy. This template did it all for you, including making it ridiculously easy to include webpack so you could bundle multiple files using external module syntax. I may write about this separately.
The Template Resurrected
So having done some work with Visual Studio add-ins last week I thought I’d resurrect this project template. It’s now available as a Visual Studio Template Extension, both from Visual Studio Marketplace and under Tools/Extensions and Updates in Visual Studio 2017 itself. Search for ‘TypeScript HTML Application Template’. It’s also available in Visual Studio 2019.
It works exactly as the old one did. When started with F5 it will start a web server, by default IIS Express, and show a ticking time in the selected web browser. The code to show the time is in a TypeScript class. If the browser is Internet Explorer or Chrome the code will break at breakpoints directly in Visual Studio, and the usual Visual Studio debug tools and windows will be available. Note that if you are using Chrome you may need to hit refresh in the browser for breakpoints in startup code to be hit.
Rich Newman 
Hi Rich,
do you know how to get modules working? If you take the default ‘Greeter’ App and add an `export` to the class it fails with ‘exports’ is not defined. For the sake of it I define `exports = {}` in the index.html and it starts up fine now. But when I add an import to a ts file (which Visual Studio 2017 is ok with), and refresh the web page it says ‘require’ is not defined. Now I know about http://requirejs.org/ but I have not had any success getting that to work, and regardless it requires a full re-architecting of the application. Do you have any suggestions for getting modules to work with typescript in Visual Studio? And can that be included in the addon?
Thanks,
Brooke
I’m glad you worked it out. As you’ve discovered, one of the problems with JavaScript is that there’s no native way of linking files. It was intended as a lightweight scripting language for web pages. The idea was you wouldn’t need more than one file with your script in. And if you did you could just reference multiple files from the web page.
The module systems came along later as a way of handling the obvious problems with this. However you usually need at least some third-party code to get modules to work, even if you’re using TypeScript and hence have a compilation step. Having said that, the browsers are now adding module support themselves, although at the time of writing support is not universal.
requirejs is one standard approach to solving this problem for web browser code, but there are other techniques.
This is one of the most confusing areas for people coming to TypeScript from other languages, particularly in Visual Studio where we normally expect the IDE to link our files for us out of the box.
Yep I’m looking forward to the native solutions. But then again, there will always be lagacy browsers to deal with so some kind of transpilation is required.
I worked this out and wrote about it at https://stackoverflow.com/questions/42649220/visual-studio-typescript-uncaught-referenceerror-exports-is-not-defined-at/48436147#48436147
Oh, also see my post https://stackoverflow.com/questions/48494104/visual-studio-2017-cant-change-project-csprojs-typescriptmodulekind-for-type where I ask about an issue I’m having with Visual Studio (and reference your template).
Hi Rich,
I might end up using this after all. Thank you!
But still I’m thinking: Why do we not have any “pure” typescript projects at all, that’d just generate the Javascript file which we could use post build to copy into ANY web project. All common objects will be in one project. I may also be able to find & use tools that could translate C# models into Typescript thus autogenerating the model part. I could also use partials to add methods to the models that I could call from Angular controllers thus ensuring functionality is present in the most relevant class. Am I missing something?
I have not had the pleasure of drilling down into making a template and/or MSBuild wizardry. I feel such a template should not be difficult to make. Any pointers?
Many thanks for this Rich, just what I needed compared to the bloated ASP.Net templates.