You are here:   Blog
Register   |  Login

Nov 22

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

image

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

image

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

image

It displays the first name of the entries.

image

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

The JavaScript

image

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

image

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

image

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

image

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

image

We add a New Item to the Scripts folder.

image

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

image

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

image

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.

 

image

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).

image

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

 

Consume The Code

image

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

image

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));

 

image

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)

8 comment(s) so far...


Gravatar

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
Gravatar

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
Gravatar

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
Robert

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

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
Gravatar

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
Gravatar

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
Gravatar

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
Gravatar

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:
Title:
Comment:
Security Code
CAPTCHA image
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