Using Visual Studio to build an HTA (or single-page local HTML file application) with TypeScript

hta, typescript, visual-studio-2013

Solution

I created a new "HTML Application with TypeScript" project. That gives me points 1-4.

I renamed "index.html" to "index.hta" in the solution -- no need to do this in post-build. Visual Studio recognizes the .hta extension as an HTML file.

I set the build properties to open `mshta.exe` as an external program, with the full path of the HTA as a command-line argument. I haven't been able to attach the current Visual Studio window to the HTA process (so no breakpoints), but the `debugger` statement opens a JIT debugging dialog box and prompts to open a new Visual Studio session, with full debugging capabilities.

An unexpected bonus is that I can debug the TypeScript file, and I am not limited to debugging the generated Javascript.

Update

Currently, I would prefer to use Visual Studio Code for HTA development; VS Code was not available at the time that I answered this. For this task, Visual Studio offers no benefits over VS Code.

Problem

I have a rather large HTA that I still need to maintain. I originally wrote it using Notepad++, but because of its growth I am now interested in the Intellisense capabilities offered by TypeScript. It would also be helpful to have Visual Studio's HTML and CSS development tools. I am aware that I'll have to add type annotations to the application, but it is still worth my while, and can be done gradually. Using the File -> New Project -> HTML Application with TypeScript outputs a DLL for use with IIS Express or another web server. The output I need is the HTML, CSS and TypeScript compiled to Javascript with references adjusted in the HTML. In short, I need the following: - Output HTML/CSS files instead of a DLL (The extension should be renamed to .hta but I can do that in a post-build step. - Output TypeScript files as Javascript - Intellisense for all TypeScript/Javascript files included in the project - Optionally, allow adding Javascript/TypeScript libraries via Nuget (I can add them by hand, but I would prefer not to). - Optionally, Visual Studio debugging (Using the `debugger` keyword in Javascript allows me to start a debugging session with Visual Studio, once the HTA is started using the `mshta.exe` executable. However, it would be nice to set breakpoints in the editor window without modifying the code.) How can I use Visual Studio (2013 Professional) for this scenario? NB. I have extensive experience using Visual Studio for desktop applications (C#/VB.NET and WPF) but I have no experience in Web development. I have a fair knowledge of HTML, CSS and Javascript in the HTA environment. Update I tried creating a new web site (File -> New Web Site ...) but I cannot add TypeScript files to the site.

Original source