You are here:   Blog
Register   |  Login

Nov 22

Written by: Michael Washington
11/22/2012 2:30 PM  RssIcon


JavaScript is very close to C# so the only thing I dislike about it, is that it doesn’t compile. it just throws errors at run-time. Using TypeScript, I can write JavaScript in an environment that provides compile-time validation. You can download and install the TypeScript plug-in for Visual Studio 2012 from here: You also need the Web Essentials 2012 plug-in that will automatically compile the TypeScript files into .js files.

I am using the LightSwitch HTML Client Preview 2.

The Application


For the sample application, I created a simple one table HTML app.


It displays the first name of the entries.


It has a popup screen that allows you to create and edit entries.

The JavaScript


In the screen designer, we can change the List to render using a Custom Control.


In the Properties for the Custom Control we click the Edit Render Code button.


This takes us to the JavaScript code file where we can write our own code to render the contents.

This is where we could potentially create a lot of code that does not compile and only throws errors at run-time.

Using TypeScript


To use TypeScript we first need to switch to File View.


We add a New Item to the Scripts folder.


We add a JavaScript file, but give it an extension of .ts rather than the usual .js.


The file will be created, and the TypeScript editor will open.


When we enter the following TypeScript code and save the file, the JavaScript file (and a minimized version) is automatically saved:


class FormatName {
	_firstname: string;
         _lastname: string;
         _age: number;
      constructor (
        firstname: string, 
        lastname: string,
        age: number
        ) {
        this._firstname = firstname;
        this._lastname = lastname;
        this._age = age;
	ReturnName() {
	var formatedName = 
            + ", " + 
            + " [" + this._age.toString() + "]";
         return formatedName


When we create the TypeScript code we get full type checking and intellisense. You can learn more about TypeScript at:



Next, we want to click on the .ts file, and in Properties set the Package Action to None (otherwise we will get a message box asking us if we want to update it each time we debug).


We can also place the TypeScript files in their own folder.


Consume The Code


We open the Default.htm page and add a reference to our JavaScript file (not the TypeScript file).


We return to the rendering method and add the following code:

    var itemTemplate = $("<div></div>");
    var FirstName =["FirstName"];
    var LastName =["LastName"];
    var Age =["Age"];
    var objFomatName = new FormatName(FirstName, LastName, Age);
    var FinalName = $("<h1>" + objFomatName.ReturnName() + "</h1>");



When we run the application, it works!


TypeScript Links

Videos, Websites, Documents


LightSwitch HTML and JavaScript

Creating Screens with the LightSwitch HTML Client (Joe Binder)

The LightSwitch HTML Client: An Architectural Overview (Stephen Provine)

Writing JavaScript Code in LightSwitch (Joe Binder)

New LightSwitch HTML Client APIs (Stephen Provine)

A New API for LightSwitch Server Interaction: The ServerApplicationContext

Building a LightSwitch HTML Client: eBay Daily Deals (Andy Kung)



A special thanks to Jan Van der Haegen  and Pat Tormey for feedback and improvements.


Download Code

The LightSwitch project is available at

(you must have HTML Client Preview 2 or higher installed to run the code)

8 comment(s) so far...


Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

As always, a very good article to get a feeling how and where to start. Thanks a lot!
In general, your blog helped my very much in the last year. Currently I'm implementing the fifth productive Lightswitch application. :-)

Greetings from Germany, Markus

By GelbeEnte on   11/23/2012 4:49 AM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Great article Michael.
I definitely have to start walking through the various Jquery courses on Pluralsight....
One day, I hope, ... we'll get the experience in the browser as we have now in the silverlight sandbox.
Thanks for sharing.

By paul on   11/23/2012 7:40 AM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Hi Michael,
Great introduction to data handling with JS; thanks a lot! We have to get familiar with this...
One question to the article/sample: How can I extend it in a way, so that the content of the list item is updated when editing the data in a dialog and closing the dialog? At the moment, I have to refresh the entire screen to get the data updated. If a List shows a single field / Summary property, the list is updated after closing the dialog, as expected. Some suggestion would be great!
Thanks a lot and best regards

By robert on   12/5/2012 11:25 PM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

@robert - Look for an article I will post next week on Databinding in LightSwitch. Databinding will do what you need.

By Michael Washington on   12/5/2012 11:27 PM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Interesting, thanks - so you used TypeScript to create a class which you consumed in your BrowsePeople.js JavaScript file. Couldn't you have also inserted a BrowsePeople.ts Typescript file, from which the corresponding .js file would have been generated? I understand that the example required minimal coding and that you would have needed to bring in the JQuery TypeScript definition file, but...? I guess what I'm asking is why not keep the entire source in TypeScript?

BTW: Beth Massi pointed me to your entry following her excellent LightSwitch demonstration.

By Steve Levy on   12/12/2012 10:40 AM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

Any advice on getting breakpoints to work in a Visual Studio LightSwitch / TypeScript application? I'm using the latest 8.1.1 and Web Essentials; the breakpoints are erratic, with a warning that symbols cannot be loaded.

By Steve Levy on   1/13/2013 9:51 AM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

@Steve Levy - Yes the break points can be a bit erratic but I use the latest IE web browser and do a lot of debugging and it works for me 95% of the time. When it doesn't I just try again.

By Michael Washington on   1/13/2013 9:52 AM

Re: Creating JavaScript Using TypeScript in Visual Studio LightSwitch

The marvel of XAML in TypeScript !!
Search the Web for
"M&P H5J is Silverlight in HTML5"

By Javier on   6/5/2013 12:27 PM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Security Code
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation