Start With
The Tutorial At
This Link

Nov 22

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

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: http://www.typescriptlang.org/#Download. 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._lastname.toUpperCase() 
            + ", " + 
            this._firstname.toLowerCase()  
            + " [" + 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: http://www.typescriptlang.org.

 

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 = contentItem.data["FirstName"];
    var LastName = contentItem.data["LastName"];
    var Age = contentItem.data["Age"];
    var objFomatName = new FormatName(FirstName, LastName, Age);
    var FinalName = $("<h1>" + objFomatName.ReturnName() + "</h1>");
    FinalName.appendTo($(itemTemplate));
    itemTemplate.appendTo($(element));

 

When we run the application, it works!

 

TypeScript Links

Videos, Websites, Documents

http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript

http://www.typescriptlang.org/
http://www.typescriptlang.org/Playground/
http://www.typescriptlang.org/Samples/
http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf

http://bit.ly/TypeScriptSample

 

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)

 

Thanks

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

 

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

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