TypeScript: A New Direction in Browser-Based Applications

Developers are looking for ways to create browser-based applications that work like desktop applications, but without the platform and host restrictions that desktop applications present. TypeScript may provide an answer that improves on JavaScript.

Web applications have become popular because they work anytime and anywhere. The same application can work equally well on a Macintosh, Linux, or Windows system. Software that runs in a Web browser works equally well on a desktop, laptop, tablet, or even on a smartphone – at least in theory. In short, a well-constructed browser-based application finally provides a means for a developer to write an application once and have it work everywhere.

Up until now, developers have used a combination of HTML5, JavaScript, and third party libraries such as jQuery and jQuery UI to create professional quality applications. Unfortunately, JavaScript presents problems to the developer because it lacks some features of full-fledged languages, such as static typing.

There might be a solution. TypeScript helps you create professional applications that don’t require all the kludges. You use a language that’s a true superset of JavaScript to create applications that simply work regardless of Web browser or platform, yet with much of the functionality of languages like C++ and C#.

Considering the Advantages

Many developers view JavaScript as simply a scripting language. JavaScript lacks many of the features of full-fledged languages, which means developers who are comfortable with traditional programming languages are frustrated by workarounds.

TypeScript provides static typing, so that you can specify the types of arguments passed to functions. That makes it much easier to create robust applications that are less likely to include hard to fix errors and that possess fewer security problems. The use of static typing also means that the compiler can infer return types in many cases, so debugging is easier and the application can run faster.

Static typing can provide additional information, too. JavaScript editors often can’t provide the developer with details about the methods that appear in the code. Using static typing makes it possible to provide intelligent help (in the form of command prototypes and other assistance) to the developer much like what IntelliSense does in Visual Studio.

TypeScript is compiled, rather than interpreted. The compiler outputs JavaScript code that you can then run wherever it’s needed. One advantage to using a compiler is that you can find errors with greater precision before the code is actually run (which keeps users from getting cranky, too). Developers save considerable time creating and maintaining complex Web applications. A simple interpreted environment worked well when JavaScript was used for basic client-side tasks, but that’s no longer the case and a compiler is a welcome addition.

Unlike JavaScript, TypeScript can use both interfaces and classes. These useful features make a TypeScript code shorter, easier to read, and easier to debug than the prototypes used by JavaScript. Mind you, the code is compiled into JavaScript at some point, but the developer sees a class, not a prototype, when working with the code.

The classes aren’t simply bolted on either. They follow the ECMAScript 6 (ES6) Harmony class definitions. This means that the class implementation used by TypeScript eventually will be incorporated into JavaScript, so the code you create today is going to work directly in JavaScript in the future. The difference between interfaces and classes in TypeScript is that an object must be an instance of a class, but it can simply implement an interface. In fact, an object can only be an instance of a single class, but it can implement as many interfaces as needed to make the resulting object functional.

TypeScript uses a structural type system. This means that you don’t have to specifically state that an object implements an interface. All the object need do is match the interface’s definition. Given the following interface:

interface Color

{

Red: number;

Green: number;

Blue: number;

}

the following variable declaration (using an object literal) is perfectly acceptable:

var MyColor = {Red: 255, Blue: 255, Green: 255};

The variable MyColor implements the Color interface. When working with an IDE that supports TypeScript, you actually see the difference. More importantly, the compiler can check MyColor to ensure that it implements the Color interface correctly and it warns you about any issues with it.

Refactoring is another area where TypeScript has a distinct advantage over JavaScript. For example, when you change the name of a class or interface in TypeScript, it’s possible to find almost all uses of that class or interface in the application code and change the name as needed. Though, as with many things, there are exceptions. For example, while you can find changes in a name as part of the code in a class or interface, you won’t find it within an object literal. However, the compiler will find the required name change and tell you about it, so your code will still be fixed before it reaches the production environment.

TypeScript has a lot of other advantages to offer, but I think the ones I listed here are the advantages most developers want to know about. In a moment I will share resources for additional information, in case you want to dive a lot deeper. The point is that TypeScript is a true superset of JavaScript and it compiles to JavaScript, so you aren’t facing an entirely new environment in order to obtain the benefits that TypeScript provides.

Dealing with the Disadvantages

One TypeScript disadvantage, for now, is that it’s new. You need to perform a download to get it, and the number of environments that support it directly are limited. If TypeScript catches on, you’ll find it added to newer versions of existing developer tools such as LIVEditor. You can currently get TypeScript syntax highlighting for Sublime Text, Emacs, and Vim. In the meantime, you are faced with using TypeScript as part of a Visual Studio solution, at the command line, or by creating your own solution using the source code (which happens to be open source).

Any time you move to a new language, you must also find resources to help work with that language. This is the main reason that most developers focus on one or two languages. Because TypeScript is a true superset of JavaScript, you can still use all of the third party libraries and templates you’ve used in the past. However, you must now provide external type declarations to make the code accessible. Fortunately, there are already such files to use with TypeScript for popular third party libraries such as jQuery and jQuery UI.

You’re probably going to find that there are other issues with the language, which is the best reason to try it out with several smaller projects before you move onto something major. Every language has pros and cons. Well-rounded developers have multiple languages in their toolkit and they choose the one that has the most to offer for a project, while realizing the need to overcome difficulties with the language; TypeScript is no different. For example, you might find that the method used for type declaration isn’t precisely what you’d want.

Obtaining Additional Information

Before you go too far, it’s helpful to view Anders Hejlsberg’s video on TypeScript on Channel 9. The video is about 53 minutes long, but is well worth the time investment if you’re serious about using TypeScript to do something interesting. The video also tells you a lot about the philosophy behind the language and how you can use it for a variety of tasks, including creating Windows 8 applications. However, the big story for most developers is using TypeScript to simplify the creation of browser-based applications that can run on any platform using any HTML5 compatible browser.

The main TypeScript site contains a wealth of useful information, including instructions on how to obtain a copy for your system using the Node.js Package Manager, a Visual Studio 2012 plugin, or by compiling the source code for your particular development environment.

Before you start experimenting, it’s a really good idea to check out the samples, which show how you can work with other products. For example, there’s a battleship-clone example that uses both jQuery and jQuery UI as shown here:

a new direction in browser-based applications 01-med_

Click "Browse the Code" and you see how the example is put together. All of those .TS files are TypeScript code. When you click Run the Sample, you can see how well TypeScript works with that particular library on your selected platform. This is an important issue because different platforms react differently. You want to be sure the samples work well on your target platforms and with your selected browsers.

Using Your Existing Code

You can use any existing JavaScript code you own with TypeScript. However, as previously mentioned, you need to create external type descriptions to make your personal libraries work.

In addition, there’s no way to create a TypeScript library and use it directly from within JavaScript unless you compile the library first and then play around with it. My own experimentation in this area proved a bit frustrating; I always ended up having to wade through the compiled code to figure out what went wrong. This issue will probably improve as TypeScript improves and developers gain more experience using it.

The point is that you can use existing JavaScript with TypeScript and you can use TypeScript with existing JavaScript, so your existing investment is protected.

Going to the Playground

One of the more interesting aspects of TypeScript is that there’s a Playground to try it out without committing to downloading or installing anything. I tried the Playground with a number of browsers (Internet Explorer, Firefox, and Chrome) and platforms using Firefox (Macintosh, Linux, and Windows) and it worked well on all three platforms.

What is amazing about all this is just a few years ago, you could never even hope to run something of this complexity in so many environments. It’s not outside the realm of possibility that you could try the Playground out on your smartphone and have it work just fine (albeit, in a cumbersome way).

The Playground comes with a number of predefined scenarios. All you need to do is select one from the drop down list as shown here:

A New Direction in Browser based Applications 02

The left pane shows how you would code something in TypeScript. The right pane shows the compiled JavaScript equivalent. When you want to see how the application works, click Run. A new window opens with the compiled TypeScript code in place. You interact with the application as you would with any other code.

Using the Playground to test your own code is quite doable. Simple highlight any code in the left pane and press Delete to remove it. You can then type the code you want to test or paste it from the editor you’re using. Interestingly enough, the Playground is intelligent enough to provide you with feedback about errors, which appear as red squiggles beneath the errant code. So, this is a fully interactive testing environment you can use to play with TypeScript without making any sort of investment other than your time.

Bottom Line

TypeScript is an interesting new language that deserves a serious look if you’re creating browser-based applications. You’ll find that you can use it for other application types, such as Windows 8 applications, but most developers will likely focus on TypeScript as a means of overcoming serious flaws in the current implementation of JavaScript for the time being.

As with any new language, there’s a lack of support for TypeScript, but this condition will improve with time. In addition, you’ll find that TypeScript, like every other language ever created, does have flaws—some of which you’ll easily overcome and some that will require quite a bit of thought on your part to remedy.

See also:


Close

Add a little SmartBear to your life

Stay on top of your Software game with the latest developer tips, best practices and news, delivered straight to your inbox

By submitting this form, you agree to our
Terms of Use and Privacy Policy

Thanks for Subscribing

Keep an eye on your inbox for more great content.

Continue Reading