Introducing TypeScript

Face it, JavaScript is a functional language that can be difficult to learn and use, especially for those with experience in Java or C#. Its original purpose was to support Dynamic HTML (DHTML) for Netscape Navigator back in the late 90s.

Technically, it was called JavaScript for branding purposes by Sun when they absorbed Netscape. However, as John Resig (the original creator of jQuery) put it, “JavaScript is to Java as a hamster is to ham.” Microsoft was told they were not legally allowed to include JavaScript with their Internet Explorer web browser so they created a close copy of it called JScript. Netscape had submitted the JavaScript standard to the European Computer Manufacturers Association International (ECMA International) who set up the first standardized version in November, 1996 called ECMAScript 1 (ES1). Originally, Netscape Navigator, Internet Explorer, KHTML, and a few other engines started supporting ES1. ECMAScript, like JavaScript, is a prototyped-based language that supports object inheritance.

In 2007, the ECMA standards group tried adding object-oriented language keywords to the ES4 language to better simulate other object-oriented (OO) languages such as C# or Java. The assumption was that it would make the ECMAScript language more user-friendly for experienced server-side developers. As well, ES4 would also support static type checking for simpler debugging while developing. It would also include early binding and other performance benefits. These features included namespaces, classes, interfaces, classical inheritance, and more. Unfortunately, the ES4 standards were dropped due to political differences over the language complexities. However, many of the other features of ES4 were still rolled into ES5.  You can read more about ECMAScript 4 here: http://www.ecmascript.org/es4/spec/overview.pdf

Today, the ECMA standards team has not given up on all the OO language features. Instead, they are taking some of the previously abandoned features of ES4 and are currently rolling them into ES6 (code-named ES6 Harmony). Hopefully, in a few years, all web browsers will support most of the popular OO language features, thus making it easier for Java, C#, and C++ developers to efficiently learn and develop high performance and fully functioning web applications. You can learn more about ES6 here: http://wiki.ecmascript.org/doku.php?id=harmony:specification_drafts

In the interim, there are other JavaScript libraries that can help us extend ES5 with these OO features such as Extend, Klass, and more. One of the latest tools we can start using will soon be released by Anders Hejlsberg and Microsoft – TypeScript. As you probably know, he was one of the primary developers of Turbo Pascal (which later became Delphi) and is still the chief architect of C#. He is also the core developer of Microsoft TypeScript – an open source OO version of JavaScript that compiles TypeScript code into standard ES5 JavaScript. The language supports strong typing, classes, interfaces, modules, generics, and more! Its primary purpose is to help us write more efficient JavaScript in a way that can make it easier to debug errors and enforce typing while remaining compatible with today’s web browsers. TypeScript can also be used with other popular JavaScript libraries and for creating Windows 8 Store applications. It also introduces us to the future ways we will eventually be developing ES6 scripts.

TypeScript appears as a modified version of JavaScript that support classes, inheritance, constructors, interfaces, and strong typing. The TypeScript command-line compiler (tsc.exe) converts your TypeScript code into standard ES5 JavaScript. TypeScript can also be used as a learning tool, demonstrating how classes, namespaces, inheritance, and other OO features written in TypeScript are correctly converted in JavaScript.

TypeScript has gone through several beta releases in the last two years. At the time of writing, the latest Release Candidate of version 1 (RC1) was released on February 25th, 2014. The main website for TypeScript is here: http://www.typescriptlang.org/

The open-sourced development, history, and documentation, and project status is all on the CodePlex site here: http://typescript.codeplex.com/

TypeScript is free and also works with many editors such as Visual Studio, Sublime Text, Vi, and Emacs. Check out alternative editor support here:
http://msopentech.com/blog/2012/10/01/sublime-text-vi-emacs-typescript-enabled/

There is also a plug-in for Eclipse here: https://github.com/palantir/eclipse-typescript

It can also be installed as a node.js package. You can download and install TypeScript into Visual Studio 2012/2013 here:
http://www.microsoft.com/en-us/download/details.aspx?id=34790

2014-03-06_15-51-06

Once it is install you can find the files in a versioned folder underneath the Microsoft SDKs.

2014-03-06_16-05-10

  • tsc.exe is the command line compiler for TypeScript.
  • tsc.js is the compiler called by tsc.exe. It also contains the command-line options parser and support for compiling multiple files.
  • typescript.js is the same as tsc.js but without the options parser and support for multiple source code files.
  • tschost.dll is the host for the compiler.
  • lib.d.ts is the TypeScript definitions file that contains the type descriptions for the DOM and JavaScript standard run time engine. Visual Studio uses this file to provide IntelliSense (Visual Studio auto-completion) and type checking while you write your code. You will likely use more of these definition files (DefinitelyTyped) for IntelliSense with other libraries such as jQuery, Prototype, etc. Note the *.d.ts file extension! Get them as a NuGet package or here: https://github.com/borisyankov/DefinitelyTyped

Once it is installed, you can create a new web application in Visual Studio 2012+
using TypeScript like this:2014-03-06_17-27-41

Alternately, you can add TypeScript to your existing web project by first choosing the parent node Visual C# and then by choosing TypeScript File. Give it a meaningful name and click Add.

2014-03-06_17-32-32

Just because you can add a TypeScript file to your web project doesn’t mean you’re out of the woods yet! Depending on if you are using Visual Studio 2012 or Visual Studio 2013, you may need to edit your Web project’s *.csproj file and add the build steps to it so it will actually compile your *.ts file into a *.js file. Even then, the newly created JavaScript file will not appear as part of your web project until you Add Existing File… See more here:

http://www.stevefenton.co.uk/Content/Blog/Date/201210/Blog/Adding-TypeScript-To-An-Existing-Visual-Studio-Project/

Let’s take a look at some TypeScript code. Always keep in mind that TypeScript is nothing more than JavaScript on steroids. In other words, you could take any *.js file, rename it to *.ts, and it would compile just fine with tsc.exe.

Remember – TypeScript allows you to define classes, interface, modules, constructors, and more to compile them into normal JavaScript. This process helps you find errors while you are writing the code or at compile time rather than be discovered with the dreaded run time exceptions.

Assume we define an interface and a class that implements it, like this:

As you may have noticed, after you add TypeScript in the source window on the left and then save the *.ts file, Visual Studio compiles it to ES5 standard JavaScript on the right side!2014-03-07_13-56-46

You can test your script by adding a *.htm file that includes a reference to the associated *.js file. Because it was called app.ts, you should reference app.js. If you created a new TypeScript web app, you can just use the web page that is included, like this:

In the example above, we created an instance of the Car class. It implemented the
IVehicle interface. Yes – if the car class did not include every one of the
members, I would have gotten red squiggly lines because I wasn’t meeting the
requirements of the interface. Whoops! Below, I failed to meet the IVehicle interface requirements when I renamed the Brake( ) method to Braker19( ).2014-03-07_14-07-48

Notice how we can set the data types on parameters, constructor parameters, properties, and return types. We can also define classes that inherit (extend) from the Car class like this:

The SportCar class inherits from the Car class. It also has a constructor that passes the current speed to the Car constructor. We have to use the super( ) method to do this. As well, we added the custom method BurnOut( ) to the SportsCar class. Note that abstract classes are not allowed in JavaScript thus they are not allowed in TypeScript. This is why we are also able to create an instance of the Car class directly. Please note that you are given full IntelliSense for type members.

Finally, we can even define functions that take in a parameter of the type of an interface. This allows the function to automatically assume certain members are available. Here we have added the DriveVehicle() method that accepts an IVehicle parameter. Also notice that we added one more class called Train. Interestingly, we added a private method called BlowHorn() that is called when the Start() method is called. Otherwise, it is not available outside of the Train class.

Have fun with TypeScript! It is a glimpse into the future of JavaScript programming, a simpler way for classical OO developers to embrace JavaScript, and a excellent learning aid for aspiring web developers who want to know the best ways to write OO JavaScript while having it be much easier to troubleshoot.

  • gotofritz

    Typescript may be cool, but some of the arguments this article put forwards are rubbish.

    “Face it, JavaScript is a weakly-typed functional language that is simply a pain to use.”
    Well, when you back up your assertions sooo well, who are we to argue…

    “Through the years, the ECMAScript standards have added additional capabilities to the JavaScript language to simulate a true object-oriented (OO) language such as C# or Java”

    Absolute nonsense. Javascript has never tried to be Java, it’s had prototypical inheritance from the beginning.

    I stopped reading there, it was just too painful.

    • http://eliseu.tk/ Eliseu Monar

      I am amazed with how an impactful title gained our attention. I was expecting a more mature post too :(

      • gotofritz

        Yeah, linkbait, and we fell for it!

    • Davin Mickelson

      Thank you for your feedback, gentlemen. I’ve corrected the content.

  • DerpDerpHerp

    Different tools for different applications of business logic, folks. Why try and force Javascript to behave like a strongly typed OO language with classical inheritance? Why do you even need that on the user-facing layer?

    Strongly-typed languages like Java/C# are nice because they make information hiding (public/private getters and setters, and so forth) pretty easy and straightforward, and also mitigate dependency injection. If you’re trying to do things that require these features, maybe you should do it server-side, and then pass the object to the user-facing layer as a JS prototype object.

    This post strongly reeks of developers who are set in their ways trying to mangle a perfectly good tool into something that fits their existing mental paradigms, rather than actually learn about what Javascript is and then do the critical thinking required to come to their own conclusions about when/where/how it should be used.

    I can see why Microsoft wants to push this – it’s a wonderful marketing tool. Offer a path of lesser resistance to devs and get them committed to your platform, and locked-in.

    Also, Coffeescript. And closures. Seriously, if you really really really need a public/private paradigm in your Javascript, go look at closures.

{Offer-Title}

{Offer-PageContent}
Click Here