Type Coercion Issues

Suppose you have two variables, one a string and the other a number:

var oneNumber = 1;
var oneString = "1";

In JavaScript, you can compare these two variables by using the == operator and expect JavaScript to return true. The == operator coerces one variable into the same type as the other and then compares the two:

var theSameJS = (oneNumber == oneString);  // true in JavaScript. Invalid in TypeScript

In TypeScript, the same operation will not compile until one of the two variables is explicitly cast to the other’s type. Even if the types of oneNumber and oneString are not specifically set, the TLS will infer them from the values assigned, meaning this gotcha is one you shouldn’t need to worry about.

var theSameTS = (oneNumber.toString() == oneString);  // true in TypeScript and JavaScript.

A similar gotcha occurs when using the + operator. If one of the operands is a string, JavaScript will always concatenate the two values together and return a string, rather than adding the two as numbers and returning a number, which may have been the desired result.

var thisIsAString = 1 + "1";  // returns "11"
var thisIsANumber = 1 + parseInt("1", 10);  // returns 2

The TLS won’t stop you from making the same mistake, but it will infer the type of the returned value and flag potential errors later if you reuse it. If you hover the cursor over the name of the variable, the TLSwill display the inferred type of the variable as well.

for (var i = 0; i < 10; i++) {
    console.log(i);  // displays numbers 0 to 9
}
//  variable i now redeclared but value not reset to undefined.
// instead it uses last set value of 9 from inside the for loop block
var i;
console.log(i);  // displays 10

function optionalSemicolons() {
    return
    {
        a: "Hello"
    };
}

function optionalSemicolons2() {
    return {
        a: "Hello"
    };
}

function optionalSemicolons() {
    return;
 {
        a:
"Hello"
    }
    ; ;
}

function optionalSemicolons() : Object { ...

TypeScript vs. Other Compile-to-JavaScript Languages

So TypeScript does help with the quality of the JavaScript you can produce as well as its overall structure, but there’s plenty of competition in the particular space. Several dozen similar language projects are listed at https://github.com/jashkenas/coffee-script/wiki/List-of-languages-that-compile-to-JS, for example. How does TypeScript stack up against them all, and is it right for you? Let’s start by asking a few questions:

• What’s the main aim of the language?
• Is it still JavaScript, or something else?
• Does it add static typing?
• Does it add a class-based, object-oriented programming model?
• Can I use third-party JavaScript libraries?
• Is it supported in Visual Studio or Windows?
• Is it supported on Mac OS or Linux?
• What VM does it use to run?

First we’ll answer for TypeScript and then for the two most visible alternatives to TypeScript at the moment: Dart and CoffeeScript.

• The main aim of TypeScript is to enable large-scale application development with JavaScript.
• TypeScript is a superset of JavaScript, so yes, it is still JavaScript.
• Yes, TypeScript incorporates static typing.
• Yes, TypeScript adds a class-based, object-oriented programming model.
• Yes, but you’ll need a declaration file for the library to enable IntelliSense and strong typing.
• Yes, with the TypeScript Language Service extension.
• No concrete IDE support yet for Mac OS or Linux, although the compiler itself is easy to install by itself or in Node.js.
• It uses the JavaScript VM.

Dart (www.dartlang.org) is Google’s answer to JavaScript. This completely new language addresses JavaScript’s issues, cleans up its semantics, adds static types (as does TypeScript) and class-based object-oriented features, and improves startup times and performance overall. It requires its own Dart VM (currently available only in a developmental build of Chrome) for optimal performance but does come with a Dart-to-JavaScript compiler. It shares some common goals with TypeScript—the main one is making large-scale web application development possible—but in general, the two are separate, with only the dart2js compiler linking the two languages.

• The main aim of Dart is to learn from the mistakes of JavaScript and provide an alternative.
• No, it’s a new language but it compiles to JavaScript.
• Yes, Dart incorporates static typing.
• Yes, Dart adds a class-based, object-oriented programing model.
• Not yet, although there is a js-interop library.
• The Dart Editor IDE is available for Windows, Mac OS, and Linux.
• Dart has its own VM, but when you compile it to JavaScript, you can run it in any JavaScript VM.

CoffeeScript (http://coffeescript.org), meanwhile, tries not to replace JavaScript but to produce a syntax based on other dynamic languages. This  makes CoffeeScript easier and quicker to write, as it then compiles into neat, well-formed JavaScript. Essentially, you could say it’s JavaScript without the large numbers of braces, brackets, and parentheses, but that would be missing the point. It sits in your tool chain at the same point as TypeScript but helps you generate better JavaScript while using a non-JavaScript syntax.

• The main aim of CoffeeScript is to provide a language that has neater syntax than JavaScript (based on Ruby and Python) but that compiles back into JavaScript.
• No, it’s a different language, but like TypeScript, it’s a design-time-only construct to help you write better JavaScript.
• No, CoffeeScript does not add static typing.
• Yes, CoffeeScript adds a class-based, object-oriented programming model.
• You can use external JavaScript libraries from inside CoffeeScript, but you’ll get syntax errors if you compile JavaScript as is, without converting it.
• CoffeeScript is supported via the Web Extensions add-in for Visual Studio. There are also several other Windows IDEs that support CoffeeScript development.
• CoffeeScript is available as a Node.js package and via APT for Linux and Mac. Eclipse, Vim, TextMate, and many other IDEs support CoffeeScript.
• CoffeeScript compiles down to JavaScript, so all you need is a JavaScript VM.

TypeScript vs. ECMAScript

The final question in this section is how TypeScript may evolve as we continue to use it. It is an open source project, so we know that Microsoft will be listening to feature requests as well as taking on bug patches, but we also know that it is trying hard to keep its “additional features” aligned with the ECMAScript 6 standard. For example, the class, module, and arrow function syntax conform to this proposed future standard.

Going one further, it has been stated that,

In the long term, we expect TypeScript to include everything that becomes part of future versions of ECMAScript. In some cases, these will only be available when targeting newer browsers, when the feature relies upon some new runtime capability. But in many cases, where the features are just syntactic sugar, we expect to be able to compile to simple and clean JavaScript for ES3/ES5, which implements a very good approximation.

http://TypeScript.codeplex.com/workitem/15

Looking at the spec as it stands ( http://wiki.ecmascript.org/doku.php?id=&idx=harmony), there’s quite a lot to keep the project busy for several major version releases. What’s not clear, however, is how Microsoft will react if ECMAScript 6 is altered such that realigning TypeScript with the new syntax would create breaking changes across all existing TypeScript projects. Time will tell.

Visual Studio 2012

Microsoft has focused on giving TypeScript developers the best experience through the non-Express editions of their Visual Studio IDE. In this section, you’ll see how to integrate TypeScript as best as currently allows for work in Visual Studio Professional, Premium, or Ultimate. You’ll find notes about using TypeScript with Visual Studio 2012 Express editions and WebMatrix afterward.

Other Visual Studio Editions

Although it may not be possible to enjoy the full TypeScript experience if you aren’t using Visual Studio 2012 Professional or higher, remember that you can download a current version of the compiler and sample files from http://typescript.codeplex.com and go from there. There are also a few other things you can try.

On Node.js

The TypeScript compiler can be installed as an npm package on Node.js. Just type the following:

npm install -g TypeScript

You’ll be able to compile code by running tsc helloworld.ts, for example.  Note, however, that the compiler itself is not exposed as an instruction, although there is an issue raised in CodePlex to do this (WorkItem 97).

Sublime Text

If you’re not a fan of Visual Studio, you can grab a copy of the TypeScript compiler (either from the CodePlex site or by installing the download) and then run it manually. Sublime Text 2 users can also find a set of TypeScript syntax highlighter rules written by Microsoft at http://blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx.

To install these rules and include TypeScript compilation in your build system, do the following:

1. Download the Sublime Text zip file from the MSDN Blogs page noted earlier and extract the contents. You’ll find a file inside called typescript.tmlanguage.
2. Open Sublime Text and from the Preferences menu choose Browse Packages.
3. When Solution Explorer / Finder opens, create a folder in the current directory called TypeScript and copy the .tmlanguage file into it.
4. From the Tools menu, choose Build System New Build System.
5. Add the following to the new sublime-build file that has been created for you:

   {
       "cmd": ["tsc","$file"],
       "file_regex": "(.*\.ts?)\s\(([0–9]+)\,([0–9]+)\)\:\s(...*?)$",
       "selector": "source.ts",
       "osx": {
          "path": "/usr/local/bin:/opt/local/bin"
       },
       "windows": {
           "cmd": ["tsc.cmd", "$file"]
       }
   }

6. Restart Sublime Text 2.

A Simple HTML+JS Page

The project template includes an HTML page backed with a TypeScript file that demonstrates a few more features than we’ll use here, so it will be worth your while coming back to it in a while. In the meantime, you can delete the files app.cs and app.ts.

1. Press Ctrl+Shift+A, and add a new HTML page to the project called SimplePage.html.
2. Add the following code:

   <!DOCTYPE html>
   <html>
   <head>
     <title>A Simple Demo</title>
     <script>
       function displayDate() {
         document.getElementById("txtDemo").innerHTML = Date();
       }
     </script>
   </head>
   <body>
     <h1>My First JavaScript</h1>
     <p id="txtDemo">This is a paragraph.</p>
     <button type="button" id="btnGo" onclick="displayDate()">
       Display Date
     </button>
   </body>
   </html>

3. Press Ctrl+F5 to run this page. You’ll see that the current date and time replaces the paragraph text when you press the button.

TypeScript and IntelliSense

Now it’s time to split out the script from the HTML and rewrite the script as a TypeScript file. The compiler targets only .ts files, so you can’t just embed TypeScript in an HTML page. Here are the steps:

1. Create a copy of SimplePage.html and rename it SimplePageTS.html.
2. Delete the <script> block from the <head> element in SimplePageTS.html and also the onclick attribute from the <button> element.
3. Right-click SimplePageTS.html in Solution Explorer and then click Set as Start Page.
4. Press Ctrl+Shift+A, and add a new TypeScript file called SimplePage.ts to the project. Delete its contents and add the following, copying the displayDate function verbatim and adding an event handler for the button.

   function displayDate() {
       document.getElementById("txtDemo").innerHTML = Date();
   }
    
   document.getElementById("btnGo").addEventListener("click", displayDate);

   Note that as you type, you get full IntelliSense support for the JavaScript language, the Document Object Model, and any functions you’ve written yourself. Also, if you hover your cursor over a type, function, or variable, you’ll get a full set of information about it, as shown in Figure 1-7.

   

   Figure 1-7 .  The TypeScript Language Service displays type and method information as you hover

5. Add a new <script> block as the last child of the <body> element. Set its src attribute to SimplePage.js. This is the JavaScript file our TypeScript will compile into. You could reference the SimplePage.ts file directly here and have it compiled on the fly on the web server, but the performance loss would make this not a particularly viable option.

Errors and Declaration Files

If you run SimplePageTS.html, you’ll see that the page still functions as before, with the TypeScript file being compiled into JavaScript when the site is built. Let’s introduce an error and see what happens.

In SimplePage.ts, change displayDate() to read as follows:

function displayDate() {
    var currentDate: Date = new Date();
    document.getElementById("txtDemo").innerHTML = currentDate;
}

You’ll see that an error is raised, indicating that currentDate cannot be converted to a string (see Figure 1-8). Also, the right-hand pane showing the resultant compiled JavaScript has been grayed out.

Why the error? All we did was replace the Date() constructor with a variable containing a Date object. Well, like the gotchas noted earlier, JavaScript silently coerces the Date object into a string in the original example. When we strongly type the currentDate variable as a Date, TypeScript does not allow this conversion to happen implicitly.

In SimplePage.ts, right-click innerHTML and select Go To Definition from the context menu (or press F12). Visual Studio will open the JavaScript runtime and DOM declaration file lib.d.ts and highlight the line showing that the innerHTML property of an HTMLElement object requires a string.

Return to SimplePage.ts and convert currentDate to a string with the following code:

document.getElementById("txtDemo").innerHTML = currentDate.toUTCString();

declare var $: any;

/// <reference path="libjquery-1.8.d.ts" />

A Little Code Structure with Classes and Modules

In our final revision for this demonstration, you’re going to see how TypeScript’s class and module features can help you refactor your code into a more maintainable structure. As you’ll see in Chapter 2, class and module are roughly analogous to C#’s class and namespace, allowing you to create objects as you would in .NET and give them some scope. In this simple example, adding classes and modules is overkill, of course, but it’s useful to give you a quick flavor of how they work in TypeScript.

1.  In SimplePage.ts, wrap the DisplayDate function inside a class called Chapter1. Note that you’ll need to delete the function keyword preceding DisplayDate, as it is now an object method.

2.  Update the event handler to bind Chapter1.prototype.DisplayDate to the button’s click event, as shown in the following code.

class Chapter1 {

  DisplayDate(): void {

   var currentDate: Date = new Date();

            $("#txtDemo").text(currentDate.toUTCString());

        }

    }

$("#btnGo").click(Chapter1.prototype.DisplayDate);

TypeScript includes the ability to make object methods static so we don’t have to go through an object’s prototype to find its method reference for the event handler.

3.  Make DisplayDate a static method by adding the static keyword before its name.

4.  Update the event handler to bind Chapter1.DisplayDate to the button’s click event.

class Chapter1 {

  staticDisplayDate(): void {

   var currentDate: Date = new Date();

            $("#txtDemo").text(currentDate.toUTCString());

        }

    }

$("#btnGo").click(Chapter1.DisplayDate);

Finally, we’ll wrap the class in a module. There are two rules to remember for accessing classes from outside the module it is declared in:

• The class must be made visible by using the export keyword.
• There’s no equivalent keyword in TypeScript for the using keyword in C#, or imports in Visual Basic. References to the class or static method must be fully qualified with the module and class name.

5.  Wrap the Chapter1 class inside a module called TypeScript.Revealed.

6.  Add the export keyword to the class statement so the event handler can access it.

7.  Update the event handler to reflect the new fully qualified name for DisplayDate.

module TypeScript.Revealed {

    exportclass Chapter1 {

        static DisplayDate(): void {

            var currentDate: Date = new Date();

            $("#txtDemo").text(currentDate.toUTCString());

        }

    }

}

$("#btnGo").click(TypeScript.Revealed.Chapter1.DisplayDate );

Once again, you’ll find that the page runs as before. Hopefully, you’ve seen how some of the new features of TypeScript—strong typing, ambient declarations, reference hints, declaration files, classes, and modules—can help you feel more at home creating TypeScript/JavaScript. Now might be a good time to go back to the default.html and app.ts files originally generated with the TypeScript project and review the further syntax features it demonstrates: class member variables and constructors, and lambda (arrow) functions. All of these and more are covered in Chapter 2.

You can find the code for the FirstSteps project in the Source Code/Download area of the Apress web site (www.apress.com).